www.webdeveloper.com
Results 1 to 3 of 3

Thread: keeping the nav in one place on multi res's

  1. #1
    Join Date
    Jul 2005
    Posts
    17

    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.

  2. #2
    Join Date
    Sep 2005
    Posts
    33
    Hi!

    To your first problem. You have written in your smallvilleMP.css file following code:

    Code:
    div#menu{
        float:left;
        width: 98.2%;
        padding: 2px 0 0 15px;
        font-size: .8em;
        margin: 10.8% 0 0 0;
    }
    the line with margin: 10.8% 0 0 0; given you that problem.
    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.

    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">
          &nbsp; <!-- not sure if its really required -->
       </div>
    </div>
    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 */
    }
    if it wont work, or you have a specified question to my code, write me an email, or talk to me in icq...

    best regards,
    d4p41n

    plz post a reply

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    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.
    Code:
    #banner {
      background: #E99123 url(logo.gif);
      text-align: right;
    }
    
    <div id="banner"><img src="heads.gif"></div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles