|
||||
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> 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 |
Sponsored Links |
|
|||
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> |
Sponsored Links |
|
||||
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 |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
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>
__________________
Eine Zahl zwischen 1 und 3: Antwort |
|
|||
Zitat:
Man muss erst sinnvolles HTML haben ehe man über die Gestaltung mit CSS nachdenken kann. Zitat:
An Darstellungsproblemen herumzubasteln, ohne eine HTML-Grundlage zu haben, ist ein typischer Anfängerfehler. Ich empfehle dir Little Boxes für den Einstieg. Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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; } |
|
||||
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> 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) |
|
|||
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:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Stichwörter |
css, hintergrundbild, positionierung text |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |