|
| |
|
|
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 >
_____________________________
|
|
|
|
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 >
_____________________________
|
|
|
|
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/
|
|
|
|
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
_____________________________
|
|
|
|
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/
|
|
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
|
|
|