div container feste höhe

  • Hallo


    Ich baue gerade eine Homepage für ein Familienmitglied. (LINK)
    Dabei habe ich ein (eher kosmetisches) Problem.


    Ich verwende einen div Tag im body als Container um dessen Inhalt
    gut zu zentrieren.


    Das Problem ist jeh mehr Inhalt ich dem div container hinzufüge desto höher
    wird er, obwohl alle Elemente darin mit position:relative angeordnet garnicht so weit nach unten
    reichen. Das ist zwar nicht wirklich störend aber die Browser zeigen nun einen langen Scrollbalken
    nach unten an obwohl dort gar kein Content mehr vorhanden ist.



    Hat jemand eine Idee wie ich trotzdem den Container in der Höhe beschränken oder gar auf den Content schrumpfen lassen kann?


    Der style des Containers ist:

    HTML
    1. #container {
    2. border: solid #ff0000;
    3. display: table;
    4. margin: 0 auto;
    5. overflow: hidden;
    6. max-width: 60em;
    7. }


    Der Container kommt als erstes im body und dann folgen weiter div tags der inhaltlichen Elemente wie Menü
    und Text und Bilder:



    wobei ich dann die anderen div tags so formatiere und positioniere:


    Hat jemand eine Idee?

  • Hallo


    Abreißen und mit korrektem HTML und CSS neu erstellen.


    Verwende HTML-Elemente nur so, wie die HTML-Regeln es vorsehen. Wenn der HTML-Quelltext unsinnig oder gar falsch erstellt wurde sind CSS-Angaben nur schwer oder gar nicht umzusetzen.


    Vermeide unnötige HTML-Elemente.


    Füge Hintergrundbilder als Hintergrundbild ein.


    Verzichte auf position-Angaben. (Außer eventuell ganz zum Schluß für die schräggestellte Grafik.)


    Verzichte auf top-Angaben.


    Verzichte auf display: table.


    Verwende aktuelles HTML5 und CSS3.


    Gruss


    MrMurphy

  • Ja danke für den Hinweis. Ich glaube das wird zu umfangreich. Ich hab fast 2 Wochen gebraucht um diesen Müll zu erstellen. Meine HTML Kenntnisse stammen von 2003 und jetzt nochmal komplett die Seite umzugestalten, die ja an sich äusserlich funktioniert ... nee ich glaube da soll sich mein Bruder an jemand wenden der seine Brötchen damit verdient und das ganze aus dem ff. macht.

  • Aber eine Frage hätte ich dann doch noch... Angenommen ich würde das Hintergrundbild als body background-image einbinden, wie
    söllte ich dann zum Bsp. die Navigationsleite auf die stelle im Hintergrundbild festnageln ohne irgendwelche "position" angaben?

  • Hallo


    Am sinnvollsten erstellst du einen Container, zum Beispiel mit dem main-Element, in den der ganze Inhalt kommt.


    Dem gibst du dann das Hintergrundbild und eine feste Größe.


    Die Abstände werden dann hauptsächlich mit margin, aber auch mit padding, erstellt.


    Wobei die Navigation aktuell kaum sichtbar ist. Die würde ich über das main-Element stellen.


    Gruss


    MrMurphy

  • Okay, also ich habe jetzt ein main mit background image und der Höhe des Hintergrundbildes.



    Und naja, die Navigation sollte schon in den Holzrahmen. Kann ich ein nav-Element über das main Element positionieren? Ich habe es jetzt
    vor das main-Element geschrieben und es drückt jetzt natürlich das main-Element nach unten.



    - - - Aktualisiert - - -


    Ich habe jetzt einfach mal das nav-Element nach dem main geschrieben und dann mit "margin-top: -73em"
    nach oben verschoben. Das scheint zu funktionieren.

  • okay, ich glaube ich habe jetzt das Grundlayout hinbekommen, zentriert, mit background-image,ohne position, top, display:table und lässt sich zoomen ohne aus dem Rahmen zu platzen, ohne div tags und alle Abstände über padding und margin. Der Validator zeigt auch keine Fehler mehr an.


    Wenn niemand weiter etwas auszusetzten hat (außer über schreckliche Navigation,Farben oder Bilder) würde ich evtl. auf der Seite aufbauen.