Divproblem.. igen.

HTML & CSS

3 svar · 329 visningar · startad av Nexus86 22 okt. 2003

Nexus86Medlem sedan okt. 20023 030 inlägg

Frågan22 okt. 2003 20:53#1

Hur gör jag för att få tre divar så som på bilden? Lite enkelt förklarat:

#contents ska ändra höjd vid behov
#sidebar ska också ändra höjd vi behov
#sidebars höjd ska vara lika med #contents höjd plus mellanrummet mellan #contents och #bottom (10px) plus #bottoms höjd hela tiden
#bottom ska hela tiden ha en höjd på 20px och bredd lika stor som #contents

Behöver ni veta mer så fråga. :)

nitro2k01Medlem sedan aug. 20039 340 inlägg

23 okt. 2003 10:34#2

Kunde inte komma på hur man skulle göra med div-ar, men här är ett exempel som använder sig av en tabell och lite css.

 
<style>
table	{border: none;}
body	{margin: 0px;}
td	{border: 1px solid black;}
body, td	{font-family: verdana; font-size: 10px; }
</style>

<table cellspacing="10" ><tr><td width="570">

main<br />
 d<br />
ghcf<br />
g d<br />
fgjdfjf<br />
ghjfg<br />
hjfghj<br />
fhgj<br />
fghj<br />
fgjhf<br />
 ghj fg<br />
hjfgj<br />
cgh<br />

</td><td rowspan="2" width="150">

Sidebar
</td></tr><tr><td>

bottom
</td></table>

Nexus86Medlem sedan okt. 20023 030 inlägg

23 okt. 2003 10:43#3

Vet mycket väl hur det blir med tabeller men försöker undvika det till det yttersta. Men tack ändå för att du tog dig tid. :)

bossseMedlem sedan juni 2003771 inlägg

1 nov. 2003 12:19#4

Detta verkar vara ett vanligt problem, som jag "tror" jag löst nu.
Har här lekt ihop lite kod med tillhörande uppsats.
Vem vet, kanske kan det passa någon.

<html>
<head>
<style type=text/css>
<!--
body {background-color:lightgreen; }

.top
{width:80%;height:75%;background-color:lightblue;color:yellow;
position:absolute;top:2%;left:2%; padding-left:20px; padding-right:30px;
border:1px solid black;font-family:Verdana, 
Geneva, sans-serif; font-size:10pt; color:red;
overflow:auto;} 

.bottom
{width:80%;height:15%;background-color:green;color:green;position:absolute; 
top:77%;left:2%; 
border: 1px solid black;} 

.right
{width:15%;height:90%;background-color:silver;position:absolute; top:2%;left:80%; 
border: 1px solid black;}

-->
</style>

</head>
<body>

<div class=top>
<BR>
Vill du sedan alltid ha kontroll över storlek och position så kan du 
<BR>
omsluta hela koden med en osynlig div.
<BR><BR>
Då måste du också lägga in nedantående i din csskod. (bara ett exempel)
<BR>
.center {width:600px; height:400px; position:absolute; left:50%; top:50%; margin-left:-300px; margin-top:-200px; }
<BR><BR>
Sedan anropar du detta med "div class=center". 
<BR>
Ändra center-divens width och height till önskat mått. 
<BR><BR>
Du ändrar sedan värden för margin-left/margin-top enl. följande 
<BR>
Om din center-div är 500px bred och 400px hög så blir margin-värdena
<BR>
minus 250px respektive minus 200px. d.v.s hälften av divens mått. 
<BR><BR>
Diven ligger då alltid i mitten oavsett storlek eller upplösning.
<BR>
Om du bara vill centrera åt ett håll så tror jag du kan räkna ut detta själv!
<BR><BR>
Denna kodsnutt visar div utan ovanstående centrering.
<BR>
Vill du ej ha synlig scrollist så ta bort overflow:auto
<BR><BR>
Om man omsluter allt med center-div så måste bredden på top och bottom minskas med c:a två procent. 
<BR><BR>
</div>
<div class=bottom>
</div>
<div class=right>
</div>
</body>
</html>