zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text auf zentrierten Hintergrundbild positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.10.2011, 15:46
Benutzerbild von zonkifail
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2011
Beiträge: 4
zonkifail befindet sich auf einem aufstrebenden Ast
Unglücklich Text auf zentrierten Hintergrundbild positionieren

Hallo liebe Forenmitglieder

Ich wende mich an euch, weil ich (als CSS-Neuling) ein kleines Problem habe, wo ihr mir bestimmt helfen könnt.

Und zwar möchte ich ein Text an der Stelle angezeigt bekommen, wo mein zentriertes Hintergrundbild eingefügt wurde. Hier erstmal der kleine Quelltext:

HTML-Code:
<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			#leiste{
			background-image:url("bild.png");
			background-position: center;
			background-repeat: no-repeat;
			height: 34px;
			}
		</style>
	</head>
	<body>
	<div id="leiste">
		Text
	</div>
	</body>
</html>
Wie man vielleicht jetzt vermuten kann, wird der Text ganz links auf der Website angezeigt, so wie hier. Leider weiß ich jetzt nicht, wie man den Text jetzt genau dort positionieren kann, wo das Bild anfängt.

Ich kann hier leider nicht einfach ganz stumpf irgendwelche padding-Werte eingeben, weil der Text dann, abhängig von der Bildschirmbreite, immer wo anders anfängt.

Ich hoffe, dass ihr mir bei diesem Problemchen helfen könnt.

MfG

Zonkifail
__________________
Eine Zahl zwischen 1 und 3: Antwort
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.10.2011, 16:28
Neuer Benutzer
neuer user
 
Registriert seit: 21.10.2011
Beiträge: 14
TimD befindet sich auf einem aufstrebenden Ast
Standard

Hey,

so sollte es gehen....
Code:
<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			#leiste{
			background-image:url("bild.png");
			background-position: center;
			background-repeat: no-repeat;
			height: 34px;
			}
		</style>
	</head>
	<body>
	<div id="leiste">
		<p align="center">Text </p>
	</div>
	</body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.10.2011, 16:48
Benutzerbild von zonkifail
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2011
Beiträge: 4
zonkifail befindet sich auf einem aufstrebenden Ast
Standard

Nene,

ich möchte, dass der Text dort anfängt, wo auch die Grafik anfängt, so wie hier in der Beispielgrafik
__________________
Eine Zahl zwischen 1 und 3: Antwort
Mit Zitat antworten
  #4 (permalink)  
Alt 26.10.2011, 16:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Dieses eine Element steht doch bestimmt nicht im luftleeren Raum, oder? Da gibt's doch mehr in deinem Code.
Man kann schlecht völlig losgelöst von allem über ein Darstellungsproblem reden. Bitte poste einen Link zu deiner Seite, die du bearbeiten willst.
Und informier dich über die Bedeutung der Doctype-Angabe (Google: "Doctype Switch"). Diese fehlt in deinem Beispiel.


@TimD: Das align-Attribut ist veraltet. Für Gestaltung nimmt man CSS. text-align heißt die Eigenschaft.
Mit Zitat antworten
  #5 (permalink)  
Alt 26.10.2011, 17:07
Benutzerbild von zonkifail
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2011
Beiträge: 4
zonkifail befindet sich auf einem aufstrebenden Ast
Standard

Da muss ich dich leider enttäuschen:

Mehr Code kann ich dir zur Zeit nicht geben, da ich sozusagen zuerst etwas rumexperimentieren will, bevor ich richtig anfange, meine Website zu programmieren. Deswegen halt dieser kleiner Codeschnippsel

Ich glaube auch nicht, dass es später im Code irgendwelche Zeilen gibt, die große Einflüsse auf die Leiste mit dem Text haben (ich weiß nicht, ob du letztendich darauf hinauswolltest).

Ach ja, mein Browser (Firefox 7.0) liefert den Wert "BackCompat", sobald ich den Modus mit
Code:
<script type="text/javascript">
alert(document.compatMode);
</script>
abfrage.
__________________
Eine Zahl zwischen 1 und 3: Antwort
Mit Zitat antworten
  #6 (permalink)  
Alt 26.10.2011, 17:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von zonkifail Beitrag anzeigen
Da muss ich dich leider enttäuschen:

Mehr Code kann ich dir zur Zeit nicht geben, da ich sozusagen zuerst etwas rumexperimentieren will, bevor ich richtig anfange, meine Website zu programmieren. Deswegen halt dieser kleiner Codeschnippsel
Dann muss ich dich auch enttäuschen, denn anhand dieses Schnipsels hat es keinen Sinn, über Gestaltung zu reden.
Man muss erst sinnvolles HTML haben ehe man über die Gestaltung mit CSS nachdenken kann.

Zitat:
Ich glaube auch nicht, dass es später im Code irgendwelche Zeilen gibt, die große Einflüsse auf die Leiste mit dem Text haben (ich weiß nicht, ob du letztendich darauf hinauswolltest).
Ich will darauf hinaus, dass es sehr wahrscheinlich ist, dass deine "Leiste" -- was auch immer das mal werden soll (eine Überschrift vielleicht?) -- später in einer Umgebung eingebunden ist, die nicht die volle Breite des Viewports einnimmt. Und schon löst sich dein Problem in Luft auf, denn dann kannst du mit Padding einrücken.

An Darstellungsproblemen herumzubasteln, ohne eine HTML-Grundlage zu haben, ist ein typischer Anfängerfehler. Ich empfehle dir Little Boxes für den Einstieg.

Zitat:
Ach ja, mein Browser (Firefox 7.0) liefert den Wert "BackCompat", sobald ich den Modus mit
Code:
<script type="text/javascript">
alert(document.compatMode);
</script>
abfrage.
Du hast dich ja jetzt sicher informiert und weißt, warum es absolut keine gute Idee ist, es dabei zu belassen.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.10.2011, 18:47
do{ atmen(); }while(!tot)
XHTMLforum-Mitglied
 
Registriert seit: 03.08.2011
Beiträge: 103
Sinokle befindet sich auf einem aufstrebenden Ast
Standard

Schrumpfe die Div auf die Größe der Hintergrundgrafik und zentriere dann die Div statt dem Hintergrund.

Code:
#leiste {
    width:800px;
    height:34px;
    margin:0 auto;
    background:url('bild.png') no-repeat;
}
Wenn es eine Überschrift werden sollte, gib dem verwendeten h-Tag (h1, h2, usw.) das Hintergrundbild.
Mit Zitat antworten
  #8 (permalink)  
Alt 26.10.2011, 18:55
Benutzerbild von zonkifail
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2011
Beiträge: 4
zonkifail befindet sich auf einem aufstrebenden Ast
Standard

Gut ich kann dir zumindest sagen, wie ich meine Homepage letztendlich aufbauen will (was ich auch vorhin hätte machen sollen, sorry).

HTML-Code:
<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			#leiste{
			background-image:url("bild.png");
			background-position: center;
			background-repeat: no-repeat;
			height: 34px;
			}
			/*weitere Anpassungen, für die anderen id's*/
		</style>
	</head>
	<body>
	<img src="logo.png"/>
	<div id="leiste"><!--Hier sollen künftig dann die Buttons (rechtsbündig) und der Willkommenstext (linksbündig) eingefügt werden--></div>
	<div id="hauptteil"><!--Hier wird dann der Inhalt angezeigt--></div>
	<div id="footer"><!--Hier werden Sachen, wie Partnerseiten, Impressum usw verlinkt--></div>
	</body>
</html>
Halt ein ziemlich simpler Seitenaufbau (oben das Logo, dann dadrunter die Buttonleiste, dann nochmal dadrunter der Hauptteil und dann ganz unten Footer)

Ich weiß nicht, ob es euch jetzt groß weiterhilft und ob ich jetzt wirklich alles Notwendige erläutert habe, damit ihr mir auch richtig Helfen könnt. Für große Umstände will ich hier ja auch nicht sorgen, versteht mich da bitte nicht falsch :S

Ich werde mir auch jedenfalls friccas Ratschlag zu Herzen nehmen und das LittlebOxes Online Buch lesen. Wenn ihr im diesen Fall dennoch die Lösung für mein Problem einfällt, würde ich mich auf eine Antwort freuen

Nachtrag:

@Sinokle

cool, dankeschön

Ich denke das dürfte mich einen großen Schritt weiter bringen.

Ich bedanke mich hiermit nochmals an alle User hier für ihre Ratschläge.

Gruß,

Zonki
__________________
Eine Zahl zwischen 1 und 3: Antwort

Geändert von zonkifail (26.10.2011 um 19:01 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 26.10.2011, 19:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Da liegen jetzt drei leere Divs rum. Das hat nichts mit sinnvollem HTML zu tun.
[Und der Doctype fehlt noch immer. Lernresistent?]

Nochmal: Sehr wahrscheinlich willst du die Breite deines Layouts insgesamt auf ein bestimmtes Maß beschränken -- und damit erledigt sich dein Problem! Jedes Element einzeln mit einer Breite zu versehen -- wie Sinokles Vorschlag glauben machen könnte -- wird nicht nötig sein. Das reicht sehr wahrscheinlich einmal für ein umgebendes Element.
Und auch nochmal:
1. Inhalt aufschreiben
2. Inhalt mit HTML sinnvoll auszeichnen.
3. Layout mit CSS.
Bei dir fehlen Schritt eins und zwei. Das hat keinen Sinn!

Zitat:
Wenn ihr im diesen Fall dennoch die Lösung für mein Problem einfällt, würde ich mich auf eine Antwort freuen
Die Lösung lautet: Arbeite in sinnvollen Schritten. Beginne am Anfang -- nicht am Ende.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, hintergrundbild, positionierung text

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:11 Uhr.