...

View Full Version : 3 Issues With CSS Layout



Pennimus
12-14-2005, 10:19 PM
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 :D

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

And here is the markup I am using:



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%;
}



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

-

_Aerospace_Eng_
12-14-2005, 11:56 PM
Try this

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

Pennimus
12-15-2005, 08:16 PM
Thank you, Aerospace Engineer, if indeed that is your real name...:rolleyes:


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/

_Aerospace_Eng_
12-15-2005, 10:17 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum