Forums
This topic is locked
CSS Question...
Posted 29 Oct 2004 11:27:23
1
has voted
29 Oct 2004 11:27:23 Janusz Jasinski posted:
I have a site here: janusz.co.uk/dudley%2Dbeacon/ and I was wondering how to achieve the look of the navigation below the top banner using just CSS and for it to be cross browser friendly?Thanks!
Yup - janusz.co.uk
Replies
Replied 29 Oct 2004 13:48:54
29 Oct 2004 13:48:54 Stefan P replied:
Hi
Try this. It's simply a styled unordered list. You can customise it as required:
<html>
<head>
<title>Horizontal List</title>
</head>
<style>
#nav {
margin: 0;
padding: 0;
}
#nav li {
display: inline;
list-style-type: none;
background: #ccc;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
padding-left: 4px;
margin: 0;
width: 25%;
}
.one {
border-left: 1px solid #666;
margin: 0;
}
</style>
<body>
<ul id="nav">
<li class="one"><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>
Stefan - www.pash.biz
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Edited by - sesame on 29 Oct 2004 13:50:23
Edited by - sesame on 29 Oct 2004 13:51:33
Try this. It's simply a styled unordered list. You can customise it as required:
<html>
<head>
<title>Horizontal List</title>
</head>
<style>
#nav {
margin: 0;
padding: 0;
}
#nav li {
display: inline;
list-style-type: none;
background: #ccc;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
padding-left: 4px;
margin: 0;
width: 25%;
}
.one {
border-left: 1px solid #666;
margin: 0;
}
</style>
<body>
<ul id="nav">
<li class="one"><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>
Stefan - www.pash.biz
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Edited by - sesame on 29 Oct 2004 13:50:23
Edited by - sesame on 29 Oct 2004 13:51:33
Replied 29 Oct 2004 14:17:30
29 Oct 2004 14:17:30 Janusz Jasinski replied:
Unfortunately not.... what if the link goes onto two lines? It doesn't display properly in Mozilla Firefox and there are problems when I go and change the abckground <img src=../images/dmxzone/forum/icon_smile_sad.gif border=0 align=middle>
Bummer!
Yup - janusz.co.uk
Bummer!
Yup - janusz.co.uk
Replied 29 Oct 2004 14:55:09
29 Oct 2004 14:55:09 Seb Adlington replied:
Try this. Have this lot in external Style sheet
#mainnavblue a { padding: 5px 10px; }
#mainnavblue a:link, #mainnav a:visited
{
color: #4F131A;
text-decoration: none;
height: 12px;
width: 160px;
font-style: normal;
background-color: #E0CAFC;
}
#mainnavblue a:hover
{
color: #4F131A;
background-color: #E6D6D9;
text-decoration: none;
height: 12px;
width: 160px;
}
Adjust the height and widths to what you need
Attach it to your page, then in your table, ID each TD with Mainnavblue - if you want the different colours either use some javascript or create a load of maninav entries.
My not be elegant n all that but should work ok. CSS not really my thing.
#mainnavblue a { padding: 5px 10px; }
#mainnavblue a:link, #mainnav a:visited
{
color: #4F131A;
text-decoration: none;
height: 12px;
width: 160px;
font-style: normal;
background-color: #E0CAFC;
}
#mainnavblue a:hover
{
color: #4F131A;
background-color: #E6D6D9;
text-decoration: none;
height: 12px;
width: 160px;
}
Adjust the height and widths to what you need
Attach it to your page, then in your table, ID each TD with Mainnavblue - if you want the different colours either use some javascript or create a load of maninav entries.
My not be elegant n all that but should work ok. CSS not really my thing.
Replied 29 Oct 2004 15:36:37
29 Oct 2004 15:36:37 Janusz Jasinski replied:
no worries - dont think you can do what I want to achieve in just CSS... will stick to the static background in the table
cheers!
Yup - janusz.co.uk
cheers!
Yup - janusz.co.uk
Replied 29 Oct 2004 15:37:53
29 Oct 2004 15:37:53 Stefan P replied:
Hold your horses...
Try these guys:
css.maxdesign.com.au/listamatic/
Looks like these examples may be useful??
Stefan - www.pash.biz
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Try these guys:
css.maxdesign.com.au/listamatic/
Looks like these examples may be useful??
Stefan - www.pash.biz
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Replied 29 Oct 2004 17:34:08
29 Oct 2004 17:34:08 Janusz Jasinski replied:
checked them alread - it is all fine but renders different results in different browsers <img src=../images/dmxzone/forum/icon_smile_dissapprove.gif border=0 align=middle> which is a bugger... will check again to see if missed something
Yup - janusz.co.uk
Yup - janusz.co.uk