View Full Version : Div+positioning and css ****ups

May 20th, 2010, 11: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 {
position: static;
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">
<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>


<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>
</div><!--END MENY-->
<div id="colorbox">
</div><!--END COLORBOX-->
</div><!--END TOP-->

<div id="header">
<div id="title">
<img src="bilder/BM.gif" />
</div><!--END TITLE-->
<div id="bild">
<img src="bilder/1.png" />
</div><!--END BILD-->
</div><!--END HEADER-->
<div id="content">
<div id="main"> Hello
</div> <!--END MAIN-->
<div id="meny">
<!-- <div id="content2">
<div id="meny2">
<ul class="menu1">
<li class="drop"><a href="item1.html" title="Startsida">Startsida</a>
<li class="drop"><a href="item2.html" title="Uthyrning">Uthyrning</a>
<li class="drop"><a href="item3.html" title="Maskiner">Maskiner</a>
<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>
<li class="drop"><a href="item4.html" title="Hyresvillkor">Hyresvillkor</a>
<li class="drop"><a href="item5.html" title="Prislista">Prislista</a></li>
</div><!--END BLUE-MENY-->

<div id="sidebar">
</div> <!--END SIDEBAR-->

<div id="footer">
</div><!--END FOOTER-->
</div><!--END CONTAINER-->

May 20th, 2010, 06:29 PM
As a first step I strongly suggest that you ensure that both your html and css validate at the w3c validators. See links in my sig.

I suggest this not because you should, or that it is the right thing to do, but because the errors that they report (in the main) look like they could be directly related to the problems you are having.