Simple CSS Question

Slogan · 20 Oct 2006 at 03:37

>>

I've answered every question I had. I truly feel like a CSS wizard.

Thanks.

Slogan · 20 Oct 2006 at 17:05

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?

Slogan · 21 Oct 2006 at 00:24

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.

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>

Slogan · 23 Oct 2006 at 07:34

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.

Slogan · 23 Oct 2006 at 13:26

Phaser said:
Whatever padding you add, don't forgot to take the exact same amount off the overall width.

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 · 23 Oct 2006 at 14:20

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.

Slogan · 24 Oct 2006 at 18:06

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.

Slogan · 26 Oct 2006 at 02:16

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.

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:

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

)

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

Slogan · 11 Nov 2006 at 16:04

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?