100% width auch bei scrollbar

[raybrackho]

Hallo,

ich habe ein Problem bei meiner Seite. Ich habe einen header mit width:100%, wenn man nun das Browserfenster kleiner macht in der Breite und irgendwann den Content abschneidet, kommt eine horizontale Scrollbar. Das ist ja auch in Ordnung, wenn ich nun allerdings nach rechts scrolle, ist neben meinem Header nur noch der weisse Hintergrund zu sehen. Der Header nimmt also das kleinere Browserfenster und interpretiert es als 100%, was dann problematisch wird wenn man nach rechts scrollt um den Content ganz zu sehen.

Hier der CSS Code für den Header:

#header {
width:100%;
height: 20px;
padding-top:20px;
background-color:#62a5bf;
color:#FFFFFF;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(../images/menu.jpg);
font-weight: bold;
padding-bottom: 20px;
margin-bottom: 0px;
min-width: 450px;

}

HTML ist ganz einfach.

<div id="header">
Menupunkt etc...
</div>

Wer kann mir helfen?

 

[Maik]

Hi,

dafür wirst du uns schon ein wenig mehr vom HTML- und CSS-Code zeigen, oder noch besser gleich den Link zur Seite nennen müssen, denn mit den beiden Code-Snippets kann ich dieses Verhalten in keinem der gängigen Browser reproduzieren, die mir hier zur Verfügung stehen (FF 2 + 3, IE7, Mozilla 1.8, NN 9.x, Opera 9.5, Safari 3.1.2).

mfg Maik

 

[Napofis]

wo befindet sich die Div?

der body kann auch ner platzhalter haben

also
body {
margin: 0;
padding: 0;
}


und PS: min-height / min-width wird nicht vom ie 6 unterstützt

 

[Maik]

wo befindet sich die Div?

der body kann auch ner platzhalter haben

also
body {
margin: 0;
padding: 0;
}


und PS: min-height / min-width wird nicht vom ie 6 unterstützt

Ich hab gerade eben in meinem Testdokument die Polsterungseigenschaften auch nicht zurückgesetzt, also an denen dürfte es somit schon mal nicht liegen.

Was den leicht betagten IE6 und seine mangelnde Unterstüzung der min-width-Eigenschaft betrifft, sind dafür schon seit Jahren entsprechende Workarounds im Netz frei zugänglich, wie z.B. Min-Width for Internet Explorer, und die fehlende min-height-Interpretation gleicht er doch ganz souverän mit seiner Sicht der height-Eigenschaft aus, die er selbst bei einer fixen Höhenangabe als "Mindesthöhe" betrachtet, und die Box bei zunehmenden Inhalt in der Vertikalen ausdehnt

mfg Maik

 

[raybrackho]

also die Domain lautet: http://www.bildungsengel.com/index.php

das ganze ist ein angepasstes Joomla Template. Das Menu hab ich aus einer Vorgängerseite (Vorlage) übernommen.

 

[Maik]

Dir kommt beim Verkleinern der Fensterbreite in dem ansonsten liquiden Layout schlichtweg die Tabelle innerhalb vom DIV .article-content mit ihrer fixen Breitenangabe im wahrsten Sinne des Wortes in die Quere.

Nachfolgend zwei aufschlußreiche Screenshots aus Firebug, der beim Lokalisieren und Vergleichen der vorherrschenden Boxenverhältnisse in einem noch so komplexen Seitenlayout einfach unschlagbar ist



(links die Box article-content, rechts die Tabelle)

mfg Maik

 

[raybrackho]

Okay, ich verstehe. VIelen Dank schon mal dafür. Die Breite vom Content ist nun auch liquide. Allerdings bleibt ja die Grafik in der Mitte und die hat ja nunmal eine feste Breite an der sich auch nicht rütteln lässt. Wie schaffe ich es denn dort dass der Header durchgängig bleibt.

Das Problem ist also leider nach wie vor vorhanden.

 

[Napofis]

also ich wüsste ne Notlösung ^ ^

Da das Menu ja direkt oben angrenzt kannst du die Hintergrundgrafik in den body einbinden und mit repeat-x über die Seitenbreite verteilen.

Du musst dann aber auch die Hintergrundfarben der drei header-divs raus nehmen.
Habs auch mal ausprobiert.

Ist aber wie gesagt nur mehr ne Notlösung, es gibt bestimmt ne bessere Methode.

 

[Maik]

Dann richte für das Gesamtlayout eine höhere Mindestbreite ein, damit beim horizontalen Verkleinern des Fensters sein rechter Rand die Grafik erst garnicht erreichen kann, sondern schon vorher der horizontale Scrollbalken im Fenster erscheint.

mfg Maik

 

[Napofis]

Dann richte für das Gesamtlayout eine höhere Mindestbreite ein, damit beim horizontalen Verkleinern des Fensters sein rechter Rand die Grafik erst garnicht erreichen kann, sondern schon vorher der horizontale Scrollbalken im Fenster erscheint.

mfg Maik

Ich hab die Seite mal gespeichert und dasganze ausprobiert so wirklich Funktionien tut das nicht.