Resolved Bar at the top of page with links [Archive]

View Full Version : Resolved Bar at the top of page with links

keyboard

07-24-2011, 10:32 AM

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

keyboard

07-25-2011, 10:24 PM

I have been playing around with css and have found this.

<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

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.

CChawps

07-25-2011, 11:25 PM

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

http://www.dynamicdrive.com/style/csslibrary/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.