Hep with CSS Position: Absolute

[drmaximus]

Thanks to some encouragement within this forum, I decided to learn CSS right after I learnt how to create sliced template, instead of messing around with old-fashion tables.

As far as CSS positioning goes, is it often guess work?
For example, in order to align an image with a navigational panel above it, I had to guess the specification "Right: 68.9%;"... etc.

I would appreciate if somebody could take a look at the design at http://www.b50.net and tell me what is wrong. I shall paste the CSS file here for scrutiny. There must be an easier way to do this... and is there an easy way to centralize the banner, instead of guess-specifying "Left: 8%; Right: 8%;" etc?

Thank you, guys.

EDITED TO ADD: Oh dear, I just found out that it looks like rubbish on Safari, I don't know about IE, but it looks just fine on Mozilla. Is CSS too advanced to cater to a wide audience? Should I stick with tables as it seems that I am wasting time designing only for the Mozilla platform...?

/* CSS Document */

body {

background-color: #FFFFFF;
color: #000000;

}

#banner {

position: absolute;
height: 307px;
left: 8%;
right: 8%;
top: 15px;

}

#navigation {

position: absolute;
height: 59px;
top: 322px;
left: 8%;
right: 8%;

}

#welcome {

position: absolute;
left: 8%;
top: 381px;
right: 35%;

}

#standingman {

position: absolute;
top: 381px;
right: 8%;
width: 269px;
<!-- the image gets aligned only if I include the following variable-->
<!--left: 65.8%;-->

}

 

[Rowan W]

Do not use the position style until you need it, and you definately don't need it for that site. All divs have 100% width by default and no height, they do not sit beside eachother by default either, so when you put down two divs they will always be on separate lines (this is "block-level" behaviour).

When you use position:absolute on a div it will lose the "block-level" behaviour and therefore you must specify its location or it will overlap anything else on the page. Start by removing position: absolute from your stylesheet, also remove top, right, left, bottom.

For the banner div you should now only have the height specified, you will also need to specify the width of the banner image (1000px). You should have the same for the navigation div, therefore height and width. Add one more style to both of these divs - margin: auto. This style will but them smack-bang in the middle.

For the content area (text) make sure the width is the same as the banner but don't specify a height, you need to let the text expand the div. If you specify dimensions for a div, it will not expand beyond those dimensions, no matter what.

To get an image aligned to the right side, remove the div surrounding it and just apply this to the image tag - <img src="blah" style="float:right">

 

[drmaximus]

Hi Rowan, thanks for the advice. The big lesson I learnt was that of div's stacking below each other by default.

Anyway, I changed the CSS, and IMG tag for the standing man picture and almost everything was as you mentioned. The only problem is the picture. It is no longer aligned with the navigation panel/banner, and it is now stacked below the main text area, instead of beside it.

In terms of tables, the text area and image were supposed to each occupy one column box on the same row. And this 2-column-box width should align exactly with the width of the navigation panel/banner above. This, in my experience, has been very difficult to achieve via CSS. Could you please advise?

EDITED TO ADD: I have uploaded the new files to reflect the outcome of changing the variables according to what you said: http://www.b50.net

/* CSS Document */

body {

background-color: #FFFFFF;
color: #000099;

}

#banner {

width: 1000px;
height: 307px;
margin: auto;

}

#navigation {

width: 1000px;
height: 59px;
margin: auto;

}

#welcome {

width: 1000px;

}

standingman {

}

 

[LeetPCUser]

Not everything is lined up right in Mozilla.

 

[Kage]

hey, if you want help with that site, aim me. Im happy to help out.