Category Archives: CSS

FREE Horizontal CSS Navigation Bar

All navigation bars are basically lists of links, so using the <ul> and <li> elements makes tidy sense:

<ul>
<li><a href=”#”>Page1</a></li>
<li><a href=”#”>Page2</a></li>
<li><a href=”#”>Page3</a></li>
<li><a href=”#”>Page4</a></li>
</ul>

To remove the bullets you will need to add the following CSS

ul
{
list-style-type:none;
}

The navigation will then need to be floated and a tidy style applied

li
{
float:left;
}
a
{
display:block;
width:100px;
background-color:#F90;
padding:15px;
margin-left:3px;
text-decoration:none;
text-align:center;
color:#333;
}

Please note that if a DOCTYPE is not specified, floating items can produce unexpected results. So here is what your page would look like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<style type=”text/css”>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:100px;
background-color:#F90;
padding:15px;
margin-left:3px;
text-decoration:none;
text-align:center;
color:#333;
}
</style>
</head>
<body>
<ul>
<li><a href=”#”>Page1</a></li>
<li><a href=”#”>Page2</a></li>
<li><a href=”#”>Page3</a></li>
<li><a href=”#”>Page4</a></li>
</ul>
</body>
</html>

Download Sample

What is a Cascading Style Sheet?

CSS (Cascading Style Sheet) basically tells a web browser how it should format a page that is being loaded… CSS can be placed inside the web page itself, however ideally it needs to be placed in a separate document which is linked to the web page! So in the head section of your webpage you would insert:

<link href=”style/style.css” rel=”stylesheet” type=”text/css” />

The page in question would then link to a file called style.css which would tell the page how to look… So what if I wanted a black background and some tidy text?? Well I would write:

body  {
margin: auto; 
padding: 0;
background-color: #000;
}
#container {
position: relative;
width: 700px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
padding: 10px;
}

You would then need to add the following into the body section:

<body>
<div id=”container”>test</div>
</body>

How to centre a DIV using CSS

In our Tidy Blog we will show you how to use CSS to control the style and layout of multiple web pages! For example, if you wanted your content DIV to have a width of 700 pixels and to be centred in the browser your CSS would read:

#content {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

The above  code works in IE 6, 7, 8, Firefox, Opera and Safari so all you now need to do is insert:

<div id=”content”>test</div>

in the body of your webpage and away you go!