✔ Layoutproblem bei flexibler Breite

J

jdgf

Mitglied
Hallo,

bei meinem flexiblen Seiten-Layout wird der div-Bereich "Banner" breiter dargestellt als alle anderen seitenbreiten Divs, obwohl ich sogar bei "Banner" nur eine Breite von 98% statt 100% wie bei den anderen eingegeben habe. Dies fällt besonders auf, sobald ich auf die Fenstergröße 800 x 600 px verkleinere. Hier ragt der Banner-Div in seiner Breite über die Navigationsbreite hinaus und verursacht einen Scrollbalken. Es kann auch nicht mit den von ihm eingeschlossenen Suche-Div und usermenue-Div handeln, da ich die schon zum Testen mit einer width=30% bzw. width=60% definiert hatte.

Zur Struktur
body
div container (anfang)
div banner (anfang)
div suche div usermenue
div banner (ende)
div navigation ...
....
div container (ende)
....

Hier meine css-Angaben:
body {width:100%}
#container {width:100%;}
#banner {width:98%}
#suche {float:left; padding-top:5px;}
#usermenue {float:right;}
#navigation, #footer {width:100%;}

Link zur Seite: http://www.kolping-hohenfels.de/

Kann mir bitte jemand helfen. Vielen Dank!
Schöne Grüße aus der Oberpfalz
Dietmar
 
Hi,

der Banner-Bereich wird bei mir keineswegs breiter wie die übrigen Seitenbereiche angezeigt, auch nicht mit der genannten kleineren Viewport-Breite (siehe Anhang, Firebug hebt das im HTML-Code ausgewählte Element in der Seitenansicht mit der blauen Fläche hervor), womit die Ursache für die "Überbreite" (Seitenhintergrundbild am oberen Fensterrand) und den horizontalen Scrollbalken an anderer Stelle zu suchen ist.

Beim Durchwandern der übrigen DIV-Hauptblöcke in Firebug, konnte ich zumindest keines lokalisieren, dessen Anzeigebereich über den rechten Fensterrand hinausragt, und für die Verbreiterung sorgt.

banner.jpg

mfg Maik
 
Hallo,
ich habe wieder die body-Breite auf 98% eingestellt und damit ist bei mir der Scrollbalken unten wieder weg. Hatte es leider beim Testen nicht rückgägnig gemacht.

Ich meine den Fehler hier, den ich in der Grafik rot markiert habe. Wo die rote Markierung links beginnt, müsste nach meiner Logik das rechte Ende von dem DivBanner-Bereich sein.

Gruß Dietmar
 

Anhänge

  • breite.jpg
    breite.jpg
    3,1 KB · Aufrufe: 33
jdgf hat gesagt.:
ich habe wieder die body-Breite auf 98% eingestellt und damit ist bei mir der Scrollbalken unten wieder weg. Hatte es leider beim Testen nicht rückgägnig gemacht.

Ich meine den Fehler hier, den ich in der Grafik rot markiert habe. Wo die rote Markierung links beginnt, müsste nach meiner Logik das rechte Ende von dem DivBanner-Bereich sein.
Zum Vergrößern anklicken....
Dort ist der Banner auch zu Ende, wenn du dir meinen Schnappschuß nochmal genauer anschaust. Die blaue Container-Fläche von #banner hab nicht ich (manuell im Grafikprogramm) erzeugt, sondern stammt von Firebug (http://getfirebug.com) selbst.

Das Seitenhintergrundbild bg_top.gif, das dort oben neben dem rechten Boxenrand von #banner verlängert wird, überragt selbst die Breite von #container und <body>, die Firebug in der Seitenansicht in ihrer korrekten Dimension hervorhebt, wenn ich sie im HTML-Code markiere.

Mit anderen Worten ausgedrückt: #banner überschreitet hier nicht die Breite von #container und <body>.

Was jetzt letztlich die Überbreite des Seitenhintergrunds verursacht, die deutlich an dem horizontalen Scrollbalken zu erkennen ist, wenn die Breite für <body> eben nicht auf 98% herabgesetzt wird, kann ich dir zu diesem Zeitpunkt leider nicht sagen.

mfg Maik
 
Hallo,

vielen Dank für die Hilfe. Ich habe zwar im Firebug die blaue Fläche gesehen, aber nicht die Verursachung durch die gif-Datei erkannt. Da der css-Code für den divBanner richtig war, hätte ich den Schluss nie gezogen. Ich habe jetzt zum Test noch html auf 98% Breite gesetzt. Selbst da überragt die nur 1px-breite gif-Datei den html-Bereich.

Ich habe den Hintergrund entfernt und jetzt passt es. Danke

Viele Grüße Dietmar
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück