Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    10
    Member #
    28878
    Hi all,

    this is my first post and with it I have a slight problem

    I have a horizontal navigation on my website which I will provide the code for in a bit and my problem is that when I preview this site it looks ok....but as soon as I start to zoom out a bit or even zoom in, the navigation seems to move out of place. Now you may be thinking as to why any1 would zoom in or zoom out but I've found out that the navigation doesnt stay in one place if you was to preview it in a different browser.

    Here is the html code:

    <body>
    <div id="banner"> </div>
    <ul id="nav">
    <li><a href="#" Home> Home </a></li>
    <li><a href="#" Websites>Websites</a></li>
    <li><a href="#" Productions>Productions </a></li>
    </ul>
    </div>
    <div id="content"> </div>
    <div id="footer"> </div>
    </body>


    AND here is the CSS:

    ul#nav {
    margin:0px;
    padding:0px;
    position:fixed;
    top:150px;
    left:71px;
    width: 690px;

    }

    ul#nav li {
    margin:0px; padding:0px;
    list-style:none;
    margin-right:10px;
    font-size:16px;
    text-transform:uppercase;
    display:inline;
    }

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    What are the font sizes set to? If you want it to scale right, you'll need to use either % or em.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Aug 2011
    Posts
    10
    Member #
    28878
    font size is 16....its just not the navigation im having problem with the text in another div which keeps going off its normal position. how do i solve this?

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Fixed positioning could be your culprit - but without a link to the page and more detailed description of the problem it is difficult to tell.
    Which browser does it display properly in? which does it not? are you using a CSS reset of any kind to eliminate the browser's native margins and padding?
    Can you post a link?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member
    Join Date
    Aug 2011
    Posts
    10
    Member #
    28878
    let me give you a better description of the problem: basically i have images set as background in which these images are my web template. In order to solve my problem i can easly set the position to static but in doing so i cannot overlay these text on top of my background image. And so im having to change it from static to fixed or absolute and in doing so, the position of text is altered when viewed in a different browser.

    As you can get my html source, il provide you with my css source below:

    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
        background-color:#999;
        background-image:url(Pictures/bg.jpg);
        background-attachment:fixed;
        margin:0px;
        padding:0px;
        color:#FFF;
    
    }
    
    #banner{
        background-image:url(Pictures/header.jpg);
        position:relative;
        background-repeat:no-repeat;
        padding-bottom:200px;
        background-position:center;
    
    }
     ul#nav {
        margin:0px;
        padding:0px;
        position:absolute;
        top:140px;
        left:391px;
        width: 690px;
    
    }
    
    ul#nav li {
         margin:0px; padding:0px;
         list-style:none;
    
         font-size:16px;
         text-transform:uppercase;
         display:inline;
    
     }
    
    ul#nav li a:hover {
         text-decoration:none;
         color:#ffffff;
     }
    #content {
        background-image:url(Pictures/content.jpg);
        background-repeat:repeat-y;
        background-position:center;
    
    }
    
    #footer {
        background-image:url(Pictures/footer.jpg);
        background-repeat:no-repeat;
        background-position:center;
        padding-bottom: 99px;
    }
    
    #info {
        padding: 20px 365px 15px;
    
        margin-right:auto;
        background: none;
        width: 600px;
        color:white;
    }
    
    a:link {
        text-decoration: none;
        color:#FFF;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    a:active {
        text-decoration: none;
    }

  7. #6
    Member
    Join Date
    Aug 2011
    Posts
    71
    Member #
    28914
    Liked
    1 times
    I have been having a very similar problem! Only I CAN'T (that I know of) set my image to background b/c it is actually a JS slide show.

    Now someone PLEASE continue to explain how to make an absolutely positioned pic not screw up. I get that it is moving right, left, up, down relative to browser window. So how do you do this?!?!?!
    orrrrr...How can you make an image a bg image and then call it into a JS slideshow.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com