...

View Full Version : Going CRAZY with CSS



gmnightingale
01-07-2010, 04:56 PM
Right I have been trying to do a very simple page in CSS for hours and hours now and I have drawn blood on my nuckles and pulled hair out!

This will be hard to explain but I will do my best. From tutorials books I have read etc I believe I should be able to have a main container on a page (which keeps it central etc) and then have a container inside this ( content container for instance) which I can float things such as text boxes to the left and right etc. No matter what I do the "content container" will not inherit any heights etc of anything which is "floated" inside it (well it does in IE but not in FF) can someone please help me through this problem im really really at my wits end and thinking tables were so much easier!

Firstly Page 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>
<link href="omstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="Container">
<div class="banner"></div>
<div class="menu">
<div class="menutext"><div align="right">About Us Our Services Contact</div></div></div>
<div class="building"><img src="Images/building.png" width="317" height="307" /></div>
<div class="content">
<div class="tagline">
<div align="center">The “One Stop” service of gathering & compiling all documentation
required on new build construction</div>
</div>
<div class="textbox1">
<p>The O&amp;M Bureau provides a “One Stop” service of gathering &amp; compiling all documentation required on new build construction. From conception to completion, The O&amp;M Bureau’s professional aggregation of documents via liaising with subcontractors, collating and arranging it in a readable, standard format and delivering it in hard copy (paper) or electronic output. This includes certification, safety data, cleaning information, product literature, record drawings &amp; design criteria that will be delivered in hard copy, on disc or via an online portal. The team at The O&amp;M Bureau has completed over 600 projects to date for most of the UK principal contractors (&amp; many building owners). The project team are informed of progress throughout the project via site meetings &amp; regular updates from our office based co-ordinators and online Tracking System (PITS).</p>
</div>
<div class="textbox2">
<p>Over the last 6 years, our team of professionals have produced O&amp;M Manuals for the following Companies.</p>
<p>&nbsp;</p>
<div class="bulletone">
<ul>
<li>Wates</li>
<li>Carrillion</li>
<li>McAlpine</li>
<li>Skanska</li>
<li>Millers</li>
<li>GB Solutions</li>
<li>Galliford Try</li>
<li>Wilmot Dixon</li>
<li>Kier</li>
<li>ROK</li>
<li>ISG</li>
<li>Morgan Ashurst</li>
<li>BAM</li>
</ul>
</div>
<div class="bulletone">
<ul>
<li>Pochins</li>
<li>Mansells</li>
<li>Ocon</li>
<li>Rydon</li>
<li>Costains</li>
<li>Hammerson</li>
<li>HBG</li>
<li>Blue Jelly</li>
<li>Gilmac</li>
<li>Warings</li>
<li>Aspire</li>
<li>Logic</li>
<li>Midas</li>
</ul>
</div>
<div class="bulletone"><ul>
<li>Thistle Construction</li>
<li>Faithdean</li>
<li>Barnfield Construction</li>
<li>Stradform</li>
<li>Fitzpatrick</li>
<li>Gardiner &amp; Theobald</li>
<li>Bowmer & Kirkland</li>
<li>Morgan Lovell</li>
<li>Macfarlanes</li>
<li>Norwest Holst</li>
<li>Kiley Construction</li>
<li>Shepherd Construction</li>
<li>Rackham Construction</li></ul>
</div>
</br></br>
</div>
<img src="Images/business_man.jpg" style="float:right; margin-top:35px; margin-right:35px;" />

</div>

</div>

</div>
<div class="Addressline">dvsvsd vdsvsdvsd sdsdv sv s dvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv s dvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv sdvsvsd vdsvsdvsd sdsdv sv s</div>
</body>
</html>


and css code



@charset "utf-8";

* {margin: 0; padding: 0; border: 0; outline: 0;}
body {
font-family: Tahoma;
font-size: 14px;
background-color: #FFFFFF;
margin:0px;
}
li {list-style:inside}

.Container{ position:relative; margin-left: auto; margin-right: auto; width:931px; text-align: left; background-color:#ffffff; }

.banner{width:931px; height:223px; background-image: url(Images/OM_HEADER_03.jpg); }
.menu{ width:698px; height:40px; float:right; background-image: url(Images/OM_menu_05_06.jpg); }
.menutext{ margin-right:30px; }
.building{ position:absolute; left:0px; top:235px; height:319px; width:307px; z-index:200; }
.content{width:931px; background-color:#bacded; margin-top:60px; border:1px solid #bbb5b5; margin-bottom:60px;}
.tagline{ width: 520px; float:right; padding:10px; margin-right:35px;}
.textbox1{width: 520px; float:right; background-color:#c5d7f4; border:1px solid #bbb5b5; padding:10px; margin-right:35px; }
.textbox2{width: 560px; float:left; background-color:#c5d7f4; border:1px solid #bbb5b5; padding:10px; margin-left:35px; margin-top:35px; }
.bulletone{width: 160px; float:left; margin-left:10px; }

.Addressline{margin-left: auto; margin-right: auto; width:931px; background-color:#bacded; border:1px solid #bbb5b5; clear:both; margin-top:5px;}


The site can be viewed at http://www.actioncomputing.co.uk/ACTIONOM/
If someone could try and explain to me what im doing wrong so I can put a end to my problems maybe with a little theory I would be very gratefull.

Rowsdower!
01-07-2010, 04:59 PM
By nature floated elements do no expand their containers vertically. If you add another element after all of your floats and give that element the style of clear:both; your page should fall in line. Alternatively in some cases you can give your container the style of overflow:auto; and get the same effect.

gmnightingale
01-07-2010, 05:38 PM
Thank you for your reply, I have used that before must be the xmas break messing my head up, One question for you though, What is the problem in IE5 with padding etc, My sites always look very strange in IE5 obviously the PNG problems but the margins and paddings seem to go nuts!

Rowsdower!
01-08-2010, 05:21 PM
I don't have IE5 on my machine right now so I can't test for the exact cause right now. I can say that your page has a few validation issues that you should clean up before trying to polish your CSS, though.

Take a look at these:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.actioncomputing.co.uk%2FACTIONOM%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

There is nothing too serious there, but they should be cleaned up anyway.

Other than that, maybe someone with IE5 will stop by and lend a hand... :D

Most developers don't worry too much about anything less than IE6 these days though.

Doctor_Varney
01-08-2010, 07:36 PM
Right I have been trying to do a very simple page in CSS for hours and hours now and I have drawn blood on my nuckles and pulled hair out!

I regret to inform you, this is only the beginning and once you've got this cracked, it will only get worse. Just take a look at my scalp.


Im really really at my wits end and thinking tables were so much easier!

They were. The upside is your page will be up and running in the course of the next four hours. The downside: Everyone here will laugh at you - but does that really matter? No. All that matters in life is that whatever your webpage contains, it makes you instant fast money to spend on booze and loose women. Though now I have no hair left and I have bitten my fingers down to stumps, this is looking increasingly less likely...

Good luck!

(Pinch of salt required...)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum