tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
501
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Goshy Goshy ist offline Grünschnabel
    Registriert seit
    Jul 2011
    Ort
    Berlin
    Beiträge
    4
    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
     

  2. #2
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    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?
     

  3. #3
    Goshy Goshy ist offline Grünschnabel
    Registriert seit
    Jul 2011
    Ort
    Berlin
    Beiträge
    4
    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):
    http://www.gelborangerot.de/Horizontal/Layout.jpg
     

  4. #4
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Ergänze folgende Eigenschaften:

    Code :
    1
    2
    
    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.
     

  5. #5
    Goshy Goshy ist offline Grünschnabel
    Registriert seit
    Jul 2011
    Ort
    Berlin
    Beiträge
    4
    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
     

  6. #6
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    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.
     

  7. #7
    Goshy Goshy ist offline Grünschnabel
    Registriert seit
    Jul 2011
    Ort
    Berlin
    Beiträge
    4
    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
     

Ähnliche Themen

  1. Antworten: 5
    Letzter Beitrag: 19.05.11, 17:07
  2. Header und Footer über die ganze Seite.
    Von Strafi im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 10.03.11, 09:40
  3. Antworten: 20
    Letzter Beitrag: 13.03.10, 22:41
  4. Links über ganze Breite verteilen?
    Von Layna im Forum CSS
    Antworten: 6
    Letzter Beitrag: 22.01.08, 13:19
  5. <div> über gesammte Seitenbreite ziehen
    Von Jukkales im Forum CSS
    Antworten: 13
    Letzter Beitrag: 29.09.07, 21:39

Stichworte