homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS question for dummies
Er, okay, so I'm the dummy, but... :D
ThatAdamGuy




msg:1216326
 11:29 am on Aug 31, 2002 (gmt 0)

Hi there,

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

 

deejay




msg:1216327
 11:59 am on Aug 31, 2002 (gmt 0)

Hi 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]

Nick_W




msg:1216328
 12:20 pm on Aug 31, 2002 (gmt 0)

I'm pretty certain you won't get the 150px length to work with that example...

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

ThatAdamGuy




msg:1216329
 8:48 pm on Aug 31, 2002 (gmt 0)

Hey, thanks!

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]

Eric_Jarvis




msg:1216330
 12:26 am on Sep 2, 2002 (gmt 0)

don't shift to css until you are ready to do a complete redesign...it's far easier to rip the whole lot up and build again to make best use of the additional flexibility of css

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

ThatAdamGuy




msg:1216331
 1:33 am on Sep 2, 2002 (gmt 0)

You're absolutely right.

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]

SmallTime




msg:1216332
 2:10 am on Sep 2, 2002 (gmt 0)

ThatAdamGuy - I would remove those url signatures pronto.

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.

ThatAdamGuy




msg:1216333
 2:20 am on Sep 2, 2002 (gmt 0)

Smalltime,

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.

SmallTime




msg:1216334
 2:26 am on Sep 2, 2002 (gmt 0)

your welcome.
re sigs,they are also against the TOS
[webmasterworld.com...]
It helps keep the forums clean and useful.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved