Results 1 to 3 of 3

Thread: Bar at the top of page with links

  1. #1
    Join Date
    Mar 2011
    Posts
    2,004
    Thanks
    59
    Thanked 107 Times in 105 Posts
    Blog Entries
    4

    Default Bar at the top of page with links

    Hi everyone,

    I'm designing a website and for a while I have been focusing on the tech side of it but now I want to make it look nice. On xgen studios http://www.xgenstudios.com/ they have a bar along the top which says home, play games, forums, store, about us, help. I was wondering if there is a way to replicate this. Any help would be appreciated
    Last edited by keyboard; 07-27-2011 at 04:21 AM.

  2. #2
    Join Date
    Mar 2011
    Posts
    2,004
    Thanks
    59
    Thanked 107 Times in 105 Posts
    Blog Entries
    4

    Default

    I have been playing around with css and have found this.
    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
    
    
    
    <center>
    <ul id="list-nav"> 
    
    <li><a href="index.php">Home</a></li>
    <li><a href="audition.php">Auditions</a></li>
    <li><a href="hireservices.php">Hire Services</a></li>
    <li><a href="products.php">Hire</a></li>
    <li><a href="database.php">Register</a></li>
    <li><a href="login.php">Login</a></li>
    </ul>
    </center>
    
    
    
    
    </body>
    
    </html>

    and this

    HTML Code:
    ul#list-nav {
    list-style:none;
    margin:20px;
    padding:0;
    width:600px
    }
    
    ul#list-nav li {
    display:inline
    }
    
    ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#485e49;
    color:#eee;
    float:left;
    text-align:center;
    border-left:1px solid #fff;
    }
    
    ul#list-nav li a:hover {
    background:#a2b3a1;
    color:#000
    }
    It works well but I would like to add another bar in the middle, mabye silver, which isn't a link and just says Canberra Amatuer Productions. in nice big bold text and the green bit it's on could be wider. Any help would be appreciated.

    Also could someone please move my post cause it isn't really looking for a script any more.

  3. #3
    Join Date
    Jul 2011
    Location
    Denmark
    Posts
    18
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    You could start taking a look at DD's CSS library:

    http://www.dynamicdrive.com/style/cs...y/category/C1/

    There are lots of horizontal menus. As for http://www.xgenstudios.com/, their menu is
    made with images. If you have Photoshop or any graphic software, then try play around with that.

  4. The Following User Says Thank You to CChawps For This Useful Post:

    keyboard (07-27-2011)

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
  •