I wish to have links for the menu like this:
http://www.tristarwebdesign.co.uk/te...rma/index.html
However, I wish to have MY OWN font style on each links as it can be seen on:
The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on:
http://members.lycos.co.uk/darsh25/P...te/contact.php
i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.
- Code: Select all
<li><a title="link six" href="index.html">link six</a></li>
<li><a title="link five" href="index.html">link five</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link one" href="index.html">link one</a></li>
My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using
CSS, could I ???
I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.
My
CSS code so far is:
- Code: Select all
/* CSS Document */
body
{
background-color:black;
background-attachment:fixed;
}
/* .................................... HEADER & FOOTER ................................... */
#header
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
width:100%;
}
#header a
{
color:yellow;
text-decoration:none;
}
#header a:hover
{
text-decoration:underline;
}
#footer
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
border-top:3px solid fuchsia;
float:left;
background-color:black;
width:100%;
}
#footer a
{
color:yellow;
text-decoration:none;
}
#footer a:hover
{
text-decoration:underline;
}
/* ........................................ BANNER ........................................ */
#banner
{
width:100%;
border:none;
text-align:center;
background-color:none;
}
/* ......................................... TOP MENU .................................... */
#topMenu
{
width:100%;
float:right;
border:none;
}
#topMenu ul
{
float:left;
margin-left:4%;
}
#topMenu ul li
{
display:inline;
width:20%;
}
/* ................................... CONTENT ................................................ */
#leftContent
{
float:left;
width:10%;
border:1px solid red;
background-color:green;
}
#centerContent
{
background-color:white;
width:75%;
margin-left:1%;
float:left;
border:1px solid green;
}
#centerContent ul
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
list-style-type:decimal;
color:black;
}
#centerContent li
{
margin:3% 3%;
line-height:1.5em;
}
#rightContent
{
float:right;
background-color:fuchsia;
border:1px solid red;
width:10%;
}
/* ................................... STYLES ......................................... */
p.first-letter:first-letter
{
color:red;
margin-left:5%;
font-size:xx-large;
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
line-height:1.5em;
margin:2% 3%;
color:black;
}
h4
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:x-large;
color:green;
}
h5
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
margin:2% 3%;
color:blue;
}
h6
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
margin:0;
font-size:medium;
font-weight:normal;
color:red;
}
.italic
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-style:italic;
}
.bold
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-weight:bold;
}
.colorTextRed
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:red;
}
.colorTextBlue
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:blue;
}
.colorTextGreen
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:green;
}
/* ................................... TABLE ......................................... */
#contactTable
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
}
#contactTable tr
{
border:none;
}
#contactTable th
{
color:fuchsia;
}
#contactTable td
{
font-size:medium;
color:black;
}
/* ................................... CLASSES ......................................... */
.table
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
border-collapse:collapse;
text-align:left;
}
.tr
{
border:none;
}
.td
{
border:thin solid red;
font-size:medium;
padding:2px;
text-align:center;
color:black;
}
CSS Hover on individual Link (li) ???
Jun 14th, 2006, 20:53
CSS Hover on individual Link (li) ???
Similar Threads
