XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Css 3 Seiten Layout will net so :) (http://xhtmlforum.de/showthread.php?t=60657)

nova_rs 23.03.2010 15:54

Css 3 Seiten Layout will net so :)
 
Guten Tag.
Ich hab scho einige Webseiten gemacht jedoch noch net mit schönem css. Nachdem ich keine lust mehr Tabellen hab fing auch die CSS sucht an :) Nun komm ich aber , nachdem ich ja noch neuling bin, nicht weiter.

Ich hab ein 3 Seiten layout. Mit rundrum gfx.
Mein problem.

Wenn ich nun in die main ( hier der inhalt) etwas schreibe zieht sich die Seite ( was sie ja soll) jedoch werden die hintergründe der Linken und Rechten Navigation ( bei mir bis jetzt nur boxen) nicht mit gezoggen

Ich habe bereits den link in der FHQ bereits gelesen mit der verstecken überlappung bei floats usw aber so richtig hab ichs nicht verstanden....

Hier noch der code

danke schonmal

Css:

Code:


#container
{
margin: 0px auto;
width: 1174px;
background-image: url(pic/background.jpg);
background-repeat: repeat;

}

#container3
{
clear: both;
height: 155px;
width: 1174px;

}


#header{
width: 1174px;
height: 330px;
margin-top: 0px;       
background-image: url(pic/happy_02.jpg);

       
}

#container2
{
clear: both;


}
#main {
  width: 762px;
  margin: 0 213px 0 199px;
  background-color: #e8dfe0;

}
#navLeft
{
        width: 199px;
        background-image: url(pic/happy_04.jpg);
    background-repeat: repeat-y;
        float: left;
        height:inherit;
        position:relative top:5px;
}
#navRight
{
        width: 213px;
        background-color: #FFCC66;
  background-image: url(pic/happy_06.jpg);
  background-repeat: repeat-y;
        float: right;

}



#inhalt
{


}




#foodermain {
  width: 762px;
  height: 155px;
  background-image: url(pic/happy_08.jpg);
  float: left;
}
#fooderLeft
{
        width: 199px;
        height: 155px;
        background-image: url(pic/happy_07.jpg);
        background-repeat: no-repeat;
        float: left;

}
#fooderRight
{
        width: 213px;
        height: 155px;
        background-image: url(pic/happy_09.jpg);
        background-repeat: no-repeat;
        float: left;

}


Hp

Code:


<html>
<head>
  <link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body background="pic/background.jpg" topmargin="0">
        <div id="container">
                <div id="header">header</div>
                <div id="container2">
                        <div  id="navLeft"> <div id="navigation"> News <br> user </div> </div>

                        <div id="navRight"> Login </div>

                        <div id="main">
                       
                                                                lol <br> lol <br> lol <br> lol <br> lol <br> lol <br>
                                                                lol <br> lol <br> lol <br> lol <br> lol <br> lol <br>

                                                                lol <br> lol <br> lol <br> lol <br> lol <br> lol <br>


                        </div>
                       
                       
                </div>



                <div id="container3">
                        <div  id="fooderLeft">  </div>
                        <div id="foodermain">  </div>
                        <div id="fooderRight">  </div>
                       
                </div>

               

               
        </div>       
               
        </body>
</html>


scherii 30.03.2010 16:54

Liste der Anhänge anzeigen (Anzahl: 1)
Bei mir sieht das so aus wie im angehängten Bild.

Welche Boxen sollen sich mit dem Inhalt vergrössern?
#navRight und #navLeft?
Wenn ja, dann pack #main in #navRight und diesen in #navLeft und gib nur #main eine Höhe, die anderen wachsen mit.

Falls ich das falsch verstanden habe, bitte ich dich, das irgendwo online zur Verfügung zu stellen oder ein sinnvolles (aufs Nötigste reduzierte und vorher validiertes) Testcase zu schreiben. Im aktuellen erkenne ich leider nicht wirklich etwas.

Greets,
scherii


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023