SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning with CSS!!!

    Hi Guys,

    I have a site full of tables and I want to move it over to css. The current URL of the site full of tables is at http://www.thisisslough.com

    Now I tried re-creating the site using css without ANY tables, and got to this stage at www.thisisslough.com/css_thisisslough.

    I created the above in a 1400 x 1050 resolution. Now the trouble I have is that on different resolutions and also on a Mac (i'm using a PC) the navigation menu and .rhsmenu are all over the place.

    Can someone advise how I can place my navigation I have on my CSS page and .rhsmenu in the same place as the table layout of the site (www.thisisslough.com) on all different resolutions - and on PC and Mac!?!

    Many Thanks

    Chris

    PS: Here's my css code:

    HTML Code:
    <html>
    <head>
    <title>CSS Menu Test</title>
    </head>
    <style>
    body {font-family: Verdana, Helvetica, Arial, sans-serif;
    background-color: #FFFFFF;
    font-size: 11px;}
    
    #navigator {background-color: #FFFFFF;
    margin-top: 20px;
    width: auto;
    margin-left: 22.0%;
    margin-right: 66.5%;
    text-align: left;
    padding: 8px;}
    
    .navigationbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .navigationbutton a {padding: 4px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    background-color: #000099;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;}
    
    .sectionbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .sectionbutton a {padding: 4px;
    background-color: #0066ff;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-top: 2px #ffe5c3 solid;
    border-left: 2px #ffe5c3 solid;
    border-bottom: 2px #7f6645 solid;
    border-right: 2px #7f6645 solid;
    display: block;}
    
    .mainbutton {font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
    margin-top: 3px;}
    
    .mainbutton a {padding: 4px;
    background-color: #cccccc;
    font-weight: bold;
    text-decoration: none;
    color: #4f5942;
    border-top: 2px #edf8de solid;
    border-left: 2px #edf8de solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    display: block;}
    
    .mainbutton a:hover {border-top: 2px #727f5e solid;
    border-left: 2px #727f5e solid;
    border-bottom: 2px #727f5e solid;
    border-right: 2px #727f5e solid;
    background-color: #eeeeee;}
    
    .centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    </style>
    <body bgcolor="#FFFFFF">
    <p class="centeredImage"><img src="banner.jpg" width="743" height="98"></p>
      <p></p>
    <div id="navigator"> 
      <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
      <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
      <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
      <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
      <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Observer</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Property</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a> 
      <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a> 
      <div id="rhsmenu" style="position:absolute; width:178px; height:413px; z-index:1; left: 64%; top: 14%">Does 
        this appear in the right place?</div>
      <p class="mainbutton">&nbsp; 
      <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a> 
    </div>
    </body>
    </html>

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of trying to guess margins to align the "navigator" DIV, why don't you wrap the whole thing in a container? Then you can center that on the page, and just float the navigation buttons to the left.

    You should also be marking up your list of navigation as - well, a list.


Bookmarks

Posting Permissions

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