Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Why is my banner and navigation bar centred on a 24" Mac but not on a 27"?

    Hi there,

    I designed my website using HTML/CSS, and I have a top banner right below my fixed header, and below the banner is my menu/navigation. When i view the site on my laptop and 24" mac, both are centred; however, when I view my site on a 27" Mac, the banner is off to the left and the menu/navigation bar is a bit over to the right. Is there any way I can have both stay in the same spot no matter what size monitor I view the site on? I'll post the CSS/HTML for both below ("title" is the banner).

    Code:
    #title
    {
    height: 100px;
    position: relative;
    text-align:left;
    z-index: -1;
    margin-left: auto;
    }
    
    #menu
    {
    padding-top: 18px;
    border-bottom: double 2px white;
    border-top: double 2px white;
    width: 75%;
    height: 50px;
    margin-top: 160px;
    margin-left: 868px;
    margin-right: 203px;
    float: right;
    text-align:center;
    letter-spacing:4px;
    word-spacing:4px;
    font-family: "Arial";
    font-size: 150%;
    color: #ffffff;
    }
    
    <img src="images/banner.png" alt="Books and Technology" style="margin-left: 380px"/>
    
    <div id="menu">
    <font size="5"><b><a href="html.html">HOME</a> | <a href="page1.html">PAGE 1</a> | <a href="page2.html">PAGE 2</a> | <a href="page3.html">PAGE 3</a> | <a href="page4.html">PAGE 4</a> | <a href="page5.html">PAGE 5</a> | <a href="page6.html">PAGE 6</a></b></font>
    
    </div>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Do you want it to stay in the same spot or do you want it to stay centered?
    For centering inline elements like images you need to apply text-align: center to the parent. Centering block-level elements like divs is easy if you assign a specific width to them and set left and right margin to “auto”.

    And by the way:
    <font size="5"><b>…
    Please don’t do that. For what do we have CSS?

  • #3
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    A good tip when styling your site: Resize your browser window often to see what happens! The effect you are experiencing is caused by the amount of horizontal pixels being increased as the resolution gets better, you can get the same effects by making your browser window narrower.

  • Users who have thanked Custard7A for this post:

    Jake_A_T (12-08-2012)


  •  

    Tags for this Thread

    Posting Permissions

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