CSS + DIV's

Door Mark L op 31-05-2006 17:32

639 views

Ik wil dat mijn layout zo word:

[logo]

[][][]
[menu]
[][][]

en dan nog wat meer...

maar dat menu moet kunnen varieren van lengte.. en dan onstaat er een probleem met wat daaronder komt.. ik heb dus al geprobeert om een extra div te maken die het hele mune bij elkaar houd.. maar dat werkt niet..

ik heb ook bottom geprobeerd.. werkt ook al niet..

Ik hoop dat iemand het wel weet..


<style type="text/css">
#logo1 {
position: absolute; left: 0px; top: 0px;
background-image:url(http://members.lycos.nl/twirly/images/layout/logoboven.gif);
height: 75px;
width: 380px;
}
#menu1 {
position: absolute; left: 10px; top: 90px;
background-image:url(http://members.lycos.nl/twirly/images/layout/lbhoek.gif);
height: 15px;
width: 15px;
}
#menu2 {
position: absolute; left: 25px; top: 90px;
background-image:url(http://members.lycos.nl/twirly/images/layout/boven.gif);
height: 15px;
width: 110px;
}
#menu3 {
position: absolute; left: 135px; top: 90px;
background-image:url(http://members.lycos.nl/twirly/images/layout/rbhoek.gif);
height: 15px;
width: 15px;
}
#menu4 {
position: absolute; left: 10px; top: 200px;
background-image:url(http://members.lycos.nl/twirly/images/layout/menumidden.gif);
width: 140px;
}
#menu5 {
margin-left: 10px;
width: 110px;
color: #FFFFFF;
}
#menu6 {
position: absolute; left: 10px;
background-image:url(http://members.lycos.nl/twirly/images/layout/lohoek.gif);
height: 15px;
width: 15px;
}
#menu7 {
position: absolute; left: 25px;
background-image:url(http://members.lycos.nl/twirly/images/layout/onder.gif);
height: 15px;
width: 110px;
}
#menu8 {
position: absolute; left: 135px;
background-image:url(http://members.lycos.nl/twirly/images/layout/rohoek.gif);
height: 15px;
width: 15px;
}
#menu9 {
position: absolute; top: 190px; left: 10px;
width: 150px;
}

</style>

</head>

<body>

<div id="logo1">
</div>
<div id="menu9">
<div id="menu1">
</div>
<div id="menu2">
</div>
<div id="menu3">
</div>
<div id="menu4">
<div id="menu5">
---Hier opties---</div>
</div>
<div id="menu6">
</div>
<div id="menu7">
</div>
<div id="menu8">
</div>
</div>

Het probleem is dat hij:

[logo]

[6][7][8]

[1][2][3]
[menu]

weergeeft..

(de cijfers zijn menu[cijfer])

Mark L

31-05-2006 17:45

fout ontdekt.. maar geen idee hoe op te lossen...

fout is:

ik moest bij 6,7 en 8 ook top: doen... alleen probleem 2:

hoe maak ik dat ze allemaal onder elkaar zitten??

Kalle P

31-05-2006 18:05

werk met float om de 678 en de 123 naast elkaar te krijgen en zet om die 3 divs ook div heen dus [[1][2][3]] zeg maar en maak gebruik van float. Als ie zich moet aanpassen moet je geen height meegeven.

Mark L

31-05-2006 18:12

Oké.. w8 ff..

ik wil dus hebben:
[1][2][3]
[menu (Deze moet van lengte veranderen)]
[6][7][8]

lukt dat op deze manier?

Kalle P

31-05-2006 18:16

Jep als je het zo doet:

[*[1][2][3] ]
[menu (Deze moet van lengte veranderen)]
[**[6][7][8] ]

* = top --> height meegeven
** = bottom --> height meegeven

en [menu] geen height meegeven, als je een bg plaatje gebruikt repeat-y doen.

edit:
Je kan het ook zo doen
body 100% height meegeven. ** bottom 0px zetten en * top 0px zetten, dan past het middelste zich aan.

edit2:


html,body, #menu {
    height: 100%;
        margin: 0;
        padding: 0;
}


#menu {
    width: 250px;
    background-color: #FF88FF; /*geen idee wat voor kleur /* 
}

Harmen

31-05-2006 18:19

Kalle de CSS expert, dit had ik ook al nodig!

Mark L

31-05-2006 18:25

Mwah.. begrijpt nog nie helemaal... ff kijke.. de code.. er is aangegeven wat niet is:


<style type="text/css">
#logo1 {
position: absolute; left: 0px; top: 0px;
background-image:url(http://members.lycos.nl/twirly/images/layout/logoboven.gif);
height: 75px;
width: 380px;
}
#menu1 {
position: absolute; left: 10px; top: 90px;
background-image:url(http://members.lycos.nl/twirly/images/layout/lbhoek.gif);
height: 15px;
width: 15px;
}
#menu2 {
position: absolute; left: 25px; top: 90px;
background-image:url(http://members.lycos.nl/twirly/images/layout/boven.gif);
height: 15px;
width: 110px;
}
#menu3 {
position: absolute; left: 135px; top: 90px;
background-image:url(http://members.lycos.nl/twirly/images/layout/rbhoek.gif);
height: 15px;
width: 15px;
}
#menu4 {
position: absolute; left: 10px; top: 200px;
background-image:url(http://members.lycos.nl/twirly/images/layout/menumidden.gif);
width: 140px;
}
#menu5 {
margin-left: 10px;
width: 110px;
color: #FFFFFF;
}
#menu6 {
position: absolute; left: 10px;
background-image:url(http://members.lycos.nl/twirly/images/layout/lohoek.gif);
height: 15px;
width: 15px;
}
#menu7 {
position: absolute; left: 25px;
background-image:url(http://members.lycos.nl/twirly/images/layout/onder.gif);
height: 15px;
width: 110px;
}
#menu8 {
position: absolute; left: 135px;
background-image:url(http://members.lycos.nl/twirly/images/layout/rohoek.gif);
height: 15px;
width: 15px;
}
#menu9 {
position: absolute; top: 190px; left: 10px;
width: 150px;
}
#menu123 {    <------------------------------
float: 10;
width: 150px;
top: 100%;
}
#menu678 {    <------------------------------
width: 150px;
bottom: 100%;
}

</style>

</head>

<body>

<div id="logo1">
</div>
<div id="menu9">
<div id="menu123">    <------------------------------
<div id="menu1">
</div>
<div id="menu2">
</div>
<div id="menu3">
</div></div>    <------------------------------
<div id="menu4">
<div id="menu5">
--variabel--</div>
</div>
<div id="menu678">    <------------------------------
<div id="menu6">
</div>
<div id="menu7">
</div>
<div id="menu8">
</div></div></div>    <------------------------------

Mark L

31-05-2006 18:27

Oftewel.. ik snap echt nix van DIV's..

edit: CSS veranderd door DIV's, want CSS snap ik redelijk

Reageren

Inloggen om te reageren