...

View Full Version : Div collumns and image problems



47x
05-22-2010, 04:14 PM
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.




<!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>

optimus203
05-23-2010, 02:47 AM
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 (http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks).

I'm not really seeing your image issue in Safari or Firefox. Are you having issue with IE?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum