Positioning links Options

[pk941]

I am trying to change the location of the menu list (which are text links with borders) on a web page by using the 'position' code. The problem is the only link button in the list that moves is the "Contact" ('mailto') button. I have validated the CSS and its OK.

Thanks again for your help
pk



Here is the CSS code.....

#mainmenu a:link {position:relative;top:-50px;left:50px;
display:block; width:80px; padding:2px; margin:10px 0px 10px 0px;
color:#80FFFF;
border:ridge;
border-color:yellow;
}
#mainmenu a:visited {
display:block; width:80px; padding:2px; margin:10px 0px 10px 0px;
color:#80FFFF; border:ridge;
border-color:yellow;
}
#mainmenu a:hover {
display:block; width:80px;
color:#ffffff; border:ridge;
border-color:#FF0000;
}


Here is the html code....

<div id="mainmenu" >
<a href="index_new1208.html">HOME</a>
<a href="artist01.html">ABOUT ARTIST</a>
<a href="paypal-test_neck.html">NECKLACES</a>
<a href="paypal-test_ear.html">EARRINGS</a>
<a href="paypal-test_bowls.html">BOWLS</a>
<a href="paypal-test_cuswk.html">CUSTOM WORK</a>
<a href="links01.html">LINKS </a>
<a href="faqs.html">FAQs</a>
<a href="mailto:beth@pandc.com">CONTACT</a>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&display=1&business=beth@pandc.com&page_style=name&shopping_url=http://www.pandc.com/index_new1208.html" &target="_self">VIEW CART</a>
</div>

[pandy]

No, with the code you posted the whole menu will move.

Why do you want to move it? I get a feeling that you want to get rid of the browsers' default margin/padding on body. If that's the case, it's much better to do just that instead of positioning page elements over it. Maybe you could link to a sample page so we can better understand what you are doing?

[pk941]

No, with the code you posted the whole menu will move.

Why do you want to move it? I get a feeling that you want to get rid of the browsers' default margin/padding on body. If that's the case, it's much better to do just that instead of positioning page elements over it. Maybe you could link to a sample page so we can better understand what you are doing?

The whole site that I am working on is a "work in progress" ( so forgive the wordage I use on the pages as space holders) so I just uploaded it. Now it really acts funky!! Here is the address....

http://www.paperandclay.com/index_new1208.html

thanks
pk

[pandy]

When you position something relative, it leaves space behind that isn't filled up by normal, non-positioned content.

That welcome blurb is positioned at the top of the page by the use of 'position: relative', but in the HTML source it's further down. In fact, for me it's even beyond the top, I can't read all of it because it's outside the view port.

'position: relative' isn't a good choice for this. If you don't have a special reason for moving blocks around, it's much better to have them in the same order in the HTML as you want them to appear on the screen. Then you use CSS for minor adjustments. You could for example float the menu left. The rest shouldn't need any kind of positioning.

[pk941]

When you position something relative, it leaves space behind that isn't filled up by normal, non-positioned content.

That welcome blurb is positioned at the top of the page by the use of 'position: relative', but in the HTML source it's further down. In fact, for me it's even beyond the top, I can't read all of it because it's outside the view port.

'position: relative' isn't a good choice for this. If you don't have special reason for moving blocks around, it's much better to have them in the same order in the HTML as you want them to appear on the screen. Then you use CSS for minor adjustments. You could for example float the menu left. The rest shouldn't need any kind of positioning.

Thanks Pandy. I changed the order in the HTML and floated the menu left. In order to move the menu vertically I used positioning. Everything seems to be working...for now!!

Thanks again
pk