DOM help

randombar

Hi Lads,
I'm switching this site MedRevision.org over to div's etc to get it validated and what not, I'm still kinda new to DOM so I need a bit of help with this one.

Here's the WIP

http://www.gearoidcorcoran.com/temp/index2.php

and the CSS

http://www.gearoidcorcoran.com/temp/layout2.php

Is there a site or tool that can check if the DIVs are ok?

I want to put the section "Med Revsion Offers" next to the section "welcome to med revision.org but I can't seem to shift it for some reason??

Any tips and advice would be appreciated.

Thanks
Gary

randombar

Getting there with this lads but I've a problem I can't change the div to dynamic height, very frustrating.

http://medrevision.org

style sheet http://medrevision.org/style.css

I know it's something to do with floating divs but dunno what.

Thanks

GAry

DonkeyStyle \o/

Hm? Just remove the height attribute from col1 and the div will snap to the height of its content... or am I missing what you're trying to do?

randombar

In an ideal world that would be the case, I'v been tidying it up a bit more and this is what I have

http://www.gearoidcorcoran.com/temp/temp1.html
http://www.gearoidcorcoran.com/temp/style.css

As you can see from temp1 one problem is that column two of the main section moves over to column one space if column one is empty.

Then . . . .

http://www.gearoidcorcoran.com/temp/temp2.html

The footer moves up to the end of column two and ignores the height of column one??

Frustrating enough.

randombar

Managed to sort it out . . . I think . . .

http://medrevision.org

DonkeyStyle \o/

GaryCocs wrote: »

In an ideal world that would be the case

I tried it just there and it worked.

GaryCocs wrote: »

As you can see from temp1 one problem is that column two of the main section moves over to column one space if column one is empty.

Float .column2 right, set a more narrow width, so it'll fit beside .column1 and apply clear:both to #footer

In fact, add this to the end of your css file.

#page1 #content .wrapper .row2 .column2 {float:right; width: 600px;}
#footer .foot { clear: both; padding-top: 30px;}

GaryCocs wrote: »

Frustrating enough.

Hehe, better not look at the nav bar in IE6 then.

What generated this CSS btw? It's awfully specific and repetitive, it's no wonder your head is wrecked with it.
It's taken me the best part of an hour to figure out wtf way the page is layed out in the first place.

What ever you're using sure likes to set "font-family:tahoma;" a lot
You could save yourself a lot of confusion if you'd just hand-coded it from the start.
The whole idea is that style rules get handed down from parent to child, so you don't have to apply a ton of rules to each individual granular element... the resulting CSS is a lot smaller and easier to make sense of.

DonkeyStyle \o/

DonkeyStyle \o/ wrote: »

It's taken me the best part of an hour to figure out wtf way the page is layed out in the first place.

GaryCocs wrote: »

Managed to sort it out . . . I think . . .

Note to self: Refresh thread more often.

randombar

Nice one for all of that help, legend, and eh ya that was me self coding so I guess I've a bit of work to do still, had an interview for a web dev job here in melbourne unfortunately I still dont have OOP

DonkeyStyle \o/

GaryCocs wrote: »

and eh ya that was me self coding so I guess I've a bit of work to do still

Ah, that makes sense now actually... I think you just took on a complicated design to start off with.
I wouldn't worry about OOP concepts with CSS either (I think that may be what's messing you up), just figure out what properties are inherited when one html element contains another and style from the outer html containers inwards, changing only the rules you need to.
Experiment with some basic skeleton layouts, it's really not as complicated as you're making it.

#page1 #content .wrapper .row2 .column2 .col1 p

^ Avoid doing that too, you don't have to write such specific rules.
.col1 p is about as much as you should need providing you don't also have a .col1 p inside of .column1 that needs to be styled differently.

randombar

Nice one for the tips, what about the layout of the style page, do you seperate it into layout and then style? Just wondering what the norm is. Applying for these web jobs I realize I need more experience in different areas!