Simple CSS Question

I'm looking to set up a layout which is fixed and centered - what is the best way of doing so?

I'm running into a few problems. I can't get the columns (left and right) to hug the centre column on either side - there's usually a gap between centre and left - & centre and right.

What would be the best way to go about correcting these gaps?
 
If there are gaps, then I imagine you haven't calculated the widths of each column correctly, and/or you have given an unwanted left/right margin to one or all of the columns.

Check the widths first, and then the margins.
 
I had downloaded a template and tried to manipulate it - but it's best I started from scratch - which is what I have done this time around.

Whether it's right (in terms of how it's coded) I'm not sure, but I'll slash it up here anyway.

Template Visual -- A tad rough, I know.

I'm unsure of how to go about the text element of the site. The orange>white gradients and black>white gradients are backgrounds on the divs, so obviously any text would be under/overlapping them. (As shown with 'test')

I assume some sort of padding/margin would be the trick here? Problem is when I padd the column (middle) it jumps over to the right and overlaps the right column.

If I padd the columns, then the backgrounds don't look correct. They would have space either side within the column.

The other idea I had was to give the text inside the column, a div of it's own and have that padded - so the text would be padded within a div, within the column div.

Yes, I'm very new to CSS and am complicating it already. :D

Any suggestions in regards to this? I've probably did the lot wrong - but I don't mind if it teaches me something for the future.

StyleSheet
Code: 
/*  CSS   */     

body {   background: url(images/background.png) repeat-x;  
}    

#topcolumn {  
position: absolute;  
height: 140px;  
width: 860px;  
border: 1px solid #000000;  
}    

#leftcolumn {  
position: absolute;  
top: 155px;  
height: 600px;  
width: 170px;  
background: url(images/column.png);  
border-top: 1px solid #000000;  
}    

#centrecolumn {  
position: absolute;  
width: 500px;  
height: 650px;  
left: 189px;  
border-top: 1px solid #000000;  
top: 155px;  
background: url(images/content.png);  
}    

#rightcolumn {  
position: absolute;  
left: 700px;  
top: 155px;  
height: 600px;  
width: 170px;  
background: url(images/column.png);  
border-top: 1px solid #000000;    
}

Index
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>
	<title>Title</title>
	<meta http-equiv="Content Type"
	content="text/html; charset=utf-8" />
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topcolumn">
</div>

<div id="leftcolumn">
</div>

<div id="centrecolumn">
Test
</div>

<div id="rightcolumn">
</div>
</body>
</html>
 
Anyone got any idea?

I don't usually like to bump posts - but I'm sort of restricted as this is the next thing I need to learn before doing anything else.
 
Phaser said:
Whatever padding you add, don't forgot to take the exact same amount off the overall width.
Click to expand...

Cheers for that.

By overall width, do you mean the column that the padding is going into or all the columns on the page?
 
Slogan said:
By overall width, do you mean the column that the padding is going into or all the columns on the page?
Click to expand...
The column the padding is going into. For example, if you add 10px of padding to all sides of "column-a", then the space that "column-a" takes up will increase by 20px (10px each side).

So, if you don't want "column-a" to take up any more space when you add padding to it, you must reduce the width appropriately.
 
Ah yes, I see. Makes sense.

Thanks for your help (Augmented & Phaser) - no doubt this will be revived when I run into the next thing. :)
 
The padding worked a treat.

However, I have navigation down the left hand column.

Problem is, it should be like the following:


Home

News

General
Technology
Sport

Entertainment

Music
Movies and TV
Gaming

IYO

Forums
Blogs
POTW
Affiliates
About
Contact

--

What is the best way to go about this?

I was 'taught' to use some sort of a list (unordered, ordered, whatever the case may be) - however, when I put these into a list, they jolt to the right.

I've set the list properties in the style sheet to ignore any padding or margin - but nothing changes when I do this.

Would the padding settings in the left column (of which the ol/ul will be in, admittedly) be causing the problem? :confused:

I used </br> after each link (bad coding, no doubt) - but Firefox didn't like this; "General Technology Sport". Opera and IE showed it normally though.

Here is an image to better explain what I'm rambling about;

Image

News has got the links in a list, as opposed to the other ways (Entertainment & IYO) : how I want them to be.
 
I think this is what you want, and this is what is does: A Nice List of Links

CSS
Code: 
*, html, body{margin: 0; padding: 0;}
#leftcolumn ul{list-style: none;}
#leftcolumn h3{padding: 10px 0;}
HTML
Code: 
<div id="leftcolumn">
<h3>Navigation</h3>
<ul>
<li><a href="#">Home</a></li>
</ul>
<h3>News</h3>
<ul>
<li><a href="#">General</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sport</a></li>
</ul>
<h3>Entertainment</h3>
<ul>
<li><a href="#">Music</a></li>
<li><a href="#">Movies and TV</a></li>
<li><a href="#">Gaming</a></li>
</ul>
<h3>IYO</h3>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">POTW</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
 
LazyManc said:
If you're using an unordered list, then you don't need the <br /> (and shouldn't use it as it's incorrect) as it will place each list item on a new line by default.
Click to expand...

The problem with the list was that it was indenting. Whether that's standard with the lists I don't know.

I'm very new to the whole thing and will take advantage of that link, thanks.

Mr_L said:
I think this is what you want, and this is what is does:
Click to expand...

That did the trick. :) Cheers.

--

Two more things before I shoot off and learn a bit more (I thought I knew a good bit, but turns out I don't know a great deal :o )

- When you select the text in my centre column, the navigation (the left column) becomes selected as well.

It only seems to do this in IE (6); with Opera and Firefox selecting it, as it should.

Is it something that's easily fixed or down to IE 6's non-friendly view on CSS?

--

Secondly, what's the best way to go about centreing a website in CSS?

(Must.Do.Better)
 
Just to smack this up a bit. I've got three 'simple' questions:

Site

1: What can I do to fix my site up in IE? The columns have all moved about a bit and the image-top can clearly be seen coming down onto the background colour.

It looks half decent (for what I know in CSS) in Opera and Firefox - but obviously a good % of the people out there are still using IE.

I thought IE7 would cure things - but the same problems are occuring in there as well.

2: For my centre column, is there any way that I can have the 'height' of the column extend to fit the amount of text in there?

The problem is that there will obviously be articles of all different lengths and sizes - so to change the height manually everytime would obviously be massively inconvenient.

And lastly: I wish to have a footer image at the bottom of my centre column (detailing copyright, maybe a link or something). But I'm unsure how to do this, given the 2nd problem mentioned above.

Anyone got any ideas?
 
You must log in or register to reply here.
Back
Top Bottom