I saw this navgation design using css. I tried a lot of times but it is not compatible with IE on Macs. (It does not show up right). So I was wondering can someone make that navigation desing just like this website:
<!-- m --><a class="postlink" href="http://stopdesign.com/articles/">http://stopdesign.com/articles/</a><!-- m -->
I will work from there. I just want the basic structure (like the table design and text inside it) then I will add the a: hover and so on.
Thanks
P.S. Please help me on thisTry this.
CSS
#nav {
font-size: 95%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#nav ul {
padding: 0 0 0 25px;
margin: 0;
text-transform: lowercase;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li#last a {
border-right: 1px solid #000;
}
#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 2px 8px;
color: #000;
text-decoration: none;
border-left: 1px solid #000;
}
#nav ul li a:hover {
color: #f00;
background-color: #ccc;
}
HTML
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Portfolio</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Log</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Articles</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Examples</a></li>
<li id="last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">See Also</a></li>
</ul>
<div style="clear: both;"></div>
</div>
IE 5.0/Win has a problem with this; if anyone out there can figure out what causes this problem or how to fix it, please speak up.
***EDIT***
Note, I just looked at Stopdesign's navigation and attempted to replicate it; I copied nothing from the site. You can, if you wish to, copy his HTML and CSS.
<!-- m --><a class="postlink" href="http://stopdesign.com/articles/">http://stopdesign.com/articles/</a><!-- m -->
I will work from there. I just want the basic structure (like the table design and text inside it) then I will add the a: hover and so on.
Thanks
P.S. Please help me on thisTry this.
CSS
#nav {
font-size: 95%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#nav ul {
padding: 0 0 0 25px;
margin: 0;
text-transform: lowercase;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li#last a {
border-right: 1px solid #000;
}
#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 2px 8px;
color: #000;
text-decoration: none;
border-left: 1px solid #000;
}
#nav ul li a:hover {
color: #f00;
background-color: #ccc;
}
HTML
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Portfolio</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Log</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Articles</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Examples</a></li>
<li id="last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">See Also</a></li>
</ul>
<div style="clear: both;"></div>
</div>
IE 5.0/Win has a problem with this; if anyone out there can figure out what causes this problem or how to fix it, please speak up.
***EDIT***
Note, I just looked at Stopdesign's navigation and attempted to replicate it; I copied nothing from the site. You can, if you wish to, copy his HTML and CSS.