Probleem met divs en CSS - Softwareontwikkeling

zondag 5 juli 2009 11:52

Acties:

0 Henk 'm!

Compizfox

Bait for wenchmarks

Topicstarter

Daar ben ik weer met een topic

Ik wil een layout op m'n website met een header, een horizontaal menu, een body en links van de body een verticaal menu. Daaronder heb ik ook nog een footer.
Het meest heb ik al voor elkaar: Ik heb het totaal in een container gezet en de header met daar vlak onder het horizontale menu is ook al voor elkaar.

Na een hoop gegoogle heb ik ook voor elkaar dat de body (en de container dus) meerekt met de content die daarin staat.

Echter, het linkse menu doet niet wat ik wil. Ik zou graag het menu laten meerekken met de body-div. Nu zit er als de body-div langer is (omdat er veel tekst in staat) een wit stuk onder, erg lelijk dus.

M'n index.php:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>dotLars</title>
  </head>
  <body>
     <div class="container">
      <div class="header">
    <img src="images/header.jpg" alt="header">
      </div>
      <div class="menu">
    <?php
      include 'menu.php';
    ?>
      </div>
      <div class="leftcontent">blablablablablablablabl<br>blablablablablablablabl<br>blablablablablablablabla<br>blablablablablablablabla<br>blablablablablablablabla<br>blablablablablablablabla<br>
</div> 
      <div class="head">

    <?php
      if (isset($_GET['page'])) {
        $page = $_GET['page']; }
        else {
        $page = "home"; }

      include ($page . ".php");
    ?>
      </div>

      <div class="footer">
    <p>dotLars by Lars Veldscholte</p>
    <p>
        <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>


        <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valide CSS!">
        </a>

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

M'n stylesheet:

code:

/*main*/
body {
margin:0;
padding:0;}

* {
margin:0;
padding:0;}

/*tekst*/
p {
  font-size: 11pt;
  font-family: Calibri, Segoe Ui, Tahoma;
  color: black;}

a:link{
font-size: 11pt;
color: #004DFF;
} 

h1 {
font-size: 25pt;
font-family: Calibri, Segoe Ui, Tahoma;
color: #3B22A5;}

h2 {
font-size: 20pt;
font-family: Calibri, Segoe Ui, Tahoma;
color: #0E918C;}

h3 {
font-size: 18pt;
font-family: Calibri, Segoe Ui, Tahoma;
color: #0F8F8A;}

h4 {
font-size: 16pt;
font-family: Calibri, Segoe Ui, Tahoma;
color: #0D8E89;}

h5 {
font-size: 14pt;
font-family: Calibri, Segoe Ui, Tahoma;
color: #0D8E89;}

/*divs*/
div.container {
margin:0 auto;
width:950px;
height:100%;
overflow:visible}

div.header {
position:absolute
margin-top:10px;
background-color:#EB7719;
height:130px;
width:950px;}

div.menu {
width:950px;
height:30px;
margin-top:0;
background-color:#EA7416;}

div.leftcontent {
float:left; 
width:150px;
height:auto;
background-color:#EFC617;
}

div.head {
margin-left:150px;
background-color:#FAECAB;}

div.footer {
width:950px;
height:15px;
clear:both;
overflow:visible;
background-color:#FADF6A;}

div.menublock {
width: 30px;
margin-left: 10%;
float:left}

Gewoon een heel grote verzameling snoertjes

zondag 5 juli 2009 11:58

Acties:

0 Henk 'm!

FreestyleFrl

Als je dat verticale menu in die container hebt zitten en je geeft het een hoogte van 100% mee werkt dat niet?
Dat gebruik ik namelijk wel regelmatig om dit soort dingen mee te laten rekken.

zondag 5 juli 2009 12:51

Acties: