#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    How to align a div in the centre of the screen at the top


    Hi all,

    At the moment I have a navigation menu situated in my header, what I want is that the navigation menu is always centred at the top of the page; regardless of what resolution its on.

    Html:

    Code:
    <div class="navigation" >
      <ul>
        <li><a href="#"><span>Homepage</span></a></li>
        <li><a href="#"><span>Products and Services</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
      </ul>
    </div>
    CSS:

    Code:
    body 
    { 
        margin:0px;
        padding:0px;
        background-image:url('/img/pattern.jpg');
        
        
        
    }
    
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */
       background:#6cf;
    }
    
    #header {
       
       background-image:url('/img/header_img.png');
       padding:10px;
       height:100px;
    }
    
    
    .navigation {
      background: url(images/navigation.png);
      height: 134px;
      overflow: auto;
      display: block;
      float: left;  
      width: 500px;
    }
    .navigation * {
      padding:0;
      margin:0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 13px;
      text-transform: uppercase;
    }
    .navigation ul {
      display: block;
      float: left;
      padding: 0px 0 0 0;
      margin: 37px 0 0 20px;
    }
    .navigation ul li 
    {
      
      background-color:White;
      list-style: none;
      float: left;
      margin: 0 0 0 5px;
      border-radius: 10px;
    }
    
    .navigation ul li a {
      background-image:url(img/navbutton_back.png);
      display: block;
      padding: 0 13px 0 0;
      color: #578ba0;
      text-decoration: none
    }
    .navigation ul li.selected a,
    .navigation ul li.hover a {
      background-image:url(img/navbutton_back.png);
      color: #578ba0;
    }
    
    .navigation ul li a span {
      background-image:url(img/navbutton_back.png);
      display: block;
      padding: 15px 10px 10px 23px;
    }
    .navigation ul li.selected a span,
    .navigation ul li.hover a span {
      background-image:url(img/navbutton_back.png);
    }


    Thanks for any suggestions!

    (p.s, this is my first thread so if I have missed something out which i should have put in; feel free to let me know! )
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Location
    The Netherlands
    Posts
    14
    Rep Power
    0

    Exclamation


    You can try using frames:


    Save this as navbar.htm (Or any filename you want):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    body 
    { 
        margin:0px;
        padding:0px;
        background-image:url('/img/pattern.jpg');
        
        
        
    }
    
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */
       background:#6cf;
    }
    
    #header {
       
       background-image:url('/img/header_img.png');
       padding:10px;
       height:100px;
    }
    
    
    .navigation {
      background: url(images/navigation.png);
      height: 134px;
      overflow: auto;
      display: block;
      float: left;  
      width: 500px;
    }
    .navigation * {
      padding:0;
      margin:0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 13px;
      text-transform: uppercase;
    }
    .navigation ul {
      display: block;
      float: left;
      padding: 0px 0 0 0;
      margin: 37px 0 0 20px;
    }
    .navigation ul li 
    {
      
      background-color:White;
      list-style: none;
      float: left;
      margin: 0 0 0 5px;
      border-radius: 10px;
    }
    
    .navigation ul li a {
      background-image:url(img/navbutton_back.png);
      display: block;
      padding: 0 13px 0 0;
      color: #578ba0;
      text-decoration: none
    }
    .navigation ul li.selected a,
    .navigation ul li.hover a {
      background-image:url(img/navbutton_back.png);
      color: #578ba0;
    }
    
    .navigation ul li a span {
      background-image:url(img/navbutton_back.png);
      display: block;
      padding: 15px 10px 10px 23px;
    }
    .navigation ul li.selected a span,
    .navigation ul li.hover a span {
      background-image:url(img/navbutton_back.png);
    }
    -->
    </style>
    
    </head>
    <body>
    <div class="navigation" >
      <ul>
        <li><a href="#"><span>Homepage</span></a></li>
        <li><a href="#"><span>Products and Services</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
      </ul>
    </div>
    </body>
    </html>

    Now this is your index:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>My page</title>
    <frameset rows="20%,80%" framespacing="0">
    <frame src="navbar.htm" scrolling="no" noresize frameborder="0">
    <frame src="homepage.htm">
    </frameset>
    </html>
    And if you load your homepage in the second <frame>-Tag, it will look like this:


    (Image is resized)

    The navigation bar will stay at the top of the page, even if you scroll. (The navigation bar on the picture doesn't contain the images etc. that you're using) and of course you can change the heights and widths of the frames to what you want. I hope this helped

    -Mika

IMN logo majestic logo threadwatch logo seochat tools logo