Forum Moderators: not2easy
I have a cold, and instead of going out tonight (er, last night now) I spent 16 hours straight learning the basics of CSS so I can completely rewrite my main site. Eeeek!
Unfortunately, I think I'm banging my head up against an e-wall trying to do something that can't be done.
Specifically, I'd like to be able to:
- have a 2 column set-up, content in left pane, nav in right pane
- have the content listed first in the HTML
- have the nav pane set at 150 pixels, and the content pane the REMAINDER of the browser
- ideally have this work in NN4.x as well (eegads!)
I've figured out how I can do almost the above, but with the nav pane on the left. But I don't like that, since it's not the look I want, and I also fear that search engines may penalize me for having the nav stuff ahead of the content (though I suppose I could use SSI includes).
Anyway, apologies in advance if I'm missing something really obvious here, and thanks for any advice you can offer.
Regards,
Adam
I'm just learning myself at this point, so I can't give you any hard and fasts, but this is a fabulous thread in which Rhys has a 3 col liquid CSS layout that works in NN4:
[webmasterworld.com...]
You might be able to find an answer in there.
Good luck :)
[edited by: SuzyUK at 4:03 pm (utc) on July 24, 2004]
[edit reason] link moved, so replaced with correct one [/edit]
Here's one that works in everything except nn4 (only tested in Moz but should be fine)
[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
color: #00000;
background-color: #FFFFFF;
}
#right {
position: absolute;
top: 50px;
right: 0px;
width: 150;
border: 1px solid #000000;
}
#content {
position: absolute;
top: 50px;
padding-right: 200px;
}
</style>
<title>2 column layout</title>
</head>
<body>
<div id="content"> <p>Here is your content div with a padding of 170px on the
right side to accomodate the navigation panel</p>
</div>
<div id="right">
<p>this is the right nav panel</p>
</div>
</body>
</html>
[/pre]
Nick
I am really getting to the point where I'm just ready to say "screw it!" to those using NN4.x and other screwy ancient browsers.
I'm running a darn personal/entertainment site, not a government agency site with 100% accessibility requirements... so, forgive me for sounding cranky :D
Regards,
[edited by: Brett_Tabke at 4:40 am (utc) on Sep. 2, 2002]
[edit reason] no sig files please. [/edit]
that's my advice...I redid our two sites last year...the first took ages because I tried to keep the same design as the old table version...the second was much easier since I was allowed to build to a completely new look...I'm happy with the second site...the first is going to bug me until early next year when I get to hack it apart and build again from the content up as part of a complete rebranding
I spent another ton of hours last night evaluating what layout I wanted (I've decided to go with a 3-column dealie), and soon I'll be completely starting from the ground up.
I'll take the text (and text only) from my old site and cut and paste it into new pages in a "/wwwnew" directory, then slowly and methodically apply styles to it and shift content from one div (column) to another as warranted.
It's gonna take a long time, but I'm excited and convinced it's worth it.
If only I could get over the guilt of giving NS 4.x people the finger. I've thought and thought and thought about supporting them with separate stylesheets, but the bottom line is... I'm gonna have to let go eventually, and it might as well be a clean break.
[self-edited to remove sig]
[edited by: ThatAdamGuy at 2:21 am (utc) on Sep. 2, 2002]
I have gotten Nicks example to work also in NN4, serving it a different stylesheet with the attributes changed
#right {position: absolute;
top: 50px;
left: 75%;
margin: 0px;
width: 150px; }
#content { margin: 0px 200px 40px 10px; }
Note, numbers are not tested, you have to play around with them to see how they work for the screen dimensions you are aiming for, I figure that NN4 users are less likely to be on big monitors, so adjust to suit. This is a less precise layout than the newer browser stylesheet, but does use the same html to get a decent looking page to NN4.
Thanks much for the NN4 mod! I will give that a try.
Also thanks for the prod to remove my sig. I'm used to including it on less-sophisticated boards that do not include a profile option, and given your reminder, I realize that including the same URL's here is a bit redundant.
