Hej, jeg er ny i denne verden og der er noget jeg ikke forstår mht positionering/layout med css:
Nedenfor har jeg skrevet noget html-kode med indlejret CSS i Head'et. Men når jeg viser det i Firefox (sidste nye) opstår der et lille mellemrum mellem toppen og den øverste kasse (rød, #top). Jeg synes ellers jeg har prøvet alt men jeg kan ikke slippe af med det mellemrum - det vil jeg gerne!
Der er jo tale om et nested div-element... Er det her problemet ligger?
I IE vises det iøvrigt helt forkert men sådan er det vel bare med den browser - eller hva?
Jeg håber nogen kan give mig nogle fornuftige svar. Indtil videre synes jeg ikke CSS er særlig god til præcis positionering...
mvh Ole.
<html>
<head>
<title>Ny side</title>
<style type="text/css">
<!--
div#page {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 500px;
margin-top: -250px;
margin-left: -450px;
background-color: #dedede;
border: solid thin black;
overflow: auto;
padding: 0 0 0 0;
}
div#top {
position: relative;
top: 0px;
left: 0px;
background-color: red;
width: 900px;
height: 100px;
}
div#left {
position: relative;
background-color: green;
width: 600px;
height. 400px;
float: left;
}
div#right {
position: relative;
background-color: blue;
width: 300px;
height: 100px;
float: left;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="top">
<p>Top kolonne</p>
</div>
<div id="left">
<p>Venstre kolonne</p>
</div>
<div id="right">
<p>Højre kolonne</p>
</div>
</div>
</body
</html>