Problem med højde via CSS
HejForholdsvis ny til CSS. Har overordnet lidt svært ved at finde ud af hvornår jeg skal bruge tabeller og hvornår jeg skal bruge div tag?
Mit konkrete problem er at jeg har lavet et design til et site. Jeg har lavet nogle div elementer som pt har fast størrelse, men umiddelbart kan der være x antal elementer i hoved div'en. Problemet er så at min floating elementer ikke rigtigt kommer til at passe i min hoved div...enten kommer der en scroll eller også kan man ikke se dem alle.
koden:
<body background="graabg.gif">
<div id="hoved">
<!--Top div:-->
<div id="top"><img src="logo.jpg"></div>
<!--Mellem div:-->
<div id="mellem"><img src="ulogo.jpg"></div>
<!--Indledning:-->
<div id="indledning"><h1>Velkommen ombord!</h1><br><h2>På denne side kan du læse om oplevelserne med.</h2><br></div>
<!--Blog div:-->
<div id="blog">
<%
strSQL = "SELECT * FROM Blog"
Set rs = Conn.Execute(strSQL)
Do While Not rs.EOF
%>
<div id="blogitem">
<h3><%=rs("overskrift")%></h3>
</div>
<br>
<%
RS.MoveNext
Loop
%>
</div>
<!--Menu div:-->
<div id="menu">
<div id="menuitem">
Quick links:<br>
Speedbådskørekort<br>
Farvandsudsigt<br>
AIS Storebælt<br>
Beregn tid<br>
</div>
<br>
<div id="menuitem">
Rekorder:<br>
Laks: PR 11kg BR 11kg<br>
Torsk: PR 7kg BR 7kg
</div>
<br>
<div id="menuitem">
Andre teams:<br>
SR Fishing<br>
Gadusn<br>
Team Terkel
</div><br>
<div >
Her kommer noget andet </div>
</div>
</div>
</body>
CSS
#hoved {
width: 1000px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 0;
background-color: White;
box-shadow: 5px 5px 5px #888888;
overflow: hidden;
}
#top {
width: 1000px;
height: 103px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 0;
text-align: center;
}
#mellem {
width: 1000px;
height: 25px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 0;
text-align: center;
}
#indledning {
width: 1000px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 0;
text-align: center;
}
#blog {
width: 650px;
height: 600px;
border-style: solid;
border-width: 0;
float: left;
}
#menu {
width: 320px;
height: 600px;
border-style: solid;
border-width: 0;
float: right;
margin-right: 25px;
}
#blogitem {
width: 600px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: thin;
border-color: #E0EFFF;
text-align: center;
background-color: White;
box-shadow: 5px 5px 5px #888888;
}
#menuitem {
width: 280px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: thin;
border-color: #E0EFFF;
text-align: center;
background-color: White;
box-shadow: 5px 5px 5px #888888;
}
h1 {
font-family: Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: navy;
padding-top: 12px;
padding-bottom: 3px;
padding-left: 10px;
text-align: left;
}
h2 {
font-family: Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 10pt;
color: navy;
padding-top: 12px;
padding-bottom: 3px;
padding-left: 10px;
text-align: left;
}
h3 {
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 10pt;
color: #0033FF;
padding-top: 12px;
padding-bottom: 3px;
padding-left: 10px;
text-align: left;
}
