keeping the nav in one place on multi res's
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 http://www.smallvillesource.com/ 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.
Last edited by MyglyMP2; 11-16-2005 at 02:38 PM.
To your first problem. You have written in your smallvilleMP.css file following code:
the line with margin: 10.8% 0 0 0; given you that problem.
padding: 2px 0 0 15px;
margin: 10.8% 0 0 0;
change it into
margin: 92px 0 0 0; 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.
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:
<!-- your menu here -->
<!-- not sure if its really required -->
if it wont work, or you have a specified question to my code, write me an email, or talk to me in icq...
width: xx px; /* i think a fix witdh would be the best */
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 */
width: xx-yypx; /* calculate it dont write it like in that example down*/
background-image: url('yyy'); /* the image with the heads */
plz post a reply
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.
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.
background: #E99123 url(logo.gif);
<div id="banner"><img src="heads.gif"></div>
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)