Elements going all over the place., Css elements wont stay in the box and move changing resolutions Options

[OregonWifi]

Hi, I've been pulling my hair out trying to get this site together. Could someone please point me in the right direction?

The elements move all over the place when I change resolutions.

The site is
http://stressfreenw.eugenecomputergeeks.com

I'm trying to have the navigation be in the same area that it is on http://www.wix.com/flash-templates/lifestyle-mentor which I would use, except its a flash template.

Any help on why it keeps moving when I change resolutions would be greatly appreciated!

Thanks!

[Frederiek]

Don't use position: absolute; as it takes elements out of the normal flow of the page. Only use float: right; on the UL inside #topPan. Be sure to clear the floats after those elements (e.g. on the container for the rest of the page).

If you want to recreate the same look as the flash page, you can make #topPan less wide and set a white bottom border to it. Then you won't need that image for that line anymore.

[OregonWifi]

Don't use position: absolute; as it takes elements out of the normal flow of the page. Only use float: right; on the UL inside #topPan. Be sure to clear the floats after those elements (e.g. on the container for the rest of the page).

If you want to recreate the same look as the flash page, you can make #topPan less wide and set a white bottom border to it. Then you won't need that image for that line anymore.

Thanks so much! Sorry for the late reply. I'm a little confused on your instructions. My use of web design has been mainly with using old html without css, or using templates and making dynamic sites with php. I'm terrible with css foundational stuff.

I played around with the topPan border but not understanding how to get the white border bottom to it. Thanks so much for your help though.

[OregonWifi]

Nevermind, I found it, but now I need the white line to go more to the left. The site is http://stressfreenw.eugenecomputergeeks.com if you need it again. THANKS

[pandy]

Then you must make the UL wider, for instance by giving it a left padding.

[OregonWifi]

Then you must make the UL wider, for instance by giving it a left padding.

OMG. I love you! Thank you. I've been playing with that forever. I got a whole bunch of wrong information in IRC rooms. THanks so much.

[OregonWifi]

Now my only issues is there is a little wierd line between the "home" and "about" buttons. I'm pretty sure its not in any of the images and just not seeing it in the code. THanks for helping a newb!

[OregonWifi]

sorry nevermind, I figured it out. The home didnt have the repeat. Now I'm trying to figure how to move the white border-bottom line slightly to the left.

[pandy]

You can't move the border separately. It's part of the UL.

[Frederiek]

Unless you set the border-bottom to #topPan instead of on UL. Then, you can give that div a margin-left, so the white border will be pushed to the right .

Also, make the #topPan as high as the UL (32px, instead of 87px) and set a margin-top to push the div (and menu) as far down under the logo as you like.

BTW, the top: 10px; on UL does nothing, as there is no positioning (fortunately). But, eliminating the default margin on UL would be a good idea.

To make that a little clearer for you, the CSS should look like this :

CODE

#topPan {
    height: 32px;
    margin: 30px 0 0 30px; /* margin order: top right bottom left */
    border-bottom: solid 2px white;
}
#topPan ul {
    height: 32px;
    list-style-type: none;
    float: right;
    margin: 0;
}

I hope that makes sense to you.