I am using this code but I have a couple of questions to asked:
1) I want on rollover that the word is bold and white color?
2)I want to center the text but it won't do it. It is shoved to the left. How do I fix that?
3)How do I make the entire table bigger, and the columns that the texts are in?
Here is the picture if you don't know what I am talking about the columns.
#nav {
font-size: 100%;
border-top: 1px solid #663333;
border-bottom: 1px solid #663333;
border-right: 1px solid #663333;
border-left: 1px solid #663333;
background-image: url(../media/images/navigationbg/navi.gif);
}
#nav ul {
padding: 0 0 0 25px;
margin: 0;
text-transform: none;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li#last a {
border-right: 1px solid #663333;
}
#nav ul li a:link, #nav ul li a:visited {
display:block;
padding: 2px 8px 0 30;
color: #000;
text-decoration: none;
border-left: 1px solid #663333;
}
#nav ul li a:hover {
font-color: #FFFFFF;
background-color: #432222;
text-decoration: underline;
font-weight: bolder;
}
Please help me on this
THanks so muchThere's nothing we can do without a link or the html...You want color: #fff; and font-weight: bold;.
Apply text-align: center; to the #nav styles.
For one thing, it isn't a table, and two, how exactly do you want it bigger? The size of the link "boxes" is controlled via padding.
Oh, and this line: padding: 2px 8px 0 30; should be: padding: 2px 8px 0 30px; -- all non-zero values require a unit identifier (px, em, ex, %, pt, ect.).
Oh, and Sam, this looks really familiar.
The original code has been modified, but I wrote this for someone in an attempt to roughly replicate Douglas Bowman's main navigation at Stopdesign.where is the code that you use for someone else? Paul Jr
I really need that code please.
thanksOriginally posted by homeboy
where is the code that you use for someone else? Paul Jr
I really need that code please.
thanks
What you have right there is basically the exact code, but a few changes have been made, however the changes are minor, so what you have should be fine.
Try using this, but you're going to have to make changes according to your preference.
#nav {
font-size: 100%;
border: 1px solid #633;
background-image: url(../media/images/navigationbg/navi.gif);
}
#nav ul {
padding: 0 0 0 25px;
margin: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li#last a {
border-right: 1px solid #633;
}
#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 4px 16px;
color: #000;
text-decoration: none;
border-left: 1px solid #633;
float: left;
}
#nav ul li a:hover {
color: #fff;
background-color: #432222;
text-decoration: underline;
font-weight: 900;
}
And the HTML would look something like this:
<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/"">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Services</a></li>
<li id="last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Contact</a></li>
</ul>
<div style="clear: both;"></div>
</div>
***EDIT***
Now that I look, I wrote this code for you in another thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=44562">http://www.webdeveloper.com/forum/showt ... adid=44562</a><!-- m -->).
1) I want on rollover that the word is bold and white color?
2)I want to center the text but it won't do it. It is shoved to the left. How do I fix that?
3)How do I make the entire table bigger, and the columns that the texts are in?
Here is the picture if you don't know what I am talking about the columns.
#nav {
font-size: 100%;
border-top: 1px solid #663333;
border-bottom: 1px solid #663333;
border-right: 1px solid #663333;
border-left: 1px solid #663333;
background-image: url(../media/images/navigationbg/navi.gif);
}
#nav ul {
padding: 0 0 0 25px;
margin: 0;
text-transform: none;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li#last a {
border-right: 1px solid #663333;
}
#nav ul li a:link, #nav ul li a:visited {
display:block;
padding: 2px 8px 0 30;
color: #000;
text-decoration: none;
border-left: 1px solid #663333;
}
#nav ul li a:hover {
font-color: #FFFFFF;
background-color: #432222;
text-decoration: underline;
font-weight: bolder;
}
Please help me on this
THanks so muchThere's nothing we can do without a link or the html...You want color: #fff; and font-weight: bold;.
Apply text-align: center; to the #nav styles.
For one thing, it isn't a table, and two, how exactly do you want it bigger? The size of the link "boxes" is controlled via padding.
Oh, and this line: padding: 2px 8px 0 30; should be: padding: 2px 8px 0 30px; -- all non-zero values require a unit identifier (px, em, ex, %, pt, ect.).
Oh, and Sam, this looks really familiar.
The original code has been modified, but I wrote this for someone in an attempt to roughly replicate Douglas Bowman's main navigation at Stopdesign.where is the code that you use for someone else? Paul JrI really need that code please.
thanksOriginally posted by homeboy
where is the code that you use for someone else? Paul Jr
I really need that code please.
thanks
What you have right there is basically the exact code, but a few changes have been made, however the changes are minor, so what you have should be fine.
Try using this, but you're going to have to make changes according to your preference.
#nav {
font-size: 100%;
border: 1px solid #633;
background-image: url(../media/images/navigationbg/navi.gif);
}
#nav ul {
padding: 0 0 0 25px;
margin: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li#last a {
border-right: 1px solid #633;
}
#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 4px 16px;
color: #000;
text-decoration: none;
border-left: 1px solid #633;
float: left;
}
#nav ul li a:hover {
color: #fff;
background-color: #432222;
text-decoration: underline;
font-weight: 900;
}
And the HTML would look something like this:
<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/"">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Services</a></li>
<li id="last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Contact</a></li>
</ul>
<div style="clear: both;"></div>
</div>
***EDIT***
Now that I look, I wrote this code for you in another thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=44562">http://www.webdeveloper.com/forum/showt ... adid=44562</a><!-- m -->).