|
||||
Endless width für Header und Footer
Hallo.
Ich versuche im Moment den Header in meinem Blog zu ersetzen. Momenten ist der Header einfach ein komplettes Hintergrundbild, das ich über den "background"-Befehl eingesetzt habe. Der neue Header soll aber aus einem Hintergrundbild bestehen, dass ich mit repeat-x endlos in die Weite ziehen will und noch einem Logobild, das später dann dazukommt. Ich dachte, dass man mit min-width:100% oder width:100% diese Endlosigkeit erstellen könnte, aber es funktioniert einfach nicht. Ich habe einen #wrapper um mein gesamtes Layout, aber selbst, wenn ich den herausnehmen, funktioniert es nicht. Es wird nicht endlos in die Länge gezogen! Das gleiche Problem dürfte ich auch beim Footer haben. Ich komme einfach nicht darauf, warum es nicht klappt. Hier ist mein Blog, damit ihr euch das CSS mal ansehen könnt. Wäre wirklich für Hilfe dankbar! |
Sponsored Links |
|
|||
Wie hast du den CSS-Code geschrieben, dass es nicht funktioniert?
Anleitung für CSS Backgrounds findet du zuhauf im Netz zum Beispiel hier: https://developer.mozilla.org/de/docs/CSS/background oder hier SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder |
Sponsored Links |
|
|||
Dein Header hat im Moment 1113px Breite. Versuch mal diesen Wert bei width.
Im übrigen wird dein Header etwas in den Body hineinragen, da das jetzige Layout dies so vorsieht, daher ist es mit z-index:-1 in den Hintergrund gestellt worden. Evtl. musst du also die Höhe vom Header anpassen. Beim Footer muss du den Hintergrund bei #footerInner ändern. Dort gibt es eine feste Breite von 1110px und auch ein Padding(Innenabstand) von 10px zum unteren Rand. Padding-bottom evtl auf 0 und mit der Breite ein wenig rumspielen, dann passt das schon. Beim Browser Firefox ab Version 17 oder so kannst du mit der rechten Maustaste in einen Bereich reinklicken und dann mit inspect dir die CSS Angaben anzeigen lassen, die für das Element im CSS stehen. |
|
||||
Ich bin ja noch nicht fertig. Das Endprodukt soll anders aussehen, aber solange ich den Hintergrund nicht auf unendliche Breite schalten kann, brauche ich gar nicht weiter rumbasteln.
Ich werde den Rest des Layouts (z.B. die Navigation) dann schon entsprechend verschieben, dass das wieder passt! Wenn ich die Breite beim Pixelwert erhöhe, dann wird das natürlich breiter, aber dann habe ich auch einen Scrollbalken dort. Ich möchte eine Lösung, wo sich der Hintergrund an die Breite des jeweiligen Browserfensters anpasst. Ich dachte, das kann man mit width:100% lösen, aber scheinbar klappt das ja nicht. |
|
|||
Das klappt schon nur muss du auch dazu wissen wie sich Attribute auf Elemente auswirken. Genau erklärt wird das auf den Seiten beim w3c.org, was jedoch nicht einfach zu verstehen und zudem auf englisch ist.
Wenn du dein ganzes Layout ändern willst, wirst du mit Versuchen nicht weit kommen, dafür ist es zu komplex und evtl. gibt es noch mehr Templates die du ändern müsstest. Wenn du einem Blockelement eine Breite von 100% gibst, orientiert sich bei Prozentwerten diese Breite an der Breite des Elternelements, hier also Wrapper. Ist dort kein Wert angeben, bleibt es undefiniert. Du musst also body und wrapper die Breite 100% geben damit auch header 100% sein kann. siehe Visual formatting model details |
|
||||
Danke, aber das weiß ich doch alles.
Ich habe ja bereits gesagt, dass selbst wenn ich das "Elternelement entferne" und der Header über gar nichts mehr definitiert wird außer seinem eigenen CSS das Problem TROTZDEM auftritt, ich haber nicht verstehe, warum. Und ich möchte nicht mein ganzes Layout ändern, sondern nur den Header .. und bei dieser Gelegenheit auch die Breite des Footers anpassen, wobei letzteres keine Priorität hat. |
|
|||
Also wenn ich den div Wrapper und Header mit width:100% versehe zieht er den Header auf 100% Breite auf, was bei einem Hintergund dann auch volle Breite ergeben sollte.
Mehr kann ich leider im Moment dazu nicht sagen. |
|
||||
Ok, vielen Dank!
Ich habe jetzt ein wenig rumexperimentiert. Was du sagst, stimmt zwar, ich kann den unendlichen Hintergrund erreichen, wenn ich sowohl den Header als auch #wrap auf width:100% setze, aber wenn ich das mache, verschieben sich ALLE Elemente im Header, wenn jemand z.B. den Browser kleiner macht. Wie kann ich das abstellen? |
Sponsored Links |
|
||||
Ok, was ich jetzt gemacht habe, ist auch nicht die perfekte Lösung, aber besser kriege ich es einfach nicht hin.
Den #wrap taste ich nicht an, das zerhaut mir zu viel von meinem Layout, wenn ich daran rumspiele. Das ist auch nicht nötig. Ich habe den #header im #wrap gelassen aber ein neues div erstellt, das ich #header_bk (für background) genannt habe. Dieses Div liegt außerhalb des #wrap (darüber). #header_bk erhält nun das Hintergrundbild, dass ich unendlich in die Breite ziehen will. Der eigentliche #header ist im #wrap und daher verschieben sich die Header-Elemente jetzt auch nicht mehr, wenn ich das Browserfenster verkleinere. ABER: was jetzt passiert ist, dass das "endlose" Hintergrundbild nicht endlos ist, wenn ich das Browserfenster verkleinere. Sprich: wenn das Browserfesnter klein ist, sehe ich den Hintergrund auf voller Breite, aber scrolle ich dann nach rechts, gibt es kein Hintergrundbild mehr. Kann ich das irgendwie fixen? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße | Spencer | Javascript & Ajax | 3 | 19.09.2012 00:16 |
joomla template | wrock | CSS | 2 | 06.04.2012 20:24 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |