CODEWITHSUNDEEP
htmlcssalignmentpositioning
Dan
Dan

Reputation: 41

Why is the text not aligned to top?

I have this menu bar at the top of my page and it's not aligned properly.

The links are meant to be aligned to the bar so they are the same height.

Example here.

HTML:

<html>
<head>
<title>DatNerd - Home</title>
<!--External Javascripts-->
<script src="externals/javascript/jquery-1.8.3.js"></script>
<script src="externals/javascript/jquery-ui.js"></script>
<script src="externals/javascript/jquery.cookie.js"></script>
<script src="externals/javascript/animated-hover.js"></script>
<script src="externals/javascript/javascript.js"></script>
<script src="externals/javascript/mobdetect.js"></script>
<!--External CSS-->
<link rel="stylesheet" href="externals/css/main.css" />
<link rel="stylesheet" href="externals/css/jquery-ui.css" /></head>
<body>

<div id="toolbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Stats</a></li>
<li><a href="#">Projects</a></li>
</ul>
</div>

</body>
</html>

CSS:

#toolbar
{
background: #b2b2b2; /* Old browsers */
background: -moz-linear-gradient(top,  #b2b2b2 2%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#b2b2b2), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b2b2b2 2%,#2b2b2b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
width:100%;
height:40px;
position:fixed;
top:0;
left:0;
line-height:40px;
}

#toolbar ul
{
list-style-type:none;
}
#toolbar a
{
float:left;
width:100px;
text-decoration:none;
color:white;
background-color:purple;
height:100%;
text-align:center;
}

#toolbar a:hover
{
background-color:#ff3300;
}

#toolbar li {
display:inline;
}

Upvotes: 0

Views: 224

Answers (4)

Bob
Bob

Reputation: 11

Stick this in your css as it helps stop bulletpoints ect.. when making a ul li list

ol, ul{list-style:none;}

Upvotes: 0

suresh gopal
suresh gopal

Reputation: 3156

Try this:

#toolbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Upvotes: 1

Jacob
Jacob

Reputation: 1536

#toolbar ul {
  margin: 0;
  padding: 0;
}

In general, you may find a reset stylesheet helpful.

Upvotes: 1

Paul Fleming
Paul Fleming

Reputation: 24526

You need to set the margin and padding of the ul to 0. Your browser (user agent) has default styles. For ul, this includes margin, padding, list-style, etc. You've cleared the list-style-type, but nothing else.

#toolbar ul {
    padding: 0;
    margin: 0;
}

Hit F12 in your browser to launch the developer tools. Here, you can inspect the element to locate the offending CSS. If you're using FireFox, you may need to install FireBug. Other major browsers come with dev tools preinstalled.

Upvotes: 1

Related Questions