navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

3 Column CSS layout sorted!!!!

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> 3 Column CSS layout sorted!!!!
Page: [1]
 
Giomanach

 

Posts: 6090
Joined: 11/19/2003
From: England
Status: offline

 
3 Column CSS layout sorted!!!! - 6/21/2004 15:50:31   
HOORAH!!!!!!

I finally found the answer...

Deb, your gonna be so proud of me lol. Haven't tested in Netscape, but it works in IE, Firefox and Opera, so I am assuming it works in Netscape. Here's the stylesheet:

body{
	margin: 0;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial, Sans-serif;
	background: #FFFFFF;
}

a{
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}

a:hover{
	text-decoration: underline;
}

#title{
	position: absolute;
	width: 100%;
	height: 70px;
	left: 2px;
	font-size: 48px;
	font-weight: bold;
	font-style: italic;
	background: #EFEFEF;
}

#titleshadow{
	position: absolute;
	width: 100%;
	top: 2px;
	left: 4px;
	font-size: 48px;
	font-weight: bold;
	font-style: italic;
	color: #CCCCCC;
}

#slogan{
	position: absolute;
	top: 50px;
	left: 60px;
	font-size: 13px;

}

#nav{
	position: absolute;
	top: 70px;
	width: 100%;
	verticaL-aling: middle;
	text-align: center;
	font-size: 14px;
	border-top: 1px solid #CFCFCF;
	border-bottom: 1px solid #CFCFCF;
	background: #EEEEEE;
	left: 0px;

}

#nav a{
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

#services{
	position: absolute;
	top: 90px;
	width: 130px;
}

.copyright{
	font-size: 10px;
	font-weight: bold;
}

#content{
	position: absolute;
	top: 95px;
	left: 140px;
	right: 140px;
}


legend{
	font-size: 12px;
	font-weight: bold;
}

.red{
	color: #FF0000;
}

.title{
	font-size: 24px;
	padding: 0;
	font-weight: bold;
}

#links{
	position: absolute;
	right: 0px;
	top: 95px;
	width: 135px;
}

fieldset{
	font-size: 10px;
}


Where was I going wrong all this time? Here's your answer:

You Don't Set A Width For The Middle Column

You just tell it how far from the left, and how far from the right or the browser edge, and it works fine. You only need to set a width for the two outer columns, and then define how far from the left and right the middle column needs to sit. Working Example: http://www.giomanach.com/anti-spam

:):)

Dan

<edit>
Please note - Working Example is a site under construction...
</edit>

< Message edited by Giomanach -- 6/21/2004 16:18:06 >


_____________________________



c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/21/2004 17:37:53   
Dan, I know on some layouts you don't need to set the width of the middle column. I'm not sure though about all types of layouts.(When I say different layouts what I mean is absolute, realtive float etc.) The one that I am working on is a floated layout. If you go HERE you will find several different layouts.

Good job though letting us know what you found out. I'm sure that it will help a good bit. I know I didn't think about trying this, and it seems to be the obvious thing to do:)

< Message edited by c1sissy -- 6/21/2004 17:40:12 >


_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6090
Joined: 11/19/2003
From: England
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/21/2004 23:15:50   
Deb it does work with floats, as long as the positioing is absolute for the middle column. It should work for relative to, lemme see....

< Message edited by Giomanach -- 6/21/2004 23:16:30 >


_____________________________




(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/22/2004 8:58:30   
quote:

ORIGINAL: Giomanach

Deb it does work with floats, as long as the positioing is absolute for the middle column. It should work for relative to, lemme see....


I have it on the one page I am working on, and I don't have absolute positioning on mine. So its going to be interesting to see the combos it works and doesn't work on.

One thing I'm runing into is the last column jumping, which is an IE bug.

I'm going to create a try #5 and try some different thigns with it to see how it works out.
http://giftdirectory.com/gift3.html
Above is where I have it right now in try outs.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6090
Joined: 11/19/2003
From: England
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/22/2004 9:02:16   
I can't see any foreseeable problems in the CSS, apart from the fact that you have set widths for all three, not just the out two, and as for relative positioning:

You need to use a negative figure for the middle column, from top, not good

Dan

_____________________________




(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/22/2004 9:05:33   
Dan, negatives are recomended for positioning.:)

And there is a reason for the negative, it needs to be on the nav section for a reason.

Looking at css for the third one you won't see a width for the middle column. Its listed as bleft. No width set on it at all.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Giomanach

 

Posts: 6090
Joined: 11/19/2003
From: England
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/22/2004 9:09:02   
I don't like using negatives for position b'cos it tends to leave a large gap at the bottom of the page in IE:), or is that b'cos I use relative on all elements of the page?

Lemme see if I can get a 3 column sorted that works WITH floats, relatives and absolutes......after I've finished client work lol, and the new anti-spam web....

_____________________________




(in reply to c1sissy)
c1sissy

 

Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: 3 Column CSS layout sorted!!!! - 6/22/2004 9:13:02   
The gap could be a mix of just about anything.

I like the layout that I have right now. It has come a long way. And I like solving the problems by working on them and working them out as it helps me to learn. Which is why I have several version of the page now. I was doing so much changing that I just decided that each change I do I would just create a new version of the page with the previous changes still there to view if I needed to.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Giomanach)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> 3 Column CSS layout sorted!!!!
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts