PDA

View Full Version : CSS structure


africano
09-26-2008, 05:00 PM
Now, this question is going to show Just How little I know about css.

But anyhow Im going to ask it:(again im trying to explain myself..might be hard)

How do you position the divs for your layout. Currently Im using position:relative and Top:xnumber of pixels,left:x number of pixels and so on.......But Im thinking this is not correct...

So the question is how do you position divs for the layout you want?

Do you use margins, padding?

I know its probably a stupid question, its just that that Ive been looking at some sites and their code(thanks domedia, got the addon!:)) and they dont seem to use the Top,Left,Bottom elements....well thats it..!

edbr
09-27-2008, 02:23 AM
yes margins and padding for inside the divs. the other positioning is for absolute delete them

Cary
09-27-2008, 06:04 AM
Relative positioning, when it actually makes use of top, left, etc. values, causes the element being styled with it to appear elsewhere on the page relative to its actual flow in the page content, but it leaves a gap at its originating location on the page because it's still taking up that space even though you can't see it there.

africano
09-29-2008, 09:18 AM
Hi, been doing some reading and I must say Iam not very clear. Ive been using position:relative and Left,top,bottom,right atributes to position my divs.

As I understand, you are saying for Divs inside divs I should be using marghins and padding and what positioning?(relative/absolute?)

Ive tried using margins for one of my div(just testing to position the div where I want it to go. But using the margins it doesnt allow the Div to overlap another Div(my navbar div currently overlaps my Header Div) but when using margins this doesnt happen.

Ive been reading from here, any help appreciated. I want to have clean code thats why Im investigating.
http://www.w3schools.com/Css/css_positioning.asp

africano
09-29-2008, 11:34 AM
Ive put up a test page to my design. Here it is:

http://www.elchevirtual.com/Personaltrainer/

There are two png images, these are the ones causing problems in IE6.

The other issues I can see are the positioning of my navbar, it should be slightly ontop of the content but as you can see it hides beneath it instead of being "stuck on".
The rollover effect is not 100% correct as Im still working on it. It doesnt seem to let me make a class so I can have 2 separate effects, one for the main navigation and another for the side column.

Cheers.

africano
09-29-2008, 04:40 PM
Hey, Im having a look at the css in a lot of sites and not many seem to use the Position element.

Im happy to say Im playing around with my css, and trying to structure and place the divs using margins and Ive managed to get the div overlaps how i wanted them!:grin:

so the norm is to position the divs using margins and paddings....what are the position element used for and when should Relative and absolute values be used?

here is the new link with the navbar issue fixed
http://www.elchevirtual.com/Personaltrainer/

domedia
09-29-2008, 06:08 PM
I think you got it all wrong :)

Position absolute is usually follows by 2 of these: top, left, right, bottom.
Position relative just follows the page flow so no positioning needed.

You can add margin and padding to any element provided their treated as block elements.