Okay, det virker så nada i forhold til det layout jeg prøver at få det ind i. Kan det skyldes nogle nedarvninger, som ikke ligger korrekt?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFA's hjemmeside</title>
<link href="Stylesheet/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="grid_top">
<div class="row">
<div class="header"></div>
</div>
</div>
<div class="grid_top_menu">
<div class="row">
<div class="menu1"></div>
<div class="menu2">3er</div>
<div class="menu1"></div>
<div class="menu1"></div>
<div class="menu1"></div>
<div class="menu1"></div>
<div class="menu1"></div>
<div class="menu1"></div>
<div class="menu1"></div>
</div>
</div>
<div class="grid_mid">
<div class="row">
<div class="navi"></div>
<div class="container"></div>
</div>
</div>
<div class="grid_bottom">
<div class="row">
<div id="footer">footer</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
html,body {
margin:0;
padding:0;
background-color:#FFF;
}
.wrapper {
width:1024px;
margin:auto;
display: table;
}
.grid_top {
height:65px;
background-image: url(../images/layout_01.jpg);
display: table;
background-repeat:no-repeat;
border-collapse:collapse;
}
.grid_top_menu {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:center;
overflow:hidden;
height:28px;
background-color:#FFF;
display: table;
background-repeat:no-repeat;
border-collapse:collapse;
}
.grid_mid {
width:1024px;
height:572px;
margin:0 auto;
background-color:#FFF;
background-image: url(../images/layout_11.jpg);
display: table;
background-repeat:no-repeat;
border-collapse:collapse;
}
.grid_bottom {
width:1024px;
height:101px;
margin:0 auto;
background-color:#FFF;
background-image: url(../images/layout_12.jpg);
display: table;
background-repeat:no-repeat;
border-collapse:collapse;
}
.header {
display: table-cell;
width: auto;
height:70px;
}
.menu1 {
display: table-cell;
width: 205px;
background-image: url(../images/layout_02.jpg);
height:28px;
float:left;
}
.menu2 {
display: table-cell;
margin:0px 600px 0px 205px;
width: 109px;
height:28px;
background-image: url(../images/layout_03.jpg);
float:left;
}
.menu3 {
display: table-cell;
width: 56px;
height:28px;
background-image: url(../images/layout_04.jpg);
}
.menu4 {
display: table-cell;
width: 109px;
height:28px;
background-image: url(../images/layout_05.jpg);
}
.menu5 {
display: table-cell;
width: 49px;
height:28px;
background-image: url(../images/layout_06.jpg);
}
.menu6 {
display: table-cell;
width: 109px;
height:28px;
background-image: url(../images/layout_07.jpg);
}
.menu7 {
display: table-cell;
width: 55px;
height:28px;
background-image: url(../images/layout_08.jpg);
}
.menu8 {
display: table-cell;
width: 109px;
height:28px;
background-image: url(../images/layout_09.jpg);
}
.menu9 {
display: table-cell;
width: 223px;
height:28px;
background-image: url(../images/layout_10.jpg);
}
.row {
display: table-row;
float:left;
width:100%; /* width of page */
position:relative;
}
.navi {
display: table-cell;
width: 195px;
height:572px;
}
.container {
display: table-cell;
width: auto;
height:572px;
}
Jeg har efterhånden rodet så meget rundt, at der er meget overflødig kode, se igennem fingre med det.
Det jeg gerne ville, er at alle <div class=menuX> ligger ved siden af hinanden, uden at det går ud over de øvrige layout. Fuck, det havde sku' været nemmere med en tabel...
