afsnitstørrelse i css.
I følgende kode skal teksten i #Content sættes med en hvis padding eller margin i forhold til selve størrelsen på content-feltet. Med andre ord skal der gerne være et lille hvidt stykke rundt om teksten. Problemet er bare, at hvis jeg bruger enten padding eller margin, så rykker content sig i størrelse, på trods af at den er defineret til 600, som den også skal være. Hvordan kan jeg løse det, når Menu+Content skal være 700px? Faktisk gælder det samme også for #Menu...CSS:
/* CSS Document */
body {
margin:0px;
padding:0px;
font-family: arial, helvetica, sans-serif;
color:#333;
background-color:white;
}
h1 {
margin:0px 0px 15px 0px;
text-align:center;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#000000;
}
p {
font:11px/20px /* <--liniehjden */ arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#000000;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:arial, helvetica, sans-serif;
}
a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
#Content {
position:absolute;
top:100px;
left:100px;
margin:0;
width: 600px;
height:400px;
padding:0px;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom:1px solid black;
}
#Menu {
position:absolute;
top:100px;
left:0px;
width:100px;
height: 400px;
padding:0px;
background-color:#91D161;
line-height:25px;
border-color; #999999;
border-width: 0px 1px 1px 0px;
border-style: solid;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="blomster.css" rel="stylesheet" type="text/css">
</head>
<body>
<img name="dd" src="" width="700" height="100" alt="">
<div id="Content">
<h1>Lorem Ipsum </h1>
<p> Lorem ipsum dolor sit amet</p>
<p>Proin mattis</p>
</div>
<div id="Menu">
<a href="" title="">Forside</a><br />
<a href="" title="">Blomster</a><br />
<a href="" title="">Links</a><br />
<a href="" title="">Bestilling</a><br />
<a href="" title="">Radisson</a><br />
<a href="" title="">Billeder</a><br />
</div>
</body>
</html>
