Div+positioning and css ****ups [Archive]

47x

05-20-2010, 10:55 AM

I have made a mess out of this, I can't simply think straight anymore.

When I am resizing the window everything jumps around on the page..why?

I don't get the #main div to be where it should be, it stays above or under the menu.

Please help, if you understood what I was trying to tell you of course. I dont anymore.

* {border: 0px; margin: 0px; padding: 0px;} /*TAR AUTOMATISKT BORT ALL PADDING/BORDER/MARGIN*/

html {height:100%;}

* html #container {height:100%;}

ul {font-family:Arial, Helvetica, sans-serif;}

body {background-color:#11110a; text-align: center; height:100%;}

#container { background-color:#11110a; width: 70em; margin-left: auto; margin-right: auto; min-height:100%; position:relative; text-align: left;}

#top {height:40px; background-color:#11110a; width:100%; position: relative; clear: both; }

#top #colorbox { background-image:url(bilder/blue.png); background-repeat:repeat-y; height:40px; background-color:#069; width:15em; position:relative; margin-left:4%; float:left; }

#top #meny {height:40px; background-color:#11110a; width:300px; position:relative; margin-right:0%; clear:both; float:right;}

#top #meny li{ font-size:12px; text-decoration: none; display:inline; padding:0px 0px 0px 0px;}

#top #meny li a {height:21px; width:5em; color:#ffffff; float:left; text-decoration: none; text-transform: none; text-align: center; padding-top:10px; padding-bottom:0px;}

#top #meny ul{list-style-type:none; float:left; }

#top #meny li a:hover{color: #ffffff; background-image: url(bilder/hover.gif); background-repeat: no-repeat; background-position: center bottom;}

#header {width:100%; height:130px; background-color:#11110a;}

#header #title {height:130px; width:360px; position:relative; margin-left:4%; float:left;}

#header #bild {height:130px; width:370px; margin-right:0em; margin-top:auto; float:right;}

#content {width:92%; height:; background-color:#FFF; margin-left: auto; margin-right: auto; overflow: auto;}

#content #meny {height:; width:15em; background-color:#3333CC; background-image:url(bilder/blue.png); background-repeat:repeat-y;}

#content #main {
height:393px;
width:603px;
background-color:#c0c0c0;
position: static;
float:left;
left: 285px;
top: 171px;

}

#footer {width:100%; height:150px; background-color:#1d1d13;}

ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow:hidden; background:#f8f8f8; width:15em; text-align:left; border:0px solid #606; font-family:Arial, Helvetica, sans-serif; background-image:url(../Bottnia/bilder/blue.png); background-repeat:repeat-y; }
ul.menu1 {margin:0 auto; padding-top:2.5em; }

ul.menu1 table {border-collapse:collapse; padding:10px; margin:0; font-size:1em; }
ul.menu1 ul {margin-left:2em;}
ul.menu1 li {text-indent:0.5em;}
ul.menu1 li.drop {margin-bottom:-4px; font-size:18px; border-bottom:1px #009}
ul.menu1 li a,
ul.menu1 li a:visited {display:block; width:14em; height:2em; line-height:1.9em; text-decoration:none; color:#ffffff;}
ul.menu1 li a.last,
ul.menu1 li a.last:visited {display:block; width:14em; height:14em; line-height:2em;}
ul.menu1 li ul {display:none;}

ul.menu1 li:hover a,
ul.menu1 li a:hover {border:; color:#1a275b; font-weight:bold;}
ul.menu1 li:hover ul,
ul.menu1 li a:hover ul {display: block; height:9.3em; width:12em; margin-top:-1px;}
ul.menu1 li:hover ul li a,
ul.menu1 li a:hover ul li a {height:2em; color:#ffffff; font-weight:normal;}
ul.menu1 li:hover ul li:hover a,
ul.menu1 li a:hover ul li a:hover {background-color:#297ae6; color:#fff; }
ul.menu1 li.undermeny {font-size:12px;}

<!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" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Namnlöst dokument</title>
</head>

<body>

<div id="container">
<div id="top">
<div id="meny">
<ul class="basic-navigation">
<li id="start"><a href="#">Startsida</a></li>
<li id="tjanster"><a href="#">Tjänster</a></li>
<li id="om"><a href="#">Om oss</a></li>
<li id="kontakt"><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="colorbox">
</div>
</div>

<div id="header">
<div id="title">
<img src="bilder/BM.gif" />
</div>
<div id="bild">
<img src="bilder/1.png" />
</div>
</div>
<div id="content">
<div id="main"> Hello
</div> 
<div id="meny">

<ul class="menu1">
<li class="drop"><a href="item1.html" title="Startsida">Startsida</a>
<table>
<tr>
<td></td>
</tr>
</table>
</li>
<li class="drop"><a href="item2.html" title="Uthyrning">Uthyrning</a>
<table>
<tr>
<td></td>
</tr>
</table>
</li>
<li class="drop"><a href="item3.html" title="Maskiner">Maskiner</a>
<table>
<tr>
<td><ul>
<li class="undermeny"><a href="item3a.html">Släpvagnar</a></li>
<li class="undermeny"><a href="item3b.html">Verktyg</a></li>
<li class="undermeny"><a href="item3c.html">Maskiner</a></li>
<li class="undermeny"><a href="item3d.html">Rast/Manskapsvagnar</a></li>
<li class="undermeny"><a href="item3e.html">Grävmaskiner</a></li>
<li class="undermeny"><a href="item3f.html">Kompressorer</a></li>
<li class="undermeny"><a href="item3f.html">Övrigt</a></li>
</ul></td>
</tr>
</table>
</li>
<li class="drop"><a href="item4.html" title="Hyresvillkor">Hyresvillkor</a>
<table>
<tr>
<td></td>
</tr>
</table>
</li>
<li class="drop"><a href="item5.html" title="Prislista">Prislista</a></li>
</ul>
</div>

<div id="sidebar">
</div> 
</div>
</div>
</div>


<div id="footer">
Footer
</div>
</div>
</body>
</html>