Problems with positioning

[sarah]

I am rather new to coding, but after having my own page finished I just decided to go on learning. One thing I am playing around with is this page:

 

ww w.ter lamonte.com

 

The problem is the following:

I have positioned two transparent png-images over the header and content background. I positioned them with position:relative. They are exactly in the place I want them to be.

But like this they create a huge empty space that stretches the blue background div too much. Hiding the overflow cuts the blue box but leaves me with a big headache to position the rounded corners.

I don't want to use absolute position because I want to keep the page flexible when changing the size of the browser window.

 

Please give me an idea how to solve this.

Thanks already in advance,

Greetings,

Sarah (do you guys have a Hello-Thread? I do feel a bit awkward just to first post a cry for help... but feel safe, I usually like to figure out things on my own and I know already that pages can look different in different browsers and that validating things helps a lot most of the times... :cool: )

[Wickham]

Position: relative finds a position for an element and then moves it relatively, but as you have discovered, it still leaves the original place available as a space, so you must use position: absolute.

 

You need a containing div with position: relative (your class="all" already serves that purpose) ands then make the image divs position: absolute. When position: absolute divs are inside a position: relative div they take their positions from the top left corner of the div, not the top left corner of the screen, so if the position: relative div moves when centering, the position: absolute divs move with it keeping the same positions inside.

 

Edit these:-

 

.all {background-color: #ccccff; margin: 0 auto; width: 75%;

height: auto; position: relative;}/*position: relative added*/

 

div#geisha {background: url(images/geisha2.png) no-repeat;

margin-left:12.5%; width: 170px; height: 200px; position:

absolute;/*relative;*/ top: 40px;/*-470px;*/ overflow: hidden;}

 

div#Cherry {background: url(images/CherryBlossom.png) no-repeat;

position: absolute;/*relative;*/ top: 0;/* -710px;*/ width:75% ; height:

500px; margin: 0 12.5% 0 12.5%; overflow: hidden;}

 

Edit: your page centers in Firefox but not in IE7 because your doctype is incomplete; it should be:-

 

Edited February 9, 2009 by Wickham

[sarah]

Thank you so much !!!

 

This solves not only the problem of this page but of my other one, too. I still did not understand 100% how positioning works but I was already suspicious it could be done this way. I guess I tried it once, made something wrong and then concluded that the whole idea was not working.

So I can have a fresh start and put things in place.

I really had my brain blocked on that one, thanks again.

[Susie]

Hi Sarah,

 

I just wanted to share a thread from our old forums that might help you understand positioning a little more. It surely helped me!! Look especially at billyboy's post. Enjoy!

 

Relative and Absolute Positioning

[sarah]

Thank you, that is a real treasure! Things start to make sense now!