Avatar billede moejensen Nybegynder
20. februar 2004 - 09:20 Der er 7 kommentarer og
2 løsninger

hjælp til css layout

Jeg skal have lavet et simpelt css layout, hvor jeg har en topbar der har hele skærmens bredde og er 130 px høj. så skal der være en menu i venstre side der starter i højden hvor topbaren slutter og går til bunden af siden og er 160 px bred. feltet der dannes til højre for menuen skal begynde under topbaren, og gå helt til bunden og højre siden. Siden skal gerne kunne skalere så det ser pænt ud uanset om der er tale om en høj eller lav skærm opløsning.

jeg har prøvet med følgende:

body, html {
    margin: 0px;
    left: 0px;
}

#top {
    position: absolute;
    width: 100%;
    height: 130px;
    background-color: #000080;
}

#top_image {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -252px;
}

#menu {
    position: absolute;
    padding-left: 10px;
    top: 130px;
    width: 160px;
    height: 100px;
    background-color: #FFEE00;
}

#main {
    position: absolute;
    top: 130px;
    margin-left: 160px;
    background-color: #000000;
    height: auto;
    width: auto;
    overflow: auto;
}

men jeg kan ikke få højden på menuen og main feltet, samt bredden på main feltet til at blive pænt. enten når det ikke til kanten eller går det over hvis jeg ex bruger width: 100%;

hvad gør jeg?
Avatar billede domaz.dk Novice
20. februar 2004 - 10:17 #1
Hvis det ligger i en table skal du huske at have cellpadding="0" og cellspacing="0"...

altså f.eks.

<table cellpadding="0" cellspacing="0">
Avatar billede lordhead Nybegynder
20. februar 2004 - 10:25 #2
Det ser ud til du har glemt at sætte padding på body, html.

Indsæt dette isteden for den html, body du har nu:
body, html {
    margin: 0px;
    padding: 0px;
}

Desuden synes jeg personligt den bedste måde at positionere er endten ved ikke at positionere, eller ved at bruge relative, absolute kan godt være svære at have med at gøre..

Ellers kan du læse om css-layout i det hele taget på www.alistapart.com

/Rune
Avatar billede roenving Novice
22. februar 2004 - 07:46 #3
Sad lige og rodede med det, men der må være noget jeg har overset, for jeg fik kun højde og bredde til at fungere, hvis padding stod til 0px; ...

Jeg har ellers fået ind i hovedet, at padding ikke skulle lægges til bredden iflg. specifikationerne, men den insisterede på at lægge dem til !-)

-- men så havde jeg en anden liggende, som du måske kan få lidt inspiration fra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Div-layout</title>
<meta name="Generator" content="Stone's WebWriter 3.5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">

</script>
<style type="text/css">
html,body{
height:100%;
width:100%;
padding:0px;
margin:0px;
}
#mainWindow{
position:relative;
height:100%;
top:0px;
left:0px;
padding:0px;
margin:0px;
border:0px;
background:#ffa
}
#topBanner{
position:relative;
height:100px;
width:100%;
top:0px;
left:0px;
padding:0px;
margin:0px;
border:0px;
background:#faf;
}
#rightMenu{
position:relative;
height:100%;
width:100px;
top:0px;
right:0px;
float:right;
padding:0px;
margin:0px;
border:0px;
background:#faa;
}
#leftMenu{
position:relative;
height:100%;
width:100px;
top:0px;
left:0px;
float:left;
padding:0px;
margin:0px;
border:0px;
background:#aff;
}
#content{
position:relative;
height:100%;
padding:0px;
margin:0px;
border:0px;
background:#aaa;
}
</style>
</head>

<body>
<div id="mainWindow">
<div id="topBanner"></div>
<div id="rightMenu"></div>
<div id="leftMenu"></div>
<div id="content"></div>

</div>
</body>

</html>
Avatar billede hermandsen Juniormester
23. februar 2004 - 15:42 #4
Bare en ide, ikke testet:

#top {
position: absolute;
left: 0px;
top: 0px;
height: 130px;
width: 100%;
background-color: green;
color: black;
}

#menu {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 160px;
background-color: red;
color: black;
padding-top: 130px;
}

#content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background-color: blue;
padding: 130px 0px 0px 160px; /* Top, Right, Bottom, Left */
color: black;
}

<div id="top"></div>
<div id="menu"></div>
<div id="content"></div>

Noget i den retning...

For øvrigt:
<table cellpadding="0" cellspacing="0"> er totalt oldschool, og kan i css erstattes med:

table { border-collapse: collapse }
td { padding: 0px }

Om absolute positionering er bedre eller dårligere end relative positionering er vel alt i alt en smagssag... Hvis nu bare Internet Explorer understøttede Top, Left, Bottom og Right-egenskaberne ordentligt, så ville verdenen nok se lidt bedre ud! ;)

//hermandsen
Avatar billede moejensen Nybegynder
23. februar 2004 - 21:48 #5
undskyld jeg ikke har vendt til bage før, jeg har løst problemet, og fået et passende design. hvis i lavet et svar alle sammen, så får i nogle point.
Avatar billede roenving Novice
23. februar 2004 - 23:30 #6
Kan du bruge noget fra allesammen ?-)
Avatar billede moejensen Nybegynder
23. februar 2004 - 23:36 #7
jeg legede lidt med lidt relative, og så fik jeg det til at være som det skulle.
Avatar billede roenving Novice
24. februar 2004 - 01:18 #8
Jamen, så velbekomme '-)
Avatar billede roenving Novice
24. februar 2004 - 13:06 #9
-- og tak for points ;~}
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