Avatar billede khalus Nybegynder
15. august 2003 - 20:46 Der er 11 kommentarer og
1 løsning

Layout med css i stedet for tables!

Jeg har lavet et nyt, design, og har aldrig lavet et layout med css før, så jeg vil gerne have en kode jeg kan arbejde videre med. Layoutet kan du se her: http://www.fam.skou.nyka.dk/testing/tingest.gif .
Det består af en leftbar, en rightbar, en title, en menu, en box og content. Det skal helst laves med et stylesheet og ved brug af div.

NB. Jeg vil give point til det først brugbare svar!!!
Avatar billede roenving Novice
15. august 2003 - 20:56 #1
Er det en fast størrelse, eller forventer du at det skal skaleres til brugerens skærmstørrelse ?-)
Avatar billede khalus Nybegynder
15. august 2003 - 21:34 #2
Width skulle gerne være fast. Length (i alt) skulle gerne være 100%!
Avatar billede roenving Novice
16. august 2003 - 00:21 #3
Sådan noget ?-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{
height:100%;
margin:0px;
padding:0px;
}
#main{
width:720px;
height:100%;
}
#rightbar{
position:relative;
top:0px;
float:right;
width:50px;
height:100%;
background-color:#aaf;
}
#leftbar{
position:relative;
top:0px;
float:left;
width:50px;
height:100%;
background-color:#aaf;
}
#title{
position:absolute;
top:0px;
left:50px;
height:100px;
width:620px;
background-color:#afa;
z-index:1
}
#menu{
position:absolute;
top:100px;
left:50px;
height:20px;
width:620px;
background-color:#faa;
z-index:1
}
#box{
position:relative;
top:0px;
float:left;
width:200px;
height:400px;
background-color:#fff;
}
#content{
position:absolute;
top:0px;
left:50px;
height:100%;
border-top:120px;
width:620px;
background-color:#ffa;
}
</style>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<div id="main">
<div id="rightbar"></div>
<div id="leftbar"></div>
<div id="title"></div>
<div id="menu"></div>
<div id="content">
<div id="box"></div>
</div>

</div>
</body>

</html>
Avatar billede miss-g Seniormester
16. august 2003 - 12:42 #4
Avatar billede khalus Nybegynder
17. august 2003 - 16:05 #5
roenving! du har ramt plet. Bare en lille ting. Det hele skal være centreret. Har prøvet med text-align: center; i body, og at putte <center></center> rundt om html'et. Kan du fixee det??
miss-g, har læst artiklerne, før du skrev dem her. De gør ikke andet en at få mig til at stille en masse spørgsmål!
Avatar billede roenving Novice
17. august 2003 - 16:17 #6
For at få tingene til at lægge sig indeni hinanden var jeg nødt til at bruge position:absolute; ...
-- umiddelbart kan jeg ikke finde på nogen måde at gøre det anderledes, men ville så vælge at putte et lille javascript ind, som positionerede onload !-)
Avatar billede khalus Nybegynder
17. august 2003 - 16:43 #7
Vil det sgie, hyptetisk set, at det er umuligt at få det centreret, selv hvis man skrev hele scriptet om?? lav lige at svar!! (hvis du har et javascript der passer...så skriv også lige det!)
Avatar billede khalus Nybegynder
17. august 2003 - 16:52 #8
hypotetisk** læser mine indlæg igennem først næste gang
Avatar billede roenving Novice
17. august 2003 - 18:33 #9
Jeg havde fat i nogle smårettelser også, så du får den udgave, som jeg sidst har brugt -- alt inklusive '-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{
height:100%;
margin:0px;
padding:0px;
text-align:center;
}
#main{
width:720px;
height:100%;
}
#rightbar{
position:relative;
top:0px;
float:right;
width:50px;
height:100%;
background-color:#aaf;
}
#leftbar{
position:relative;
top:0px;
float:left;
width:50px;
height:100%;
background-color:#aaf;
}
#title{
position:absolute;
top:0px;
left:50px;
height:100px;
width:620px;
background-color:#afa;
z-index:1
}
#menu{
position:absolute;
top:100px;
left:50px;
height:20px;
width:620px;
background-color:#faa;
z-index:1
}
#box{
position:relative;
top:120px;
float:left;
width:200px;
height:400px;
background-color:#fff;
}
#content{
position:absolute;
top:0px;
left:50px;
height:100%;
border-top:120px;
width:620px;
background-color:#ffa;
color:#000;
}
#txt{
position:relative;
top:120px;
float:left;
background-color:#eee;
}
</style>
<script language="javascript" type="text/javascript">
function posSite(){
place = document.getElementById('leftbar').offsetLeft;
document.getElementById('title').style.left = (place + 50) + "px";
document.getElementById('menu').style.left = (place + 50) + "px";
document.getElementById('content').style.left = (place + 50) + "px";
}
</script>
</head>
<body onload="posSite();" onresize="posSite();">
<div id="main">
<div id="rightbar"></div>
<div id="leftbar"></div>
<div id="title"></div>
<div id="menu"></div>
<div id="content">
<div id="box"></div>
<div id="txt"><h1>Dette er en prøve</h1>


</div>
</div>

</div>
</body>

</html>
Avatar billede roenving Novice
17. august 2003 - 19:11 #10
-- og tak for points ;~}
Avatar billede khalus Nybegynder
17. august 2003 - 19:13 #11
så lidt...
hvis jeg får probs, skal jeg så skrive videre her, eller maile dig..? Eller skal jeg ikke gøre nogen af delene? ;)
Avatar billede roenving Novice
17. august 2003 - 19:21 #12
Du kan ihvertfald godt skrive her, men så vil du være afhængig af, at præcis jeg (eller en anden deltager i dette spørgsmål, som har E-Mail slået til) ser det og kan hjælpe dig, for det vil jo ikke poppe op for andre end dem som lige kigger på 5 nyeste indlæg de to minutter det står på den liste !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester