ansaurus

Question

CSS - Positioning

Answer 1

+1 A:

Check out this question for the rounded edges:

http://stackoverflow.com/questions/1127227/css-rounded-corners

And for the positioning of the objects, I would go with something like this:

topimage {
   position: absolute;
   top: 50px;
   text-algin: center;
}

Tony C 2009-07-15 18:09:02

slight typo: `text-algin` = `text-align`.Perhaps `margin: 50px auto 0 auto` would be better.

Eric 2009-07-15 18:18:33

Answer 2

A:

To put the elements without a margin between them, you want the top image to have a zero bottom margin:

margin: 50px auto 0;

(Notice that you have to specify a unit (for example px) for any non-zero measurement.)

The background image will not give the top element it's size, you have to specify the width and height to match the size of the image. If the height is less than a regular character, you need to use something to keep Internet Explorer from expanding the element to the height of one character line, for example by using overflow: hidden; to keep the content from affecting the size of the element:

width: 960px; height: 10px; overflow: hidden;

The padding is added to the size of the element, so you have to make the page element 20 pixels narrower:

padding: 10px; width: 940px;

Guffa 2009-07-15 18:10:11

Thank you for that. I'd forgotten to specify the units of measure and couldn't figure out why everything I set was being ignored.

2009-07-16 15:38:57

Answer 3

A:

If your rounded corner image is 30px high, set .pagetop height to 30px, add 50px of padding to the top and set the top of the background image to 50px.

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

Emily 2009-07-15 18:46:00

ansaurus

tags:

views:

answers:

CSS - Positioning

related questions