|
|||
Hintergrundbild in zentriertem div positionieren und fixieren
Hallo
Das Positionieren und Fixieren eines Hintergrundbilds in einem zentrierten div schien mir kein besonderes Problem zu sein. html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css" media="screen, projection"> @import url(beispiel.css); </style> </head> <body> <div class="all"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </body> </html> Code:
body, div { margin: 0; padding: 0; } body { background-color: black; font-family: verdana, arial,helvetica,sans-serif; } .all { margin-left: auto; margin-right: auto; width: 1000px; background-color: yellow; background-image: url(test.jpg); background-repeat: no-repeat; background-position: top right; } Woher kommt der obere Abstand des div? Wieso orientiert sich die Position des Hintergrundbilds am body und nicht am div? Ich bin für jeden Hinweis dankbar. |
Sponsored Links |
|
|||
Zitat:
Wieso? Weil es so festgelegt ist. Colors and backgrounds ff. Was würdest du dir denn vorstellen unter "fixiert in einem zentrierten div"? BTW: Du hast den Link zu deinem Beispiel vergessen. edit: Der obere Abstand kommt von "Collapsing Margins" (<- Suchbegriff).
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (22.04.2010 um 13:52 Uhr) |
Sponsored Links |
|
|||
Ausserdem würde ich zu allererst im CSS:
Code:
* { margin:0; padding:0; } Und warum verwendest du Anstatt den vielen Absätzen nicht einfach eine height-Angabe, um deinem Div eine Höhe zu erwzingen? |
|
|||
Vielen Dank für die hilfreichen Angaben. So war mir weder die Orientierung von fixed am Viewport, noch die Auswirkung des p geläufig.
Die verwendeten Absätze gehen auf ursprünglich dort enthaltenen Text zurück, den ich entfernt hatte. Gibt es denn vielleicht eine alternative Möglichkeit, das von mir Beabsichtigte zu erreichen? Nämlich ein Bild in einem zentrierten div zu positionieren und zu fixieren. Bislang war ich der - möglicherweise irrigen - Annahme, dass es sich dabei um eine eher häufige Art der grafischen Gestaltung handelt. |
|
|||
Ich wiederhole meine Frage:
Was würdest du dir denn vorstellen unter "fixiert in einem zentrierten div"? Ich habe keine Ahnung, was du erreichen willst. Was entspricht an der Darstellung eines Hintergrundbildes ohne background-attachment:fixed nicht deiner Vorstellung?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hallo Fricca
Dass das Bild an Ort und Stelle bleibt, auch wenn der andere Inhalt des div gescrollt werden sollte. So habe ich das mit dem fixed jedenfalls immer verstanden. Wie gesagt hatte ich die Texte aus dem Beispiel entfernt, mit Texten kann der Inhalt des div durchaus recht lang werden, so dass man vertikal scrollen muss. |
|
|||
Zitat:
Zitat:
Wenn man dich verstehen soll, musst du schon das vorstellen, worum es dir geht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hallo Joe
Das verstehe ich nicht. Ich hab mal zwei Screenshots gemacht. So in etwa sollte es aussehen - für alle Monitorgrössen: http://www.lafourmi.ch/test/test2.jpg. Das Bild hätte ich gern rechts oben im div und die Schrift sollte es teilweise überlappen. und so sieht es auf meinem Monitor aus: http://www.lafourmi.ch/test/test3.jpg. Geändert von anutoshen (24.04.2010 um 14:42 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |