Page 1 of 1

CSS and DIV tags - alignment help needed

Posted: Sat Mar 12, 2005 2:21 pm
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

Re: CSS and DIV tags - alignment help needed

Posted: Sat Mar 12, 2005 3:56 pm
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.

Posted: Sat Mar 12, 2005 4:10 pm
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....

Posted: Sat Mar 12, 2005 4:35 pm
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>

Posted: Sat Mar 12, 2005 6:30 pm
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...

Posted: Sat Mar 12, 2005 7:49 pm
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.

Posted: Sat Mar 12, 2005 7:53 pm
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

Posted: Sat Mar 12, 2005 8:07 pm
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:

Posted: Mon Mar 14, 2005 5:09 pm
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.

Posted: Mon Mar 14, 2005 5:34 pm
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;>

Posted: Mon Mar 14, 2005 7:06 pm
by compuXP
well, it doesn't help NOR hurt. So.... now what? :( Thanks though, for all the help.

Posted: Mon Mar 14, 2005 9:17 pm
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).