• Locked
1 reply [Last post]
Sun, 2012-02-19 20:38
JustinRey
JustinRey's picture
Offline
Last seen: 24 weeks 5 days ago
Regular
Timezone: GMT+1
Joined: 2010-09-16
Posts: 17
Points: 25

Hello everybody.

I have another question and I'm sure you guys can help my with this. I have been working on my new project for school. One of the problems is that I want to center my navigation buttons inside my navigation div but I can't figure it out. Somehow they just don't fully seem centered. Maybe you guys can get me started.

I thank you!

Here is my code:

html:

<html>
<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Bar">
        <ul>
            <li><a href="index.htm">Home</a></li>
            <li><a href="pagina2.htm">About us</a></li>
            <li><a href="pagina3.htm">Contact us</a></li>
        </ul>
</div>
</body>
</html>

CSS:

body {
background-color: black;
}
 
#Bar 
{
 width: 1200px;
 height: 50px;
 background-color: white;
 border-top-left-radius: 25px 25px;
 border-top-right-radius: 25px 25px;
 text-decoration:none;
}
 
#Bar ul
{
list-style: none;
padding: 0;
width:50%;
margin: 0 auto;
}
 
#Bar ul a
{
height: 20px;
float: left;
width: 100px;
display: block;
margin-top: 20px;
margin-left: 30px;
color: #444444;
font-family: verdana;
font-size: 13pt;
text-decoration: none;
}
 
#Bar ul a:hover
{
color: #ac0000;
text-decoration:none;
}
 
#Bar li
{
float: left;
text-decoration:none; 
}

Top
Tags:
Mon, 2012-02-20 06:40
#1
balajidesign
balajidesign's picture
Offline
Last seen: 30 weeks 1 day ago
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

change your code like

change your code like this:

body {
background-color: black;
}
 
#Bar 
{
 width: 1200px;
 display:block;
height:50px;
 background-color: white;
 border-top-left-radius: 25px 25px;
 border-top-right-radius: 25px 25px;
}
 
#Bar ul
{
list-style: none;
padding: 0;
width:50%;
margin: 0 auto;
display:block;
}
#Bar li{
 
display:inline;
float: left;
 
}
 
#Bar li a
{
 
float: left;
width: 100px;
display:block;
color: #444444;
font-family: verdana;
font-size: 13pt;
padding-top: 20px;
padding-bottom:10px;
padding-left: 30px;
text-decoration: none;
}
 
#Bar li a:hover
{
color: #ac0000;
background-color:#003399;
text-decoration:none;
}
 

Top
  • Locked