What happened to the Messenger Plus! forums on msghelp.net?
Shoutbox » MsgHelp Archive » Skype & Technology » Tech Talk » CSS help!

Pages: (2): « First [ 1 ] 2 » Last »
CSS help!
Author: Message:
welshboy222
Full Member
***

Avatar

Posts: 325
Reputation: 4
29 / Male / –
Joined: Apr 2006
Status: Away
O.P. Undecided  CSS help!
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>

If the worst comes to the worst eat a cake makes you feel better!
07-21-2006 12:39 PM
Profile E-Mail PM Find Quote Report
surfichris
Former Admin
*****

Avatar

Posts: 2365
Reputation: 81
Joined: Mar 2002
RE: CSS help!
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.
07-21-2006 12:56 PM
Profile PM Find Quote Report
welshboy222
Full Member
***

Avatar

Posts: 325
Reputation: 4
29 / Male / –
Joined: Apr 2006
Status: Away
O.P. RE: CSS help!
Sorry about the upload thingy but I have nowhere to upload it and thanks!
If the worst comes to the worst eat a cake makes you feel better!
07-21-2006 12:58 PM
Profile E-Mail PM Find Quote Report
Sunshine
Elite Member
*****

Avatar

Posts: 5141
Reputation: 122
– / Female / Flag
Joined: Mar 2004
Status: Away
RE: CSS help!
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>

This post was edited on 07-21-2006 at 01:01 PM by Sunshine.
[Image: 25dr3o9]
07-21-2006 01:00 PM
Profile E-Mail PM Web Find Quote Report
welshboy222
Full Member
***

Avatar

Posts: 325
Reputation: 4
29 / Male / –
Joined: Apr 2006
Status: Away
O.P. RE: CSS help!
Do you put this HTML in the body tag?
If the worst comes to the worst eat a cake makes you feel better!
07-21-2006 01:02 PM
Profile E-Mail PM Find Quote Report
Sunshine
Elite Member
*****

Avatar

Posts: 5141
Reputation: 122
– / Female / Flag
Joined: Mar 2004
Status: Away
RE: CSS help!
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.
[Image: 25dr3o9]
07-21-2006 01:04 PM
Profile E-Mail PM Web Find Quote Report
lordy
Senior Member
****


Posts: 853
Reputation: 24
35 / Male / Flag
Joined: Jul 2004
Status: Away
RE: CSS help!
quote:
Originally posted by welshboy222
Sorry about the upload thingy but I have nowhere to upload it and thanks!
Are you kidding? :P I gave you hosting :P
07-21-2006 01:05 PM
Profile E-Mail PM Find Quote Report
welshboy222
Full Member
***

Avatar

Posts: 325
Reputation: 4
29 / Male / –
Joined: Apr 2006
Status: Away
O.P. RE: CSS help!
Oh yer lol forgot about that (doh) lol.
If the worst comes to the worst eat a cake makes you feel better!
07-21-2006 01:06 PM
Profile E-Mail PM Find Quote Report
surfichris
Former Admin
*****

Avatar

Posts: 2365
Reputation: 81
Joined: Mar 2002
RE: CSS help!
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.
07-21-2006 01:07 PM
Profile PM Find Quote Report
welshboy222
Full Member
***

Avatar

Posts: 325
Reputation: 4
29 / Male / –
Joined: Apr 2006
Status: Away
O.P. RE: CSS help!
Well I'm not a skilled person with HTML but i'll do my best to cope with all of this lol!
If the worst comes to the worst eat a cake makes you feel better!
07-21-2006 01:08 PM
Profile E-Mail PM Find Quote Report
Pages: (2): « First [ 1 ] 2 » Last »
« Next Oldest Return to Top Next Newest »


Threaded Mode | Linear Mode
View a Printable Version
Send this Thread to a Friend
Subscribe | Add to Favorites
Rate This Thread:

Forum Jump:

Forum Rules:
You cannot post new threads
You cannot post replies
You cannot post attachments
You can edit your posts
HTML is Off
myCode is On
Smilies are On
[img] Code is On