Probleme mit einem Div-Tag, height = Seitenhöhe?!

  • Moin moin,


    ich bin dabei ne Website zu programmieren (mit Css)
    und stoße dabei immer wieder auf Probleme, die ich bisher immer
    (entweder durch zufall,recherche oder ausprobieren) lösen konnte.


    Nun weiß ich aber nicht weiter, auch nach den Lösungsansätzen (s.o. :wink: )
    nicht.


    [Blockierte Grafik: http://img5.imagebanana.com/img/f123bad8/site.png]



    So ist meine Website auf gebaut, funktioniert alles wunderbar.
    Mein Problem ist aber, dass ich einen Doppelstreifen haben möchte, von oben nach unten.
    Auf dem blau makierten Stückchen hab ich das mit meiner Hintergrundgrafik gelöst, wo auch andere Sachen drauf sind, z.B. die Buttons.


    Das Rotmakierte soll jetzt so lang sein, wie ich Inhalt auf meiner Seite habe (im Inhalt -div-tag).
    Wie krieg ich dass hin? :)
    Ich wollte das mit einem Bild machen, was diesen Doppelstreifen beinhaltet und dann in y-Richtung wiederholt wird, auch in einem Div-Tag.


    Leider funktioniert das ganze nur mit absoluten Werten, auch wenn ich % angebe ist der Balken nicht so lang, wie die Seite ist.


    So sieht meine Hintergrundgrafik aus:
    http://img5.imagebanana.com/img/x3224d4m/BG.png



    Hier sind Auszüge aus meiner css-Datei
    op soll mein Div-Tag sein, der den Doppelstreifen weiterführt.



    Den op-div-tag hab ich varschachtelt mit dem Navi-div-tag.
    Also das der Navi-div-tag übergeordnet ist.


    SOooo das wars.
    Ist verdammt schwierig gewesen, mein Anliegen rüberzubringen :lol:
    Ich hoffe ich habs einigermaßen geschafft.

  • Bei der Gesamthöhe musst du nach dem CSS-Boxmodell auch noch padding-, margin- und Borderwerte berücksichtigen.
    Es fehlen also zumindest noch die 3px padding-top vom #inhalt.


    Die 100% Höhenangabe sind eigentlich nicht notwendig. Entweder brauchen sie eine Basis, das wäre der body, dem dann ebenso 100% zuzuweisen wären, oder jeder Div richtet sich in der Höhe nach seinem Inhalt.


    Um von derartigen Prozent- und Pixelrechnereien unabhängig zu sein, würde ich dir folgendes empfehlen:


    Beschränke die bg-Grafik auf die beiden Vertikallinien und binde sie per
    Faux Columns ein.


    Die Horziontalstriche kannst du entweder über "border" bei der Navi einbinden oder über eine separate Hintergrundgrafik innerhalb der Navi.

  • Ein div-Tag ist normalerweise dafür vorgesehen, mehrere Elemente zu gruppieren. Nur im äußersten Notfall sollte man leere divs verwenden.


    Schau dir mal den "CSS-Trick" Faux Colums an. Sollte eigentlich genau das sein, was du suchst.


    Das Grndgerüst einer Seite macht man mit HTML, nicht durch ein Hintergrundbild. Alles was du dort hast, kannst du genauso gut durch eine korrekte HTML-Auszeichnung und die richtigen CSS-Attribute lösen.


    Bevor du ein Design für eine Homepage erstellst, solltest du außerdem Inhalt haben, sonst ist dein HTML-Code schnell nicht mehr korrekt, auch wenn er vom Validator als fehlerfrei angezeigt wird.


    Greetz
    Laura


    PS: HTML und CSS sind keine Programmiersprachen, demnach spricht man erst von programmieren, wenn z.B. PHP verwendet wird ;)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!