Footer über ganze Seitenbreite - Content zentriert mit fixer Breite

G

Goshy

Grünschnabel
Hi zusammen,

ich kämpfe seit ...
Problem:
Das Seiten-Layout besteht aus einem zentrierten Bereich (div) mit fixer Breite, darin Header, Navigation und Content. Daneben noch ein Bereich für Banner.
Soweit kein Problem.
Der Footer soll aber die ganze Seitenbreite einnehmen, wobei der eigentliche Inhalt des Footers (ein Haufen Links, Logos, Sponsoren...) ebenso zentriert sein soll wie der Bereich (div) darüber. Eigentlich auch kein Problem.
Wenn die (relativ breit angelegte) Seite aber auf einem kleinen Screen (oder in einem klein gezogenen Browser) geöffnet wird, muss horizontal gescrollt werden. Und hier liegt das Problem: der Footer behält die Breite des Screens und rechts bildet sich beim Scrollen eine häßliche Lücke...
Etwas schwer zu erklären, daher schematisch hier zu sehen:

http://www.gelborangerot.de/Horizontal/Horizontal.html

Ich wäre echt extrem dankbar für hilfreiche Tips. Auch wenn der Samstag jetzt eh schon im Eimer ist.

Gespannt,
Goshy
 
Das Problem wird nicht durch den Footer sondern durch das Element mit der ID "rechts" verursacht. Ich nehme an, Du willst dort eine Box anzeigen lassen die nur für Besucher sichtbar sein soll deren Viewport groß genug ist?
 
Vorgabe ist der zentrierte Contentbereich, der Footer, der optisch die gesamte Seitenbreite füllt und eben eine Box für Werbung, die aus der Zentrierung herausragt. Über Sinn oder Unsinn dieses Layouts machen sich andere Gedanken...
Falls es eine andere Möglichkeit gibt, diese Box #rechts wie gewünscht zu positionieren ohne damit das Problem mit dem Footer zu provozieren, bin ich für Tips natürlich auch sehr sehr dankbar!
Insgesamt sieht das Layout so aus wie auf der Grafik im Link (die mit Inhalt gefüllten Bereiche habe ich nur zur Verdeutlichung hervorgehoben):
Layout.jpg
 
Ergänze folgende Eigenschaften:

Code: 
html, body { width: 100%;min-width: 650px; }
body { overflow-x: hidden; }

Habe ich gerade selbst an deiner Seite erfolgreich getestet. Sollte in jedem Browser nach dem IE6 funktionieren.
 
Hallo threadi,
danke für die bemühung - war grad mal was essen, weil sonst durchdrehen...
Deine Idee bringt aber leider auch nichts, denn durch das
body { overflow-x: hidden; }
wird das horizontale scrollen komplett verhindert.
Und das darf natürlich nicht sein.
User mit kleinerem Viewport kommen ja so an nichts mehr ran :(
 
Wenn Du eine andere Lösung suchst, schau dich mal nach "html css element rechts von content" um. Darüber habe ich diesen Tipp gefunden, den ich auch schon mal selbst ohne große Probleme verwendet habe.
 
Hab ich schon ausführlich getan. Und tue es auch parallel noch die gabze Zeit...
Bin nicht von der Sorte "Oh, kleines Problem, na denn mal gleich nen Thread aufmachen"...

Im Prinzip ist die Lösung mit der absoluten Positionierung ja auch okay, wenn nur das Problem mit dem Footer über die ganze Breite nicht wäre. Und ich verstehe auch nicht warum der body trotz gerenderter 100% Viewportbreite trotzdem alles brav mit der Hintergrundgrafik zunagelt. Das würde ja bei dem div unten schon völlig reichen. Aber ich MUSS nun mal dieses verdammte Layout umsetzen :(
Aber mich würde interessieren, wie du es mit deinem letzten Vorschlag hinbekommen hast, dass ein horizontales Scrollen doch noch möglich ist
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück