Übergroßer Inhalt und Header mit witdth: 100%

D

darton

Grünschnabel
Hallo!
Folgendes Problem: Ich habe einen Monitor mit FullHD Auflösung, die Internetseite, die ich gemacht habe, passt perfekt drauf. Hab mir jetzt mal angeguckt, wie die Seite mit einer kleineren Auflösung aussieht, musste aber feststellen, dass der Header mit width: 100% nicht in die Breite verlängert wird, wenn man scrollen muss. Im Inhaltsteil ist nämlich eine sehr große Tabelle, die anscheinend auf kleinere Auflösungen nicht mehr drauf passt. Das bedeutet, man muss nach rechts scrollen und der Header wird abgeschnitten. Wie kann ich das umgehen?
Hier mal ein Beispiel, wo das Problem auftritt:
HTML: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;	
}

body, html {
	width: 100%;
}

#header {
	width: 100%;
	height: 100px;
	background-color: #000;
}

#content {
	padding: 2000px;
}
</style>
</head>
 
<body>    
<div id="header">

</div>
<div id="content">

</div>
</body>
 
</html>
 
Lass das unsägliche padding von 2000px weg. Eine Webseite wird übrigens nicht an Auflösungen sondern an Viewports angepasst. Hast Du bei dieser gigantischen Auflösung dein Browserfenster etwas im Vollbild? Mach es mal kleiner, man muss dafür auch nicht die Auflösung umstellen ;)
 
Oh ja, da hast du Recht. Browserfenster verkleinern ist ne gute Idee anstatt immer die Auflösung zu verändern.
Ja das padding: 2000px hab ich natürlich nur drinne, damit ich die Tabelle simulieren kann, die in der wirklichen Webseite drinne ist. Ich habe ja jetzt keine Lust erstmal 10 Spalten Tabellen-HTML-Code in das Beispiel einzutragen.
Nur jetzt möchte ich gerne, dass der Header mitwächst, wenn man scrollt. Das ist ja im obigen Fall nicht so.
 
Was genau verstehst Du unter "mitwachsen wenn man scrollt"? Das eine hat für mich gerade nichts mit dem anderen zu tun.

Hinweis: wenn Du ein Tabellenlayout hast (danach klingt es fast) dann solltest Du dieses durch ein modernes Layout ersetzen. Das macht das Ganze auch etwas übersichtlicher.
 
Du siehst doch, wenn du den HTML-Code oben benutzt, dass die Hintergrundfarbe des Headers irgendwann aufhört, wenn man nach rechts scrollt. Genau das soll nicht geschehen. Sie soll immer vollständig angezeigt werden.
Ich benutze Tabellen nur da, wo sie auch semantisch hinpassen und nicht zu Designzwecken. Es handelt sich um eine Tabelle, die eine Adressenliste aus einer Datenbank repräsentiert und da es in der Datenbank eben so viele Felder gibt, wird die Tabelle ziemlich breit, was dazu führt, dass man bei unzureichend großem Fenster nach rechts scrollen muss.
 
Ich sehe hier aktuell nur folgende Möglichkeiten:

a) header fixiert positionieren
Nachteil: geht in älteren Browsern nur mit Mühe.
b) header eine feste Breite geben
Nachteil: passt sich nicht flexibel an.
c) body zu einem Tabellen-Element machen, also:
Code: 
body { display: table; }
Nachteil: geht nicht im IE7 und älter.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück