Patrick’s development blog

Creating a horizontal CSS navigation using lists

Posted in Webdesign by Patrick on March 3, 2008

Here follows an example of creating a horizontal navigation bar using CSS. I’ve marked the mandatory lines, the rest are just for the looks that I added.

<html>
<head>
<title>Horizontal navigation bar</title>
<style type=”text/css”>
body {
font-family: arial;
font-size: 12px;
}

#nav {
width: 900px;
height: 100px;
background: #dddddd;
border: 1px solid #000000;
padding: 7px;
}

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

#nav li {
float: left;
}

#nav a {
background: #555557;
border: 1px solid #333333;
color: #ffffff;
padding: 5px 35px 5px 35px;
display: block;
margin: 1px;
}

#nav a:hover {
background: #777777;
}
</style>
</head>

<body>

<div id=”nav”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 1</a></li>
</ul>
</div>

</body>
</html>

Tagged with: , , , ,

centering a <div> using CSS

Posted in Articles, Webdesign by Patrick on February 14, 2008

Centering something in HTML/XHTML isn’t a matter of course anymore. That doesn’t mean it’s anywhere hard, but designers get to know more and more about web standards nowadays and constantly struggles with web browsers that are a little deviant *cough* (Internet Explorer).

In the good old days, most people would probably attempt to center something using the <center> tag (I know this is the stone age). I’m not sure if it’s just that nobody cared back then, but nowadays it’s not a part of the standard. In my option, designing websites consists mostly of creating ugly hacks so the website works fairly well with most browsers, this is quite sad.

Anyways, this is what i’ve come across about how to center div’s using CSS.


#contents {
width: 400px;
margin-left: auto;
margin-right: auto;
}

<div id=”contents”>
Insert text/image/whatever here..
</div>

This would naturally be everything we would need in order to center the
<div> tag. Some browsers just behave differently (like Internet Explorer) though. That’s why we have to add text-align: center; into the body section of the CSS code. This will also center the text in the div so we will have to counter that by adding text-align: left; into the #contents id.

Centering a div using CSS


body {
text-align: center;
}

#contents {
text-align: left;
width: 400px;
margin-left: auto;
margin-right: auto;
}

<div id=”contents”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

The width attribute was put there in order to get a constant size of the box. It would look ridicilious other way. Now the contents box will be centered horizontally.