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 4 of 4
  1. #1
    Junior Member
    Join Date
    Jun 2006
    Location
    Sheerness, Kent, UK
    Posts
    16
    Member #
    13338
    Hi all,

    OK, I've finally started trying to do the layout on my websites by CSS rather than HTML and have tried this out on a new website I've registered:-

    http://www.preserved-railways.net

    I've got the page - at the moment - doing what I want with CSS positioning but now I'm flumoxed. I want to add more links but can't work out how to do it without using absolute positioning and defining a class/id for each link that I want. While I could do that it will obviously result in quite a lengthy CSS file if I have quite a few links. Is there any way of defining the class and using relative positioning so that the link is positioned in relation to the link before? I'm sure there is but I can't work out how to do it. That way - if it's possible to do it - then I only have to define 1 class for all the links and just keep re-using it.

    My current CSS file is as follows:-

    body,td,th {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: small;
    color: #000099;
    background-color: #006600;
    }
    a:link, a:visited, a:active {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #000000;
    }
    a:hover {
    text-decoration: none;
    color: #FF0000;
    background-color: #000000;
    }
    #header {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    background-image: url(../Images/RoofFascia1.gif);
    height: 150px;
    }
    #navigationbar1 {
    background-image: url(../Images/DestinationBoard.gif);
    position: absolute;
    padding: 0px;
    width: 195px;
    color: #FFFFFF;
    background-color: #006600;
    left: 5px;
    top: 180px;
    height: 25px;
    }
    #navigationbar1 .text {
    position: absolute;
    left: 10px;
    top: 5px;
    }
    #navigationbar2 {
    background-image: url(../Images/DestinationBoard.gif);
    position: absolute;
    padding: 0px;
    width: 195px;
    color: #FFFFFF;
    background-color: #006600;
    left: 5px;
    top: 210px;
    height: 25px;
    }
    #navigationbar2 .text {
    position: absolute;
    left: 10px;
    top: 5px;
    }
    #maintextarea {
    background-color: white;
    color: black;
    position: absolute;
    padding: 5px;
    top: 190px;
    left: 210px;
    right: 15px;
    bottom: 20px;
    }

    If anyone could help me out I'd be awfully grateful.

    Cheers.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Menus are generally achieved using unordered lists. Have a look at listamatic for some excellent examples.

  4. #3
    Junior Member
    Join Date
    Jun 2006
    Location
    Sheerness, Kent, UK
    Posts
    16
    Member #
    13338
    OK, cheers for that. I've now converted over the menu to an unordered list and it works nearly how I want it to. I can work out how to do it all the way I want at a later stage but, for now, it's good enough to achieve most of the effect I was after.

    And it shortened the CSS file as well.

    Much appreciated.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Great! Feel free to ask if you want to get the other effects sorted out :-)


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:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com