[CSS] - DIV umschließt die anderen nicht?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Telefonzelle, 29. Januar 2007 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. Januar 2007
    Hi

    Ich probier grad n bisschen was mit Divs etc... und hab nun n Problem was ich irgwie nich lösen kann.


    Style.css
    Code:
    body {
     background-color: #FFFFFF;
     font-family: Arial;
     font-size:12px;
     color: #000000;
     margin-right:auto;
     margin-left:auto;
     margin-top:0px;
     padding:0px;
     width:900px;
    }
    #root {
     height:200px;
    }
    #border_left {
     background-image: url('img/Aussenrand_Links.png');
     background-repeat: repeat-y;
     width: 34px;
     height:100%;
     float:left;
    }
    #border_right {
     background-image: url('img/Aussenrand_Rechts.png');
     background-repeat:repeat-y;
     width: 36px;
     height:100%;
     float:right;
    }
    #content {
     float:left;
    }
    #header {
     background-image: url('img/Header.png');
     background-repeat:no-repeat;
     width:830px;
     height:121px;
    }
    
    DIVs:

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
     <head>
     <title>blubb</title>
     <link rel="stylesheet" type="text/css" href="style.css" />
     </head>
     <body>
     <div id="root">
     <div id="border_left">
     </div>
     <div id="content">
     <div id="header">
     </div>
     Das hier ist der Text unter dem Header, einfach mal so zum<br />
     <br />
     <br />
     Testen<br />
     <br />
     <br />
     Und<br />
     <br />
     So<br />
     <br />
     lol<br />
     <br />
     <br />
     Blabla
     </div>
     <div id="border_right">
     </div>
     </div>
     </body>
    </html>
    
    Das Problem:

    Der Root div umschließt die anderen Divs nicht, somit wird die height:100%; Begrenzung sinnlos bei den Border-Divs, was wiederrum bedeutet, dass der Border sehr aussieht...

    Also:

    Wie kann ich den root div um die anderen Div's rumbekommen? lol
    Oder gibts ne andere - vllt elegantere - Lösung für das Problem?

    MfG & Thnx.


    PS:

    Validator sagt:

    Bild
    Bild
     
  2. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    hast du vor das der unterteil nachher immer unten ist oder warum 100% ? is ja kein tabellen layout deswegen musst du das anders machen..
    aber ich hab das nicht so ganz verstanden vllt. läds du es irgendwo hoch und gibs mal n link durch.

    ahso und du kannst anstatt von deinem border bild auch lieber
    border: 1px solid #00000; schreiben bzw. border-right: 1px solid #000000;
    dann sparst du jedenfalls minimal ladezeit. wie breit du das haben wills musst du wissen ist nur ein beispiel ... hoffe es hilft dir trotzdem

    ps: falls du vor hast dein border durchgehend immer in seitengröße zu haben ist das nicht so leicht es gibt momentan glaub ich keine lösung die für jeden browser gilt ausnahme sind javascripts

    wieso hat dein root n height von 200 ?

    greetz
     
  3. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    Root Height is nur zum testen.

    Ich will das der Border_Left immer Links ist und der Border_Right immer Rechts, das sind 2 verschiedene Bilder, ich weiß nich was ich da mit border:1px solid #000 machen soll?! lol solid #000 != meine Bilder.
     
  4. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    Du könntest mal nach "Faux Columns" googeln. Das sollte dir weiter helfen und wenn ich dich richtig verstanden habe.

    Kurz Info: Du musst ein Bild erstellen welches sich vertikal wiederholt, so wird dein Rahmen "automatisch" lang gezogen.
     
  5. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    Das Bild, welches sich wiederholt (repeat-y) habe ich ja schon, nun habe ich quasi 3 div's erstellt:


    [GROSSER DIV................................................................]
    [DIV BORDER LEFT] [DIV CONTENT] [DIV BORDER RIGHT]
    [/GROSSER DIV...............................................................]

    Nun...
    DIV BORDER LEFT + DIV BORDER RIGHT haben background-image: url('...'); und repeat-y aktiviert.
    Die BORDERs sollen sich mit der Höhe an den Content also anpassen, deswegen height:100%; aber irgendwie will der große div nicht so wie ich will..
     
  6. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    DIV-BORDER-LEFT DIV-CONTENT DIV-BORDER-RIGHT - Das muss dein Bild sein. Dieses muss sich wiederholen im "GROSSER-DIV". Dann sollte es funktionieren.
     
  7. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    Ehm, ne.
    ich will ja nur die Border dinger am Rand wiederholt haben?! oO
    Nur in den Div's soll sich was wiederholen ,der rest soll unabhängig advon sein - außer halt, dass die höhe sich immer anpassen soll.
     
  8. 29. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?

    ich verstehe nicht ganz wozu du nen großen div brauchst.
    aber ich versteh auch dein prob nicht ganz und möchte aber auch nicht jetzt dein code kopieren

    So wie ich dich verstanden habe ist Rechts ein Bild was sich immer wiederholt, Links ebenfalls.
    In der mitte steht irgendein text. Sowas kann man sehr einfach z.b. über position attribute, float attribute und display attribute einstellen.
    z.b.:
    #left_div {
    background-color: Red;
    float: left;
    display: block; (macht sehr viel aus)
    position: absolute; (oder musst ma guckn was man sonst einstellen kann)
    }


    aber mal ein paar tips:
    1) zum testen eignet sich immer die hintergrundfarbe anders zu machen (z.b. von deinem root) dann siehst du exakt welchen bereich der div abdeckt (background-color: green)
    2) Position sowie display sollten dir aufjedenfall weiter helfen.

    Also so wie ich das verstanden habe sollte das eigtl. absolut ohne Probs gehen.
     
  9. 30. Januar 2007
    AW: [CSS] - DIV umschließt die anderen nicht?


    Google doch mal nach Faux Columns. Ich erzähle dir bestimmt keinen Mist
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.