zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Endless width für Header und Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2013, 19:21
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.03.2013, 00:22
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.03.2013, 17:33
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

Wie gesagt habe ich versucht mit "min-width" und "width:100%" zu arbeiten und unter anderem sowas probiert:

Code:
}
#header {
height:234px;
width:100%;
background:url(http://www.zoomingjapan.com/wp-content/themes/alltuts-child/images/new_header_bk.png) repeat-x;
z-index:-1;
}
Nach rechts zieht es sich aber nicht unendlich hin.
Das ganze ist in #wrap eingebettet mit festgelegter Weite, aber selbst wenn ich den Header außerhalb des #wrap platziere habe ich das Problem!
Mit Zitat antworten
  #4 (permalink)  
Alt 24.03.2013, 18:10
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.03.2013, 18:16
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.03.2013, 18:33
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.03.2013, 18:38
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.03.2013, 19:25
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 25.03.2013, 10:16
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.03.2013, 10:58
Benutzerbild von japanworm
Confuser
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.07.2011
Ort: Japan
Beiträge: 143
japanworm befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

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
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


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