Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    47x
    47x is offline
    New to the CF scene
    Join Date
    Mar 2010
    Location
    Sweden, Karlskoga
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div+positioning and css ****ups

    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.

    Code:
    	
    * {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;}
    Code:
    <!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><!--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>
                    <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><!--END BLUE-MENY-->
              
              <div id="sidebar">
              </div> <!--END SIDEBAR-->
            </div>
          </div>
        </div>
        <!--END CONTENT-->
    
    	<div id="footer">
        Footer
        </div><!--END FOOTER-->
    </div><!--END CONTAINER-->
    </body>
    </html>

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •