My navigation menu at the top is always in different places on different resolutions, does anyone know how I could fix this? the site is [url]http://www.smallvillesource.com/[/url] it’s not done yet, that’s just my test server, but i need to fix that before it goes live. Also does anyone know how i could maybe split header into 2 images so that the part to the right is always the 2 heads/faces, and the part to the left is always the logo, so that I don’t have to repeat the image and have it look strange on high resolutions. Thanks.
the line with [I]margin: 10.8% 0 0 0;[/I] given you that problem.
change it into
[I]margin: 92px 0 0 0;[/I] and the menu will be always be on the right position.
if you want to solve the problem with your menu when the page width gets to smaller, try to use a min-width. but i'm not sure if ie supports that.
to your second problem...
i'm not sure if i understand you right. you want the smallville image always to the left and the two heads always to the right.
hmm...
i guess you cant do it with just one background (later, in css3.0 it will be supported, but dont wait till it all browsers understand it ? ).
i would suggest you to do it like that: [CODE] <div id="header"> <div id="menu"> <!-- your menu here --> </div> <div id="background"> <!-- not sure if its really required --> </div> </div> [/CODE]
css: [CODE] #header { width: xx px; /* i think a fix witdh would be the best */ }
#menu { width: yy px; /* smaller then the header width, but enough to display the full menu */ background-image: url('xxx'); /* the image with the smallville logo (no heads on it */ }
#background { float: right; width: xx-yypx; /* calculate it dont write it like in that example down*/ background-image: url('yyy'); /* the image with the heads */ } [/CODE]
if it wont work, or you have a specified question to my code, write me an email, or talk to me in icq...
@ray326Sep 30.2005 — #Also does anyone know how i could maybe split header into 2 images so that the part to the right is always the 2 heads/faces, and the part to the left is always the smallville source logo thing, so that i don't have to repeat the image and have it look strange on high resolutions.[/QUOTE] Break it into the two obvious images. Use the left one as the background of the banner div with the same color (#E99123) as the background color. Put the heads image into the div, text-align:right. <i> </i>#banner { background: #E99123 url(logo.gif); text-align: right; }