CSS help! - Printable Version

CSS help! - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: CSS help! (/showthread.php?tid=63730)

CSS help! by welshboy222 on 07-21-2006 at 12:39 PM

I'm a bit stuck I need to make a CSS page where all the columns are the same I have a basic page here but I don't know how to make the columns the same can anyone help?

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>

<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>

RE: CSS help! by surfichris on 07-21-2006 at 12:56 PM

You're after 3 columns, right?

http://www.glish.com/css/7.asp
http://www.bluerobot.com/web/layouts/layout3.html
http://www.saila.com/usage/layouts/

and a whole lot more here:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Also - it helps when you ask for help if you can upload the contents of the page somewhere as it allows us to see

----

If you want your three column layout to have three equal columns and work properly in all browsers I would recommend the following:

- Head toward a fixed with layout as dividing DIVs up in to 3 columns and 33% doesn't work too nicely in some cases - especially if you're trying to fit your header in and be the same width.
- You could adopt (yeah yeah) a table based aproach which ensures there are no cross browser compatibility issues.

RE: CSS help! by welshboy222 on 07-21-2006 at 12:58 PM

Sorry about the upload thingy but I have nowhere to upload it and thanks!

RE: CSS help! by Sunshine on 07-21-2006 at 01:00 PM

Why don't you use tables instead of DIVs?

Tables are easy, you can set the width to a percentage of the totall width of the table....

Let's say you want 3 columns...then the widths would be 33%, 34% and 33%......4 columns is even easier...simple 25%

Example (3 columns) i use on my website:

<table border="0" width="100%" cellpadding="10">
<tr>
<td width="33%" valign="top">
everything you want to appear in column 1 goes here
</td>
<td width="34%" valign="top">
everything for column 2 inhere...
</td>
<td width="33%" valign="top">
everything for column 3 here...
</td>
</tr>
</table>

RE: CSS help! by welshboy222 on 07-21-2006 at 01:02 PM

Do you put this HTML in the body tag?

RE: CSS help! by Sunshine on 07-21-2006 at 01:04 PM

quote:
Originally posted by welshboy222
Do you put this HTML in the body tag?

Yes, what i put in my previous post is the actual content in the body.

RE: CSS help! by lordy on 07-21-2006 at 01:05 PM

quote:
Originally posted by welshboy222
Sorry about the upload thingy but I have nowhere to upload it and thanks!

Are you kidding?

I gave you hosting

RE: CSS help! by welshboy222 on 07-21-2006 at 01:06 PM

Oh yer lol forgot about that (doh) lol.

RE: CSS help! by surfichris on 07-21-2006 at 01:07 PM

quote:
Originally posted by Sunshine
Why don't you use tables instead of DIVs?

Tables are easy, you can set the width to a percentage of the totall width of the table....

Let's say you want 3 columns...then the widths would be 33%, 34% and 33%......4 columns is even easier...simple 25%

The reason people tend to move away from that is because of the fact that tables are designed to contain tabular data and fboth accessibility and usability issues (especially with screen readers) they're not liked for laying out a page. It come under semantics.

Like I said though, tables are the easiest way for you to do something like this and not have to worry about how it is going to appear in 10+ different browsers and browser versions.

You can also "set the width to a percentage of the total width" using a DIV approach however you still have to worry about getting floating and positioning correct in different browsers.

RE: CSS help! by welshboy222 on 07-21-2006 at 01:08 PM

Well I'm not a skilled person with HTML but i'll do my best to cope with all of this lol!

RE: CSS help! by Sunshine on 07-21-2006 at 01:19 PM

quote:
Originally posted by Chris Boulton

quote:
Originally posted by Sunshine
Why don't you use tables instead of DIVs?

Tables are easy, you can set the width to a percentage of the totall width of the table....

Let's say you want 3 columns...then the widths would be 33%, 34% and 33%......4 columns is even easier...simple 25%

The reason people tend to move away from that is because of the fact that tables are designed to contain tabular data and fboth accessibility and usability issues (especially with screen readers) they're not liked for laying out a page. It come under semantics.

Like I said though, tables are the easiest way for you to do something like this and not have to worry about how it is going to appear in 10+ different browsers and browser versions.

You can also "set the width to a percentage of the total width" using a DIV approach however you still have to worry about getting floating and positioning correct in different browsers.

All very true but seeing as welshboy222 doesn't seem that skilled yet i think he might want to take the easy approach. All depends somewhat on if he wishes to make every page use 3 columns (in wich case DIVs would be the ultimate way to go) or just one or two...

I've tried the DIV thing myself once but gave up due to the fact that i couldn't get it to center (horizontaly) in whatever screen resolution used (that's where i got stuck..lol)....not like i need all pages in 3 columns anyway myself.

I.o.w. as you already said: working with DIV's like that is a pain if you want cross browser compatibility...certainly not beginner material.

RE: CSS help! by ShawnZ on 07-21-2006 at 02:14 PM

quote:
Originally posted by Sunshine
I've tried the DIV thing myself once but gave up due to the fact that i couldn't get it to center (horizontaly) in whatever screen resolution used (that's where i got stuck..lol)....not like i need all pages in 3 columns anyway myself.

RE: CSS help! by RaceProUK on 07-21-2006 at 02:49 PM

That code will help me too

RE: CSS help! by Sunshine on 07-21-2006 at 03:32 PM

quote:
Originally posted by ShawnZ

quote:
Originally posted by Sunshine
I've tried the DIV thing myself once but gave up due to the fact that i couldn't get it to center (horizontaly) in whatever screen resolution used (that's where i got stuck..lol)....not like i need all pages in 3 columns anyway myself.

<div style="position:absolute; left: 0px; top:0px; width:33%;"></div>
<div style="position:absolute; left: 33%; top:0px; width:34%;"></div>
<div style="position:absolute; left: 67%; top:0px; width:33%;"></div>

Thanks

I might have a fiddle about with that when i feel like experimenting again.

Edit:

quote:
Originally posted by hmaster
Sunshine, the best way for centering is to tweak it like this:
http://bluerobot.com/web/css/center1.html

This way to do 2 columns is good as it makes all the columns the same height regardless of each seperate height:
http://www.cssplay.co.uk/layouts/3cols2.html

Thanks, that indeed does look good. Very useful not just for me but for all who strugle with this...

:banana:

RE: CSS help! by hmaster on 07-21-2006 at 03:41 PM

Sunshine, the best way for centering is to tweak it like this:
http://bluerobot.com/web/css/center1.html

This way to do 2 columns is good as it makes all the columns the same height regardless of each seperate height:
http://www.cssplay.co.uk/layouts/3cols2.html