Howdy~
This si my first CSS post and wanted to know how to take the following code that a friend made and put it into a html page and can it be made it have say four rows on top of each other:
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>
CSS
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
Thanks
The Devilnot sure what you are trying to do. can you please elaborate?it is to be a tab menu
Thanks
The Devilso you mean that you want 4 tabs across the top of the screen horizontally, or maybe 4 tabs to the left of the screen going vertically?seems like that is what you are providing us, so I am not sure what needs to be done. Sorry for being confused, but the css you provided is to mark up the html you provided which is for four links. What am I missing?i think i got what you want help with.
take the part under HTML and stick that in your HTML someplace exactly how it is, and in the href tags change "#" to the address of hte links and the text to whatever you want that to be.
take everything under CSS and copy that. create a new document called "style.css" and paste everything into it, then save it in the same directory as yuor html document.
go back to your HTML document and put this in the header:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css"/>
this tells the browser the following things: 1. another document will be used to help load this site; 2. the document is a css file; 3. the path of the css document.kendokendokendo~
Thank you, you knew what I was trying to say. But now I need to know if I can have the tabs in four rows one on top of one on top of one on top of one?
tab 1 tab 2 tab 3
tab 4 tab 5 tab 6
and so on.
Thanks
The Devili think a simple fix would be to stick a <br/> tag right after tab 3's closing link tag, and then just change your doctype to transitional rather than strict.
This si my first CSS post and wanted to know how to take the following code that a friend made and put it into a html page and can it be made it have say four rows on top of each other:
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>
CSS
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
Thanks
The Devilnot sure what you are trying to do. can you please elaborate?it is to be a tab menu
Thanks
The Devilso you mean that you want 4 tabs across the top of the screen horizontally, or maybe 4 tabs to the left of the screen going vertically?seems like that is what you are providing us, so I am not sure what needs to be done. Sorry for being confused, but the css you provided is to mark up the html you provided which is for four links. What am I missing?i think i got what you want help with.
take the part under HTML and stick that in your HTML someplace exactly how it is, and in the href tags change "#" to the address of hte links and the text to whatever you want that to be.
take everything under CSS and copy that. create a new document called "style.css" and paste everything into it, then save it in the same directory as yuor html document.
go back to your HTML document and put this in the header:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css"/>
this tells the browser the following things: 1. another document will be used to help load this site; 2. the document is a css file; 3. the path of the css document.kendokendokendo~
Thank you, you knew what I was trying to say. But now I need to know if I can have the tabs in four rows one on top of one on top of one on top of one?
tab 1 tab 2 tab 3
tab 4 tab 5 tab 6
and so on.
Thanks
The Devili think a simple fix would be to stick a <br/> tag right after tab 3's closing link tag, and then just change your doctype to transitional rather than strict.