PDA

View Full Version : CSS Menu highlight



DJ Steffo
01-15-2005, 02:34 AM
Script: CSS Menu highlight
http://www.dynamicdrive.com/dynamicindex1/csshighlight.htm

Hello!
I like this script since it is small. But the problem is that it automatically becomes a vertical menu. I would like it to be horizontell and cannot understand why it becomes vertical. :confused: There are no linebreaks but in order to make it horizontell I have to put it in a table and force it.
Isn't there some easy way so it becomes horizontel?

<style>
A.menulink {
display: block;
text-align: left;
text-decoration: none;
font-family: verdana;
font-size:10px;
color: #000000;
BORDER: 1px;
border: solid 1px #FFFFFF;
}

A.menulink:hover {

text-align: left;
text-decoration: none;
font-family: verdana;
font-size:10px;

BORDER: 1px;
border: solid 1px #6100C1;
background-color:#EFEFEF;

}

</style>

cr3ative
01-15-2005, 07:50 AM
.

cr3ative

ddadmin
01-17-2005, 10:42 PM
Hmm i'm confused- this is a vertical menu by design due to the table layout that follows. I guess you can try turning it into a horizontal menu, but some structural changes need to be made to the table obviously to convert the table cells so they're adjacent to one another.

Minos
01-18-2005, 06:47 AM
It would be very easy. First, if you were looking to keep the table (which technically wouldn't be necessary):



<table>
<tr>
<td width="198"><a href="./blah.hmtl" class="menulink">Blah1</a></td>
<td width="198"><a href="./blah.hmtl" class="menulink">Blah2</a></td>
<td width="198"><a href="./blah.hmtl" class="menulink">Blah3</a></td>
</tr>
</table>


But, since all the work is done via CSS (which, I might add, is veeerry easy, and a good idea to learn) technically all you would need to do is get rid of the table, and change display:block, to display:inline. Or even lose that line altogether. Block automatically inserts a line break after the element.