The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
You can read about HTML lists in a previous tutorial. And you can also find some basic CSS techniques here. What I want to cover is one of the most popular ways to use lists and that is for your navigation. So a basic html list of links would looks like so...
And that looks like this.
Nothing special so far its just a list of links but you can at least see how it might end up as a navigation. So we start to style it with some css.
The first thing we want to do is get rid of the default styling thats already there. Those being the underlining of text on links and the padding & bullets elements on the list. To do this we'll define a CSS ID called nav and assign it to the list tag (
And our CSS will be
And that looks like this. Ok so it looks even less like a usable navigation at the moment.
Notice I'm using css selectors here. "#nav a" means apply this style to all a tags within the element I assign the ID #nav to.
Now we can do our first real bit of styling though. What I want to do is put some space between links, give them a background, a border and make the text white. To do that I'll use the css properties
My new CSS looks like
And that looks like this. Thats a step in the right direction, kind of. :)
Theres a few things we need to correct though. The links are overlapping each other and they are various lengths. To fix the length, the obvious answer is to apply a
See the results for yourself.
Anyway, the CSS for that looks like
Finally it looks like a useable navigation. It doesnt look very good though.
My first problem is the border. As we're putting border around each element we're left with thick black lines in the middle. Each navigation item is an inside an so I've got 2 sets of borders I can play with. Theres a bit of some room to be creative without using images at all.
And my attempt at being "creative" can be seen here.
What I've done is :
Move the black border to the
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
And that looks like this.
Nothing special so far its just a list of links but you can at least see how it might end up as a navigation. So we start to style it with some css.
The first thing we want to do is get rid of the default styling thats already there. Those being the underlining of text on links and the padding & bullets elements on the list. To do this we'll define a CSS ID called nav and assign it to the list tag (
<ul id="nav">)And our CSS will be
#nav {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav a {
text-decoration:none;
}
And that looks like this. Ok so it looks even less like a usable navigation at the moment.
Notice I'm using css selectors here. "#nav a" means apply this style to all a tags within the element I assign the ID #nav to.
Now we can do our first real bit of styling though. What I want to do is put some space between links, give them a background, a border and make the text white. To do that I'll use the css properties
background-color, border and paddingMy new CSS looks like
#nav {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav a {
text-decoration:none;
padding:4px 10px;
background-color:#2175bc;
border:1px #000 solid;
color:#FFF;
}
And that looks like this. Thats a step in the right direction, kind of. :)
Theres a few things we need to correct though. The links are overlapping each other and they are various lengths. To fix the length, the obvious answer is to apply a
width property to my list. This wont work on its own though. My link tags are in-line elements. This type of element uses as little space as possible (and thus effectively ignores my width assignment). To make this work though, I need my link tag to use all the space available to it and expand into the width I set on my list. So the solution is to turn my link into a block element. And I can use the display property to do that. Fortunately doing this is also going to fix the problem of my links overlapping as block elements wont overlap in this situation. See the results for yourself.
Anyway, the CSS for that looks like
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width:12em;
}
#nav a {
text-decoration:none;
padding:4px 10px;
background-color:#2175bc;
border:1px #000 solid;
color:#FFF;
display:block;
}
Finally it looks like a useable navigation. It doesnt look very good though.
My first problem is the border. As we're putting border around each element we're left with thick black lines in the middle. Each navigation item is an inside an
And my attempt at being "creative" can be seen here.
What I've done is :
Move the black border to the
- tag so it surrounds the whole navigation.
- tag
Applied a 12px left border to the tag
Applied an 8px right border to the tag
(I've also set the font to Verdana).
#nav {
margin: 0;
padding: 0;
list-style-type: none;
font-family:verdana;
width:12em;
border:1px #000 solid;
}
#nav li {
border-bottom:1px #aedaff solid;
}
#nav a {
text-decoration:none;
padding:4px 10px;
background-color:#2175bc;
border-left:12px #67b3f3 solid;
border-right:8px #1b588c solid;
color:#FFF;
display:block;
}
All I'm missing now is a rollover. And I can use the:hoverproperty in css to make that happen. Mine is going to look like
#nav a:hover {
background-color:#2a9af8;
border-left:12px #81c5ff solid;
border-right:8px #257cc6 solid;
}
And you can see the result here. Quite presentable if I do say so myself.
This isnt just good for vertical navigations either. If we roll back to the unstyled list. Its quite straightforward to turn that into a horizontal navigation. The biggest change from what we've done before is to make it horizontal (obviously). To do that I need to use thefloatproperty to force my list elements to "float left" against each other. And because the links are side by side, I'll add a width to them.
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width:40em;
}
#nav li {
float:left;
width:8em;
}
#nav a {
text-decoration:none;
display:block;
}
Which gives me this. I've also set a width on the #nav element to stop my nav elements stacking below each other if the browser window width is less than the total width of the navigation. And now I can style with the same sort of techniques as above.
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width:40em;
background-color:#2175bc;
float:left;
}
#nav li {
float:left;
width:8em;
}
#nav a {
text-decoration:none;
display:block;
color:#FFF;
padding:1px 8px;
border-right:1px #1b588c solid;
text-align:center;
}
#nav a:hover {
background-color:#2a9af8;
}
I've applied a width to my list elements, given my link tags a border to the right to act as a separator and also centred the text to make it look a bit tidier.
And tada, a horizontal navigation.
The beauty of all this is that you can do it just by changing your CSS and not having to tamper with your html directly.
I've put up some more examples here of other possible styles, you can do tabs, 3d buttons (only using css borders) and so on. I've still only touched on the surface of the possibilities though especially when you add background images into the mix.
Applied a 1px border to the bottom of the
Nice post!
If you hadn't skimped on the hosting of your demo site you could get a GAD for this!
If you hadn't skimped on the hosting of your demo site you could get a GAD for this!
[s]Hmmm...[/s]
You can read about HTML lists in a previous tutorial. And you can also find some basic CSS techniques here. What I want to cover is one of the most popular ways to use lists and that is for your navigation. So a basic html list of links would looks like so...
And that looks like this.
Nothing special so far its just a list of links but you can at least see how it might end up as a navigation. So we start to style it with some css.
The first thing we want to do is get rid of the default styling thats already there. Those being the underlining of text on links and the padding & bullets elements on the list. To do this we'll define a CSS ID called nav and assign it to the list tag (
And our CSS will be
And that looks like this. Ok so it looks even less like a usable navigation at the moment.
Notice I'm using css selectors here. "#nav a" means apply this style to all a tags within the element I assign the ID #nav to.
Now we can do our first real bit of styling though. What I want to do is put some space between links, give them a background, a border and make the text white. To do that I'll use the css properties
My new CSS looks like
And that looks like this. Thats a step in the right direction, kind of. :)
Theres a few things we need to correct though. The links are overlapping each other and they are various lengths. To fix the length, the obvious answer is to apply a
See the results for yourself.
Anyway, the CSS for that looks like
Finally it looks like a useable navigation. It doesnt look very good though.
My first problem is the border. As we're putting border around each element we're left with thick black lines in the middle. Each navigation item is an inside an so I've got 2 sets of borders I can play with. Theres a bit of some room to be creative without using images at all.
And my attempt at being "creative" can be seen here.
What I've done is :
Move the black border to the
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
And that looks like this.
Nothing special so far its just a list of links but you can at least see how it might end up as a navigation. So we start to style it with some css.
The first thing we want to do is get rid of the default styling thats already there. Those being the underlining of text on links and the padding & bullets elements on the list. To do this we'll define a CSS ID called nav and assign it to the list tag (
<ul id="nav">)And our CSS will be
#nav {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav a {
text-decoration:none;
}
And that looks like this. Ok so it looks even less like a usable navigation at the moment.
Notice I'm using css selectors here. "#nav a" means apply this style to all a tags within the element I assign the ID #nav to.
Now we can do our first real bit of styling though. What I want to do is put some space between links, give them a background, a border and make the text white. To do that I'll use the css properties
background-color, border and paddingMy new CSS looks like
#nav {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav a {
text-decoration:none;
padding:4px 10px;
background-color:#2175bc;
border:1px #000 solid;
color:#FFF;
}
And that looks like this. Thats a step in the right direction, kind of. :)
Theres a few things we need to correct though. The links are overlapping each other and they are various lengths. To fix the length, the obvious answer is to apply a
width property to my list. This wont work on its own though. My link tags are in-line elements. This type of element uses as little space as possible (and thus effectively ignores my width assignment). To make this work though, I need my link tag to use all the space available to it and expand into the width I set on my list. So the solution is to turn my link into a block element. And I can use the display property to do that. Fortunately doing this is also going to fix the problem of my links overlapping as block elements wont overlap in this situation. See the results for yourself.
Anyway, the CSS for that looks like
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width:12em;
}
#nav a {
text-decoration:none;
padding:4px 10px;
background-color:#2175bc;
border:1px #000 solid;
color:#FFF;
display:block;
}
Finally it looks like a useable navigation. It doesnt look very good though.
My first problem is the border. As we're putting border around each element we're left with thick black lines in the middle. Each navigation item is an inside an
And my attempt at being "creative" can be seen here.
What I've done is :
Move the black border to the
- tag so it surrounds the whole navigation.
- tag
Applied a 12px left border to the tag
Applied an 8px right border to the tag
(I've also set the font to Verdana).
#nav {
margin: 0;
padding: 0;
list-style-type: none;
font-family:verdana;
width:12em;
border:1px #000 solid;
}
#nav li {
border-bottom:1px #aedaff solid;
}
#nav a {
text-decoration:none;
padding:4px 10px;
background-color:#2175bc;
border-left:12px #67b3f3 solid;
border-right:8px #1b588c solid;
color:#FFF;
display:block;
}
All I'm missing now is a rollover. And I can use the:hoverproperty in css to make that happen. Mine is going to look like
#nav a:hover {
background-color:#2a9af8;
border-left:12px #81c5ff solid;
border-right:8px #257cc6 solid;
}
And you can see the result here. Quite presentable if I do say so myself.
This isnt just good for vertical navigations either. If we roll back to the unstyled list. Its quite straightforward to turn that into a horizontal navigation. The biggest change from what we've done before is to make it horizontal (obviously). To do that I need to use thefloatproperty to force my list elements to "float left" against each other. And because the links are side by side, I'll add a width to them.
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width:40em;
}
#nav li {
float:left;
width:8em;
}
#nav a {
text-decoration:none;
display:block;
}
Which gives me this. I've also set a width on the #nav element to stop my nav elements stacking below each other if the browser window width is less than the total width of the navigation. And now I can style with the same sort of techniques as above.
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width:40em;
background-color:#2175bc;
float:left;
}
#nav li {
float:left;
width:8em;
}
#nav a {
text-decoration:none;
display:block;
color:#FFF;
padding:1px 8px;
border-right:1px #1b588c solid;
text-align:center;
}
#nav a:hover {
background-color:#2a9af8;
}
I've applied a width to my list elements, given my link tags a border to the right to act as a separator and also centred the text to make it look a bit tidier.
And tada, a horizontal navigation.
The beauty of all this is that you can do it just by changing your CSS and not having to tamper with your html directly.
I've put up some more examples here of other possible styles, you can do tabs, 3d buttons (only using css borders) and so on. I've still only touched on the surface of the possibilities though especially when you add background images into the mix.
Applied a 1px border to the bottom of the