PDA

View Full Version : curly problem with layout



dazzjazz
Jan 19th, 2010, 12:27 AM
Hi - I could use some help with a layout issue.

The page with the problem is at: http://www.dazzjazz.com/new/video.htm

What it should look like is:

http://www.dazzjazz.com/images/mockup.jpg

The css is at http://www.dazzjazz.com/new/dazzjazz.css

Thanks

darren

Excavator
Jan 19th, 2010, 12:59 AM
Hello dazzjazz,
Try making those images block level instead of inline.
Like this -

#mainContent img {display:block;}

dazzjazz
Jan 28th, 2010, 01:48 AM
Thanks - I'm further along now but still need help.
The picture of me playing with the title "Video" is properly aligned by using the "float" property.

However, the "actualContent" div is now intruding on the div mentioned above.
I think this is caused by the layout of two columns, with the nav being fixed right - I got this from a Dreamweaver template - sorry!

Please compare the image above to the updated page at:

http://www.dazzjazz.com/new/video.htm

Thanks

Darren

Excavator
Jan 28th, 2010, 03:05 AM
Try moving it down a bit with margins, see if this works -

#actualContent {
margin-left: 0px;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
display: block;
}

dazzjazz
Jan 28th, 2010, 09:53 PM
I though about that, but forgive me but that seems like a hack - I want this to be built to W3c standards. I have a lot to learn!

Excavator
Jan 28th, 2010, 10:06 PM
I though about that, but forgive me but that seems like a hack - I want this to be built to W3c standards. I have a lot to learn!

That's how we position things. Let the elements flow naturally and nudge them around with floats and/or margins.

To make sure you are W3c Standards compliant check in with the validators and write semantic code (http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/).