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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Going CRAZY with CSS

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

    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.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    gmnightingale (01-07-2010)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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=ht...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...

    Most developers don't worry too much about anything less than IE6 these days though.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by gmnightingale View Post
    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...)
    Last edited by Doctor_Varney; 01-08-2010 at 07:39 PM.


  •  

    Posting Permissions

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