# 100% width auch bei scrollbar



## raybrackho (2. Oktober 2008)

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 (2. Oktober 2008)

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 (2. Oktober 2008)

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 (2. Oktober 2008)

Napofis hat gesagt.:


> wo befindet sich die Div?
> 
> der body kann auch ner platzhalter haben
> 
> ...


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 (2. Oktober 2008)

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 (2. Oktober 2008)

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 (2. Oktober 2008)

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 (2. Oktober 2008)

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 (2. Oktober 2008)

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 (2. Oktober 2008)

Maik hat gesagt.:


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


----------



## Maik (2. Oktober 2008)

Napofis hat gesagt.:


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


Achja? Was hast du denn wo konkret an welchem Element ausprobiert?

Ich hab einfach nur im zentralen Stylesheet des Dokumentheaders den bestehenden relativen 100%-Wert für die  Mindestbreite des DIVs *#ja-wrapper* in einen entsprechenden fixen Wert umgewandelt, und damit genau das erreicht, was ich zuvor umschrieben hatte, und nach deiner Aussage angeblich nicht so recht funktioniert:


```
<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: 97%;margin: 0 auto;}
#ja-wrapper {min-width: 1050px;}
</style>
</head>
<body id="bd" class="fs3 FF" >
```
Ist zwar ein relativ hoher Wert für eine Mindestbreite, aber das liegt halt an der involvierten Grafik, die mit ihren 780*324px auch nicht gerade zierlich daherkommt 

mfg Maik


----------



## Napofis (2. Oktober 2008)

Wenn man das zusammen schiebt wird der ganz text nach  links gequetscht.
Und im ie besteht das Problem nach wie vor aber nur noch bei kleineren Auflösungen. 

Sry wenn ich etwas bohre aber das Interressiert mich garde sehr, weil ich ein ähnlich Problem auch schon mal hatte.


----------



## Maik (2. Oktober 2008)

Das haben liquide Layouts nunmal so an sich, dass ihr Inhalt beim Runterskalieren der Fenstergröße zusammengeschoben wird. 

mfg Maik


----------



## raybrackho (2. Oktober 2008)

Hmm, also Danke für die Versuche eines Lösungsansatzes, aber so richtig glücklich bin ich damit noch nicht. Es ist schon richtig, dass die Grafik nicht sehr zierlich ist, aber kleiner gehts wirklich nicht bei dem ganzen Inhalt der vermittelt werden muss. Eigentlich war die Grafik auch für ein 800px breites Layout gedacht. Durch die Übertragung in ein CMS System (Joomla) kommt jetzt natürlich blöderweise noch das LogIn Fenster dazu, was die ganze Seite deutlich breiter macht als 800px. Vielleicht muss ich einfach in den sauren Apfel beissen und muss die 800x600 Nutzer quasi aussperren indem ich die min-width auf 1050px setze. 
Ich finde die Idee von Napofis dann allerdings doch garnicht so schlecht mit der EInbindung in den Hintergrund, sofern das denn funktioniert.

Mich wundert halt, dass für sowas keine konkrete Lösung existiert. Kann man nicht irgendwie definieren dass der Header 100% width hat inkl eventueller Scrollbalken.


----------



## Napofis (2. Oktober 2008)

Ja das ist mir schon klar aber rechts ist da noch jede menge Platz dafür.

Und irgend wie werden die CSS Daten auf den Unterseiten nicht verarbeitet
bei mir erscheinen die Komplett weis und nur text keine Bilder.

Im IE und im SM vielleicht stimmt ja bei mir was nicht 
Trotzdem danke.

Gruß Napofis

PS: das geht über JavaScript


----------



## raybrackho (2. Oktober 2008)

Das mit den Unterseiten ist mir auch aufgefallen und ich arbeite fieberhaft daran. Das liegt an der internen Verlinkung von Joomla. Und irgendwas hat das wohl noch mit mod_rewrite zu tun. Joomla öffnet seine Links über "index.php/Projekt" und dabei geht dann irgendwie der Pfad zum Stylesheet flöten. Evtl hilft eine absolute Referenzierung. Mal sehen...


PS: Achja, ich hatte auch versucht das Menu über position:fixed zu fixieren, das war auch Klasse denn das Menu war immer mittig egal wo man hingescrollt hat. Probleme traten dann allerdings auf als der Content so lang wurde dass man scrollen musste und das Menu immer oben am Rand kleb´te und Content verdeckte.


----------



## Maik (2. Oktober 2008)

Napofis hat gesagt.:


> Und im ie besteht das Problem nach wie vor aber nur noch bei kleineren Auflösungen.
> .


So, für den antiquierten IE6 hab ich noch fix den min-width-Workaround in der Seite implementiert, und erfolgreich getestet, damit mir da von deiner Seite keine weiteren Klagen kommen. 


```
<body id="bd" class="fs3 FF" >
<a name="Top" id="Top"></a>
<div class="minwidth1"><div class="minwidthp"><div class="layout"><div class="minwidthm">

<!-- Hier folg der Bestand -->

<!-- END: FOOTER -->

</div>

</div></div></div>
</body>
```


```
<style type="text/css">
.minwidthm {
        margin-left: -1050px;
}
.minwidth1 {
        width: 100%;
        min-width: 1050px;
        margin-bottom: 1em;
}
.minwidthp {
        padding-left: 1050px;
}
</style>
<!--[if lt IE 7]>
<style>
.minwidthb, .minwidthm, .minwidthp, .layout {
        height: 0;
}
.minwidthm {
        margin-left: -1050px;
        position: relative;
}
.minwidthp {
        padding-left: 1050px;
}
</style>
<![endif]-->
```
Ich für meinen Teil kann hier nur deutlich zum Ausdruck bringen, dass meine Analyse mittels Firebug und die für mich daraus resultierenden Lösungsvorschläge das Problem mit dem Headerbereich definitiv behoben haben.

Und ich lasse mir nur ungerne nachsagen, dass mein Vorschlag nicht funktionieren würde, wenn diese Behauptung überhaupt nicht belegt werden kann, und somit nicht den Tatsachen entspricht, sondern auf irgendeiner Fehleinschätzung oder purer Unwissenheit beruht. 

Glaubst du wirklich, dass ich den Hilfesuchenden hier das Blaue vom Himmel erzähle, und nicht wüßte, wovon ich rede? Bist du der festen Überzeugung, dass so eine "Doppel-Null" für diesen Forenbereich zum Moderator befördert wird?

Die Antwort auf meine Frage, was du in dem Layout an welcher Stelle konkret ausprobiert hast, bist du mir auch schuldig geblieben, und begegnest mir stattdessen mit weiteren fadenscheinigen  Problemen, die bei diesem Seitenkonzept in der Natur der Sache liegen.

Wie gesagt, Fehleinschätzungen, Unwissenheit und wilde Vermutungen - nicht mehr, aber auch nicht weniger.

Naja, wie auch immer, mein Job ist hier erledigt, und ich wünsche Euch einen gediegenen Start ins XXL-Wochenende ;-)

mfg Maik


----------



## raybrackho (2. Oktober 2008)

Sorry, ich wollte hier auf garkeinen Fall mosern. Ich muss sagen dass ich es wirklich Klasse finde wie schnell ihr euch meines Problems angenommen habt. Ich habe es jetzt mit der min-width gelöst und, wie du schon richtig sagtest: Es funktioniert! Bis auf die paar 800x600 User ist die Seite nun auch schön anzuschauen. Danke dafür und ebenfalls ein schönes und vor allem arbeitsarmes Wochenende.

Jetzt werd ich mich mal weiter um die blöden Verlinkungen im Joomla kümmern...


----------



## Napofis (2. Oktober 2008)

raybrackho hat gesagt.:


> Das mit den Unterseiten ist mir auch aufgefallen und ich arbeite fieberhaft daran. Das liegt an der internen Verlinkung von Joomla. Und irgendwas hat das wohl noch mit mod_rewrite zu tun. Joomla öffnet seine Links über "index.php/Projekt" und dabei geht dann irgendwie der Pfad zum Stylesheet flöten. Evtl hilft eine absolute Referenzierung. Mal sehen...



Schalt die Funktion ab "Suchmaschinenfreundliche URLs verwenden".


Und Maik ich hatte die Werte für die Header Formatierungen geändertaber in der CSS.
Das mit dem min-width hat das ganze schon verbessert aber egal.
Das lässt sich jetzt auch schlecht erklären aber vielen dank für deine Bemühungen 
und dir auch nen schönes WE und Feiertag.


Gruß Napofis


----------



## Maik (2. Oktober 2008)

@raybrackho: Du warst doch garnicht gemeint 

mfg Maik


----------

