SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help and critique.. (float:left woes)

    Hi Guys,

    After a 3 year break I'm starting to get back into coding. I'm essentially starting from scratch and was wondering if someone could give me some support/critique for this website:

    Test Project

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <title>Test Project</title>
    <link rel="stylesheet" href="style.css" /></head>
    <body>
    <div class="welcome">
     <span class="left">Welcome to My Test Website</span>
     <span class="right">Website information</span>
     </div>
      <div id="header">
      <a href="#"><img src="http://www.sitepoint.com/forums/images/header.gif" class="header_image" /></a>
      <a href="#"><img src="http://www.sitepoint.com/forums/images/ad.gif" class="advertisement" /></a>
      </div>
      <div class="navigation_bar_bg">
      <div class="navigation_bar_left">
       <div class="navigation_bar_right">
     
    <ul id="nav">
    		<li><a href="index.html">Home</a></li>
     
    		<li><a href="about.html">About</a></li>
    		<li><a href="portfolio.html">Portfolio</a></li>
    		<li><a href="contact.php">Contact</a></li>
    	</ul>
    	<span class="clear"></span>
    <ul id="mininav">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="about.html">About</a></li>
    		<li><a href="portfolio.html">Portfolio</a></li>
    		<li><a href="contact.php">Contact</a></li>
    	</ul>
     
     
        </div>
       </div>
      </div>
    </html>

    Code CSS:
    /* Main body */ 
     
    body {
    background: #1f2731 url(images/gradient_bg.gif) repeat-x;
    margin: 0px;
    }
     
    .welcome {
    background: url(images/topbar.gif) top center;
    height: 28px;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    padding-top: 14px;
    }
     
    /* Welcome bar and header */
     
    .left {
    margin-left: 136px;
    float:left;
    clear:left;
    }
     
    .right {
    margin-right:136px;
    float:right;
    clear:right;
    }
     
    .clear {
    clear:both;
    height: 1px;
    }
     
    #header {
    background: url(images/header_bg.gif) top left;
    height: 97px;
    padding: 0 129px;
    }
     
    .header_image {
    margin-top: 21px;
    }
     
    .advertisement {
    float:right;
    margin-top: 19px;
    }
     
    /* Navigation bar */
     
    .navigation_bar_bg {
    background: url(images/nav_bg.gif) repeat-x top left;
    height: 88px;
    margin: 0 106px;
    }
     
    .navigation_bar_right {
    background: url(images/nav_bar_right.gif) no-repeat top right;
    height: 88px;
    }
     
    .navigation_bar_left {
    background: url(images/nav_bar_left.gif) no-repeat top left;
    }
     
     
    #nav {
    	float: left;
    	margin-top: 7px;
    	margin-left: -25px;
    }
     
    #nav li {
    	float: left;
    	list-style: none;
    	height: 46px;
    	width: auto;
    	text-align: center;
    }
    	#nav a {
    		display: block;
    		padding: 0px;
    		height: 46px;
    		line-height: 46px;
    		width: 82px;
    		text-decoration: none;
    		font-family: arial;
    		font-size: 14px;
    		font-weight: bold;
    		color: #FFF;
    	}
    		#nav a:hover {
    			background: url(images/nav_hover.gif) repeat-x top left;
    			color: #f7cf39;
    		}
     
     
    #mininav {
    	float: left;
     
    }
     
    #mininav li {
    	float: left;
    	list-style: none;
    	height: 46px;
    	width: auto;
    	text-align: center;
    }
    	#mininav a {
    		padding: 0px;
    		line-height: 32px;
    		text-decoration: none;
    		font-family: arial;
    		font-size: 12px;
    		font-weight: normal;
    		padding: 0 14px;
    		color: #5e6d75;
    	}

    I need help with

    1) Clearing the floats, I've lost all concept of clearing and have no idea why I cannot clear the second <ul>
    2) Ideas on how to write cleaner code than
    Code HTML4Strict:
      <div class="navigation_bar_bg">
      <div class="navigation_bar_left">
       <div class="navigation_bar_right">
        </div>
    </div>
    </div>

    To achieve the effect of a fluid rounded corner box.
    3) General critique/thoughts as to the quality of the code.

    Thanks SP
    Last edited by ralph.m; Jul 6, 2011 at 16:27.

  2. #2
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just an update: After reading around I've fixed my float problem - at the expense of adding more <div>'s. I'd really appreciate any alternatives to this solution or the solution used to achieve the rounded corners of the box that has the navigation in it?

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    a favoured clearing method is giving the element "overflow:hidden;" It TOTALY ELIMINATES the need for having CLEARING ELEMENTS in the markup. (Thanks Paul OB)

    As far as rounded corners, well i assume you are going of full IE6 support, otherwise I'd just use CSS3's border-radius property and eliminate ALL markup that is there solely for the purpose of making the corner.

    If you are going all retro, I suppose your method is not too bad, but i will submit my standard practice for this.

    Code:
    <div id="sidebar">
    <div class="top"><b></b></div>
    <div class="box_content">
    <div class="bot"><b></b></div>
    </div>
    the only draw back is if you had a fading bg. It looks like a lot of code , but actually it syncs with your regular code easily.

    <div class="top"><b></b></div> & <div class="bot"><b></b></div> are simply sliding doors, you can alos ad any top/bottom margin and clears for layout to these classes... further slimming your code overall, after that you can either contain your content in a .box_content div, or merely add the class to the BLOCK element itself . #sidebar was there to indicate the rest of the layout.

    hope that helps

  4. #4
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your suggestions. Out of interest, why do you use <b> inside the <divs>?

    I was hoping that IE6 would disappear in my absence . I'll have to view the user stats for it and see whether it is worth the hassle. God I hate that browser.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Your link now points at a copy of IPB instead of the code you posted here, but for the most part I'm stuck wondering why you're using spans on a heading element and... well, I don't even semantically know what the other bit is... anchor for what also appear to be a heading element with a presentational image in the markup, multiple DIV for what I suspect need no div, a clearing DIV like it's still 2001, and no idea what you're trying to do with the second menu either.

    Though that IPB skin makes me want to punch myself in the face -- several k of static inlined CSS, content cloaking of a header you should be overrriding...

    Though it's been at least five or six years since I even poked my head under the hood of IPB, I can see little has changed with their "let's use 100k of HTML to deliver 1.1k of plaintext and ten form elements" bloat... mostly built on decade out of date coding practices.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by iTechno View Post
    Thank you for your suggestions. Out of interest, why do you use <b> inside the <divs>?
    Because its less code than using a span and b is almost (but not quite) semantically neutral. It also unlikely that you will be targeting a b element in that section but 99% likely you would be targeting a span so also avoids conflict issues.

    Some people hate using the b element but I think that its neutral enough not to worry. If it worries you then just use a span.

    I was hoping that IE6 would disappear in my absence . I'll have to view the user stats for it and see whether it is worth the hassle. God I hate that browser.
    IE6 usage in the west is very low and as long as the page is usable I wouldn't worry abut round corners or other advanced features. However IE7 and 8 still don't under border-radius so you will have to make a choice whether to support them or not. Remember once you add extra html then its stuck there for all time most likely.


Bookmarks

Posting Permissions

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