On this page (links won't work yet) I'm having trouble with a border showing up when you hover over the navigation. I don't want any bright blue border on it.
my problem navigation (<!-- m --><a class="postlink" href="http://www.centralokhomeschoolbands.com/about.php">http://www.centralokhomeschoolbands.com/about.php</a><!-- m -->)
I've messed with it for quite a while, but can't figure how to take it off. I think it has something to do with the navigation being inside a table data.
Any help is greatly appreciated!
KT
Here is the css for my navigation
#navigation{
background:#3366ff;
vertical-align:top;
border-style:none;
}
#navigation a{display:block;
color:white;
padding:4px 25px 4px 4px;
text-decoration:none;
border-bottom:1px white solid;
font-weight:bold;
font-size:17px;
font-family:"comic sans ms";
line-height:18px;
text-align:left;
}
#navigation .indent{text-indent:1.5em;
font-family:verdana;
font-size:13px;
text-align:left;}
#navigation a:hover{
color:white;
padding:5px;
background:#99ccff;
text-decoration:none;
border-bottom: 1px white solid;
text-align:left;}
Here is the HTML for my navigation
<!-- LEFT NAV STARTS HERE-->
<td width="21%" valign="top" bgcolor="#3366ff">
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"> Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php"> About COHB</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php#history" class="indent"> History </a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"directors.php" class="indent"> Directors</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pictures.php" class="indent" > Pictures</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php">Band Programs</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php#beginning" class="indent">Beginning</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php#intermediate" class="indent">Intermediate</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php#advanced" class="indent"> Advanced</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"locations.php">Band Locations</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ardmore.php" class="indent"> Ardmore</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"chickasha.php" class="indent"> Chickasha</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"dibble.php" class="indent"> Dibble</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"edmond.php" class="indent"> Edmond</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"midwestcity.php" class="indent"> Midwest City</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"norman.php" class="indent"> Norman</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"shawnee.php" class="indent"> Shawnee</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stillwater.php" class="indent"> Stillwater</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"yukon.php" class="indent"> Yukon</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stringprograms.php">String Program</a>
<!-- hide for now
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stringprograms.php#orchestra" class="indent"> Orchestra</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stringprograms.php#locations" class="indent"> Locations</a>
-->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"costsandfees.php"> Costs and Fees</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"members.php"> Members</a>
</div>
</td>
<!-- LEFT NAV ENDS HERE -->I don't see anything obvious but there's some jumping around with menu hovers.First of all, that should REALLY be a list, such as...
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php">About COHB</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php#history">History</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"directors.php"> Directors</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"pictures.php"> Pictures</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php">Band Programs</a></li>
</ul>
</li>
[...]
</ul>
Er, just clean that up first, 'kay?
EDIT: Malformed example code.Ben Rogers,
I tried making it into a list...I messed with it for a long time, but I can't figure out how in the world to make it a list and get it to look the same as before. I'm new to this all, and am curious why it "really should" be a list?
Can you point me in the right direction?
I fixed the hover jumping around...but I still have that annoying thin blue border.....
KTFirst of all, think of how it will look in text browsers: a lump of links is hardly usable at all. Also, audio browsers (browsers for the blind) are going to be more usable with semantic markup (rather than reading this links in a quick monotone, they should read them as a list). As for taming them, remember that lists have margins, paddings, and list-items added to them. To control those... ul {margin: 0; padding: 0; list-item: none;}. Once you get into the box model this'll be cake.I'm new to this all, and am curious why it "really should" be a list?Because that's what it is, a list of links.Ok, thanks. I believe you.
K
my problem navigation (<!-- m --><a class="postlink" href="http://www.centralokhomeschoolbands.com/about.php">http://www.centralokhomeschoolbands.com/about.php</a><!-- m -->)
I've messed with it for quite a while, but can't figure how to take it off. I think it has something to do with the navigation being inside a table data.
Any help is greatly appreciated!
KT
Here is the css for my navigation
#navigation{
background:#3366ff;
vertical-align:top;
border-style:none;
}
#navigation a{display:block;
color:white;
padding:4px 25px 4px 4px;
text-decoration:none;
border-bottom:1px white solid;
font-weight:bold;
font-size:17px;
font-family:"comic sans ms";
line-height:18px;
text-align:left;
}
#navigation .indent{text-indent:1.5em;
font-family:verdana;
font-size:13px;
text-align:left;}
#navigation a:hover{
color:white;
padding:5px;
background:#99ccff;
text-decoration:none;
border-bottom: 1px white solid;
text-align:left;}
Here is the HTML for my navigation
<!-- LEFT NAV STARTS HERE-->
<td width="21%" valign="top" bgcolor="#3366ff">
<div id="navigation">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"> Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php"> About COHB</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php#history" class="indent"> History </a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"directors.php" class="indent"> Directors</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pictures.php" class="indent" > Pictures</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php">Band Programs</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php#beginning" class="indent">Beginning</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php#intermediate" class="indent">Intermediate</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php#advanced" class="indent"> Advanced</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"locations.php">Band Locations</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ardmore.php" class="indent"> Ardmore</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"chickasha.php" class="indent"> Chickasha</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"dibble.php" class="indent"> Dibble</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"edmond.php" class="indent"> Edmond</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"midwestcity.php" class="indent"> Midwest City</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"norman.php" class="indent"> Norman</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"shawnee.php" class="indent"> Shawnee</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stillwater.php" class="indent"> Stillwater</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"yukon.php" class="indent"> Yukon</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stringprograms.php">String Program</a>
<!-- hide for now
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stringprograms.php#orchestra" class="indent"> Orchestra</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"stringprograms.php#locations" class="indent"> Locations</a>
-->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"costsandfees.php"> Costs and Fees</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"members.php"> Members</a>
</div>
</td>
<!-- LEFT NAV ENDS HERE -->I don't see anything obvious but there's some jumping around with menu hovers.First of all, that should REALLY be a list, such as...
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php">About COHB</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php#history">History</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"directors.php"> Directors</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"pictures.php"> Pictures</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bandprograms.php">Band Programs</a></li>
</ul>
</li>
[...]
</ul>
Er, just clean that up first, 'kay?
EDIT: Malformed example code.Ben Rogers,
I tried making it into a list...I messed with it for a long time, but I can't figure out how in the world to make it a list and get it to look the same as before. I'm new to this all, and am curious why it "really should" be a list?
Can you point me in the right direction?
I fixed the hover jumping around...but I still have that annoying thin blue border.....
KTFirst of all, think of how it will look in text browsers: a lump of links is hardly usable at all. Also, audio browsers (browsers for the blind) are going to be more usable with semantic markup (rather than reading this links in a quick monotone, they should read them as a list). As for taming them, remember that lists have margins, paddings, and list-items added to them. To control those... ul {margin: 0; padding: 0; list-item: none;}. Once you get into the box model this'll be cake.I'm new to this all, and am curious why it "really should" be a list?Because that's what it is, a list of links.Ok, thanks. I believe you.
K