CSS and DIV tags - alignment help needed

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
compuXP
Forum Newbie
Posts: 17
Joined: Sat Feb 26, 2005 11:19 am

CSS and DIV tags - alignment help needed

Post by compuXP »

Hi,

I'm re-designing VibeWave.com internally so that instead of tables to primarily align content (which can be unpredictable sometimes) I am doing it in style sheets. Well, this is new land for me.

If you go to http://www.vibewave.com/test you'll notice how much I have completed (also am making it wider :D) - but I need help with the DIV to place the main content. I may also need help with those "Spotlighted Software" and "Featured Classified" tables, "quote of the moment" stuff, etc, too, once I get the main body DIV built.

So, can anybody get me started on how to build the body DIV for my website? (it's centered using stylesheets so I can't just do left: in the thingy)

Thanks,

-compuXP
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: CSS and DIV tags - alignment help needed

Post by Chris Corbyn »

compuXP wrote: So, can anybody get me started on how to build the body DIV for my website? (it's centered using stylesheets so I can't just do left: in the thingy)
:arrow: On a side note, you should put quotes around your attribute values...

Hmm. well I have a dirty habit of putting <center> at the top of the document and then putting text-align:left as a CSS attribute in everything else. It's a dirty habit though, but it works.

You're gonna need to use the CSS float attribute to get things sitting where you want them too. I can perhaps post a sample code if you really need some help.
compuXP
Forum Newbie
Posts: 17
Joined: Sat Feb 26, 2005 11:19 am

Post by compuXP »

gee, could you please? Thanks, because again, this is new water for my experience level.

About the quotes, I don't see a reason - although I do think that maybe it wouldn't validate with w3 or somethin....
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

compuXP wrote:gee, could you please? Thanks, because again, this is new water for my experience level.

About the quotes, I don't see a reason - although I do think that maybe it wouldn't validate with w3 or somethin....
If you want to include attributes as values, it won't display correctly:

Code: Select all

<input type=name value=my name is justin>
compuXP
Forum Newbie
Posts: 17
Joined: Sat Feb 26, 2005 11:19 am

Post by compuXP »

Well I know that - but everything is one word - actually one letter - so it works fine.

Can I have an example? :roll: thanks...
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

compuXP wrote:Can I have an example? :roll: thanks...
Patience dude. I do have other things to do too, like my own client work :roll:

You could always read up on the use of float at http://www.w3schools.com/css/ in the meantime. That's a good site BTW for educating yourself on CSS.
compuXP
Forum Newbie
Posts: 17
Joined: Sat Feb 26, 2005 11:19 am

Post by compuXP »

Yes, I'm sorry. I just feel so rushed because I'm the only programmer/movie reviewer/web designer/artist/member (almost)/advertiser on my site, all of which have an agenda about 100 pages long.

Yeah, I've been reading there. I got it to work in firefox! Now for dumb ol' IE... :( It works great on IE like a square hole with a round peg in it. :P
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

compuXP's source wrote: div#m{position: relative; left: 169; top: 60; padding-left: 3; padding-right: 3; width: 584; background-color: #FFFFFF}
This is due to IE and NS/Moz using the padding attribute in CSS differently. IE adds it to the total width, whereas NS includes it as part of the wdith. It's one of the biggest pains between the two.

I believe if you set a strict DOCTYPE then you can get IE to render correctly :idea:
compuXP
Forum Newbie
Posts: 17
Joined: Sat Feb 26, 2005 11:19 am

Post by compuXP »

Ah I knew that ;)

Okay... now as for doc type.... I put in a doc type (the default one that is inserted when you start a new PHP file with dreamwaver) and it totally got worse.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Is that right? I took it out but if you want to see it just ask and I can try to put it back up.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

No, don't use loose. This doctype is said to make IE6 completely CSS1 compliant... (Please shout at me if I'm providing false info here guys :? ).

Code: Select all

<!DOCTYPE HTML PUBLIC &quote;-//W3C//DTD HTML 4.0 Transitional//EN&quote;>
compuXP
Forum Newbie
Posts: 17
Joined: Sat Feb 26, 2005 11:19 am

Post by compuXP »

well, it doesn't help NOR hurt. So.... now what? :( Thanks though, for all the help.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

d11wtq wrote:No, don't use loose. This doctype is said to make IE6 completely CSS1 compliant... (Please shout at me if I'm providing false info here guys :? ).

Code: Select all

<!DOCTYPE HTML PUBLIC &quote;-//W3C//DTD HTML 4.0 Transitional//EN&quote;>
Close, but no cigar - you missed the important part...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The url at the end is what triggers strict/compliance mode. (Technically, its what turns OFF quirks mode).
Post Reply