3 svar · 327 visningar · startad av Nexus86
Hur gör jag för att få tre divar så som på bilden? Lite enkelt förklarat:
Behöver ni veta mer så fråga. :)
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>
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. :)
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>