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 collumns and image problems

    The problem so far is that I wish the top right image to lose its padding or whatever it is that is keeping it way above the wrapper div. I would also love if somebody know how to make all thre divs that are inside the warpper to be the same length as each the others.

    And that is about it.

    Maybe not. When I tried to validate my code I got 9 errors, I don't understand how I'm supposed to fix them.



    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" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    * {padding:0; margin:0; border:0;}
    
    body {font-size:12px; font-family: Arial, Helvetica, sans-serif; background:#11110a; word-wrap:break-word;}
    
    #container {margin-left: auto; margin-right: auto; position:relative; text-align: left;  width:1000px;}
    
    #header {background:#a31e39;}
    
    #outer1 {float:left; width:240px; padding:10px; background:#e0d0d0; background-color:#069; background-image:url(bilder/blue.png); padding-top:1.5em; background-repeat:repeat-y; overflow: inherit;}
    #outer2 {background:#FCC; margin-right:20%; margin-left:270px; padding:1.5em;}
    #outer3 {float:right; width:20%; background:#FF9; height:100%;}
    
    #outer1, #outer2, #outer3 {padding-bottom:320px; margin-bottom:-320px;}
    
    #wrapper {overflow: hidden; background:#ffffff;}
    
    
    #footer {clear: auto; background:#11110a;}
    
    .content {padding:1.25em; text-align:left;}
    .content2 {padding:1.25em; text-align:center;}
    h1 {font-size:36px; margin:0; padding:10px 0; color:#1a275b;}
    h3 {font-size:36px; margin:0; color:#1a275b;}
    p {font-size:14px; line-height:1.5em; margin:0; padding:5px 0; color:#000000;}
    #footer p,
    #header p {color:#4e4f44; font-size:12px;}
    #footer a {color:#4e4f44;}
    #footer a:hover {text-decoration:none;}
    
    #top {height:40px; background-color:#11110a; position: relative; }
    
    #top #colorbox { background-image:url(bilder/blue.png); background-repeat:repeat-y; height:40px; background-color:#069; width:260px;}
    
    #top #meny {height:40px; background-color:#11110a; width:300px; position:relative; margin-right:-6%; 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 {height:130px; background-color:#11110a;}
    
    #header #title {height:130px; width:360px;  position:relative; margin-left:0%; float:left;}
    
    #header #bild {height:111px; width:370px;  float:right;}
    
    ul {font-family:Arial, Helvetica, sans-serif;}
    
    
    ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:28em; overflow:hidden; width:15em; text-align:left;  border:0px solid #606; font-family:Arial, Helvetica, sans-serif; background-image:none; }
    ul.menu1 {margin:0 auto; padding-top:1.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:#ffffff; 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:#ffffff; }
    ul.menu1 li.undermeny {font-size:12px;}
    
    #pris {border: 1px #006;}
    
    </style>
    
    
    
    </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="wrapper">
    			<div id="outer1">
    					 <ul class="menu1">
                  <li class="drop" id="startsida"><a href="item1.html" title="Startsida">Startsida</a>
                    <table>
                      <tr>
                        <td></td>
                      </tr>
                    </table>
                  </li>
                  <li class="drop" id="uthyrning"><a href="item2.html" title="Uthyrning">Uthyrning</a>
                    <table>
                      <tr>
                        <td></td>
                      </tr>
                    </table>
                  </li>
                  <li class="drop" id="maskiner"><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"id="hyresvillkor"><a href="item4.html" title="Hyresvillkor">Hyresvillkor</a>
                    <table>
                      <tr>
                        <td></td>
                      </tr>
                    </table>
                  </li>
                  <li class="drop" id="pris"><a href="item5.html" title="Prislista">Prislista</a></li>
                </ul>
    
    			</div>
    
    			<div id="outer3">
    				<div class="content">
    					<h3></h3>
    					<p></p>
    				  <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
    					<p></p>
    					<p></p>
    
    				</div>
    			</div> <!-- end outer3 -->
    
    			<div id="outer2">
                	<div class="content">
    					<h3>Uthyrning</h3>
    					<p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
    					<p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
    
    					<p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                        <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                        <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                        <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                        <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                        
                       
              	</div>
    			</div> <!-- end outer2 -->
    
    		</div><!-- end #wrapper -->
    
    		<div id="footer">
            <div id="colorbox2">        
            </div>
        <div class="content2">
    				<p>Copyright &copy;2010 Isabelle Holmström -  <a href="http://www.isho.se">Isho.se </a> 
    				
                 
                    
    				  <br />
    				  <br />
    </p>
    				
    			</div>
                
      </div> <!-- end footer -->
    
    </div><!--END CONTAINER-->
    </body>
    </html>

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    For columns, you would either have to specify a specific height for each, which limits the amount of content you can put in your center col, or the better way to approach the column issue would be going this route: equal height columns with cross-browser CSS and no hacks.

    I'm not really seeing your image issue in Safari or Firefox. Are you having issue with IE?
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

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