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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts

    3 Issues With CSS Layout

    Hi all.

    I'm trying to redesign my site without using tables for layout. It's so very very hard to resist the urge just to drop a simple table in but I figured I would try here as a last ditch attempt

    The problem page can be viewed at http://www.board-crazy.co.uk/newsite/

    And here is the markup I am using:

    Code:
    body {
    	margin: 0px;
    	background-color: #FFFFFF;
    	}
    	
    #grey {
    	margin: 10px;
    	padding: 10px;
    	background-color: #333333;
    	}
    
    #container {
    	background-image: url(../layout/background.jpg);
    	background-repeat: repeat-x;
    	background-position: top;
    	background-color: #C9E1E7;
    	border: 1px solid #C9E1E7;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #header {
    	background-image: url(../layout/graphic.jpg);
    	background-repeat: no-repeat;
    	background-position: top right;
    	height: 200px;
    	padding: 0px;
    	margin: 0px;
    	}
    	
    	#content {
    		background-image: url(../layout/lowergraphic.jpg);
    		background-repeat: no-repeat;
    		background-position: top right;
    		padding: 0px 0px 20px 20px;
    		margin: 0px;
    		}
    		
    	#nav {
    		padding: 0px 30px 20px 10px;
    		margin: 0px;
    		float: right;
    		width: 220px;
    		height: 100%;
    		}
    Code:
    <body>
    <div id="grey">
    <div id="container">
    
    	<div id="header">
               [written content -  header]
    	</div><!-- EOF HEADER -->
    	
    	<div id="content">
    
    		<div id="nav">
    			[written content - links]
    		</div><!-- EOF NAV -->
    
    		[written content - main stuff]
    	</div><!-- EOF CONTENT -->
    </div><!-- EOF CONTAINER -->
    </div><!-- EOF GREY -->
    </body>
    My three issues are...

    1) (Fairly obviously) the gap appearing between the #header and #content divs. This sort of mysterious gap has been a persistent problem with CSS layouts I attempt so I can't help thinking there is something fundamentally flawed in my approach.

    2) Applying height 100% to the #nav div has made it span the entire height of the written content to the left in firefox, but the content wraps around the links in IE. I figured the height 100% was probably a bit of a janky way to do things but as you see I am trying to replicate a two column table effect.

    3) In the HTML markup I'd like to be able to place the #nav div below the written content as you would in a table based layout, while still having it appear parallel at the top with the #content div - how might this be achievable?

    Thank you in advance for anything you can bring to the table.

    -

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Board Crazy Boarding</title>
    <style type="text/css">
    body {
    	margin: 0px;
    	background-color: #FFFFFF;
    	}
    	
    #grey {
    	margin: 10px;
    	padding: 10px;
    	background-color: #333333;
    	}
    
    #container {
    	background-image: url(../layout/background.jpg);
    	background-repeat: repeat-x;
    	background-position: top;
    	background-color: #C9E1E7;
    	border: 1px solid #C9E1E7;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #header {
    	background-image: url(../layout/graphic.jpg);
    	background-repeat: no-repeat;
    	background-position: top right;
    	height: 180px;
    	padding: 0px;
    	margin: 0px;
    	}
    .sitenav {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    }
    .title {
    	font-size:90%;
    	}	
    #content {
    	padding: 0px 0px 20px 20px;
    	margin: 0 270px 0 0;
    	}
    #nav {
    	background-image: url(../layout/lowergraphic.jpg);
    	background-repeat: no-repeat;
    	background-position: top right;
    	padding: 30px 30px 20px 10px;
    	margin: 0;
    	list-style-type:none;
    	float: right;
    	width: 220px;
    	}
    .clear {
    	clear:both;
    	font-size:1px;
    	line-height:0px;
    	}
    </style>
    </head>
    
    <body>
    <div id="grey">
    <div id="container">
    	<div id="header">
    		<h1 class="title">BOARD CRAZY SKATEBOARDING</h1>
    		<ul class="sitenav">
    			<li><a href="skateboarding-articles.php" title="Skateboarding Article Archive">SKATEBOARDING ARTICLES</a></li>
    			<li><a href="tricktionary.php" title="Skateboarding Trick Dictionary">TRICKTIONARY</a></li>
    			<li><a href="skate-reviews.php" title="Reviews Of Skateboarding Products">REVIEWS</a></li>
    			<li><a href="skate-shop.php" title="Skateboarding Shop">SKATE SHOP</a></li>
    		</ul>
    	</div><!-- EOF HEADER -->
    		<ul id="nav">
    			<li><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    			<li><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    			<li><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    			<li><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    			<li><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    		</ul><!-- EOF NAV -->
    	<div id="content">
    		[written content - main stuff]
    	</div><!-- EOF CONTENT -->
    	<div class="clear">&nbsp;</div>
    </div><!-- EOF CONTAINER -->
    </div><!-- EOF GREY -->
    </body>
    </html>
    Note the clearing div, this is needed so Firefox knows there is content still in the containing element. You need to do this when you are using floats. Also its more semantical to use a list for your navigation. And that mysterious gap, well that one was common sense, your header background image was only 180px high yet you set the header to 200px high. Do you see where I'm going with this?

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    Thank you, Aerospace Engineer, if indeed that is your real name...

    Note the clearing div, this is needed so Firefox knows there is content still in the containing element.
    I needed to put a footer div in anyhow, perhaps if I'd completely marked up my HTML before worrying about things I might have got there on my own. A valuable lesson there somewhere.

    Also its more semantical to use a list for your navigation.
    Those links were temporary content just to get stuff padded out, and as more than just a list of links will be going in the right column I turned that back to a div which has worked out fine.

    And that mysterious gap, well that one was common sense, your header background image was only 180px high yet you set the header to 200px high. Do you see where I'm going with this?
    *cough* Intelligent? Who me?

    You know, sometimes I think this forum should be renamed from coding forums to 'mercilessly shame yourself forums'.

    Okay, well one of the most gratifying things about this whole redesign is that the site really does look absolutely identical in FF and IE - apart from one nagging minor point which I'm wondering if anyone can shed some light on - in IE, if you keep scrolling to the bottom of the page and back up again repeatedly the dark grey border at the bottom changes size or disappears each time?

    Also, although the layout works fine I would like to place the right hand column below the content div in the source code - is this possible?

    http://www.board-crazy.co.uk/newsite/
    Last edited by Pennimus; 12-15-2005 at 08:19 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make grey position:relative; that may fix the disappearing border problem though setting a border of 10px of color #333333 on the container would probably be a better idea. Putting the right column below the html and still keeping it right, sure but not by using a float. Make the #container position:relative; and absolutely position the right column. You can then put the html wherever you want.


  •  

    Posting Permissions

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