div/css opløsnings problemer..
Heysa eksperter!Jeg har et lille problem, problemet er at jeg har fået fixet mig et design og det har jeg prøvet at lave via CSS, med div's efter jeg læste noget om det på eksperten her og på html.dk..
Problemet er at på de forskellige opløsninger er rykker de forskellige ting sig, op og ned og oven i hinanden, og det bliver jo ikke ligefrem pænt.
Jeg har lavet nogle forskellige versioner der passer til 800*600, 1024*768 og 1152*864 - men jeg ville jo gerne kunne have én version der passede til alle opløsninger, denne version har jeg lavet med tables, men jeg vil meget hellere have det lavet i divs/CSS 100%..
Mit spørgsmål ligenu er om CSS'en vil tilpasse sig ordentligt hvis at alle height/width er i %?
I for her versionen der tilpasser sig fint og rigtig godt i 1024*768:
body {
background-color: #171717;
margin:0px;
}
#title {
position:absolute;
left:0px;
top:0px;
width: 700px;
height: 18.4%;
background-image: url(banner.jpg);
background-repeat: no-repeat;
background-position: top left
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
}
#menu {
position:absolute;
left: 0px;
top: 100px;
width: 100px;
background-color: #FFFFFF;
height: 81.6%;
border-right: 1px solid #000000;
}
#content {
width: 600px;
background-color: #FFFFFF;
height: 100%;
border-right: 1px solid #000000;
}
#content1 {
padding-top: 0px;
margin-left:100px;
width: 600px;
background-color:white;
padding-left: 10px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#menuhead {
background-color: #FFFFFF;
font-weight: bold;
font-family: Verdana;
font-size: 10px;
color: #d4870c;
text-decoration: none;
padding: 2px 6px;
border-bottom: 1px solid #DCDCDC;
}
#content2 {
padding-top: 100px;
margin-left:100px;
width: 600px;
height: 20px;
background-color:white;
padding-left: 0px;
}
#links {
height: 20px;
width: 100px;
}
#links a {
font-family: Verdana;
font-size: 10px;
color: #000000;
text-decoration: none;
display: block;
border-bottom: 1px solid #DCDCDC;
color: #000000;
background-color: #FFFFFF;
padding: 3px 10px;
height: 20px;
width: 100px;
}
#links a:hover {
background-color: #DCDCDC;
color: #d4870c
}
Og HTML koden der passer til alle versionerne
<head>
<title>sepeliotk ++ index</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="title">
</div>
<div id="content">
<div id="content2">
<div id="menuhead">
index
</div>
</div>
<div id="content1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</div>
</div>
<div id="menu">
<div id="menuhead">
menu
</div>
<div id="links">
<a href="index.html" target="_blank">index</a>
<a href="index.html" target="_blank">news</a>
<a href="index.html" target="_blank">news archive</a>
<a href="index.html" target="_blank">portfolio</a>
<a href="index.html" target="_blank">cv</a>
<a href="index.html" target="_blank">links</a>
<a href="index.html" target="_blank">code</a>
<br>
</div>
<div id="menuhead">
tutorials
</div>
<div id="links">
<a href="index.html" target="_blank">photoshop</a>
<a href="index.html" target="_blank">php</a>
</div>
</div>
</body>
</html>
I kan se det hele på www.splo.friserverplads.dk.
Som i sikkert kan se så er den ordentlig i 1024*768, men hvis i prøver at ændre jeres opløsning væk fra dette vil designet blive grimt, altså bordersne er ikke ordentlige.
Hvis der sidder nogen derude der vil prøve at fixe CSS koden så den virker i alle opløsninger vil jeg være dybt taknemmelig! Da jeg ikke selv kan få det til at fungere.
På forhånd tak, sepelio.
