944,021 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > CSS hover on individual link (li) ???
Ad:
Permalink
Jun 14th, 2006
0

CSS hover on individual link (li) ???

Expand Post »
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.

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <li><a title="link six" href="index.html">link six</a></li>
  3. <li><a title="link five" href="index.html">link five</a></li>
  4. <li><a title="link four" href="index.html">link four</a></li>
  5. <li><a title="link three" href="index.html">link three</a></li>
  6. <li><a title="link two" href="index.html">link two</a></li>
  7. <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:

HTML and CSS Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2.  
  3. body 
  4. {
  5. 	background-color:black;
  6. 	background-attachment:fixed;
  7. }
  8.  
  9. /* .................................... HEADER & FOOTER ................................... */
  10.  
  11. #header
  12. {
  13. 	font-family:Georgia, "Times New Roman", Times, serif;
  14. 	color:white;
  15. 	text-align:center;
  16. 	width:100%; 
  17. }
  18.  
  19. #header  a
  20. {
  21. 	color:yellow;	
  22. 	text-decoration:none;
  23. }
  24.  
  25. #header  a:hover
  26. {
  27. 	text-decoration:underline;
  28. }
  29.  
  30. #footer
  31. {
  32. 	font-family:Georgia, "Times New Roman", Times, serif;
  33. 	color:white;
  34. 	text-align:center;
  35. 	border-top:3px solid fuchsia;
  36. 	float:left;
  37. 	background-color:black;
  38. 	width:100%; 
  39. }
  40.  
  41. #footer a
  42. {
  43. 	color:yellow;	
  44. 	text-decoration:none;
  45. }
  46.  
  47. #footer a:hover
  48. {
  49. 	text-decoration:underline;
  50. }
  51.  
  52. /* ........................................ BANNER ........................................ */
  53.  
  54. #banner
  55. {
  56. 	width:100%;
  57. 	border:none;
  58. 	text-align:center;
  59. 	background-color:none;
  60. }
  61.  
  62. /* ......................................... TOP MENU .................................... */
  63.  
  64. #topMenu
  65. {
  66. 	width:100%;
  67. 	float:right;
  68. 	border:none;
  69. }
  70.  
  71. #topMenu ul
  72. {
  73. 	float:left;
  74. 	margin-left:4%;
  75. }
  76.  
  77. #topMenu ul li 
  78. {
  79. 	display:inline;
  80. 	width:20%;
  81. }
  82.  
  83.  
  84. /* ................................... CONTENT ................................................ */
  85.  
  86. #leftContent
  87. {
  88. 	float:left;
  89. 	width:10%;
  90. 	border:1px solid red;
  91. 	background-color:green;
  92. }
  93.  
  94. #centerContent
  95. {
  96. 	background-color:white;
  97. 	width:75%; 
  98. 	margin-left:1%;
  99. 	float:left;
  100. 	border:1px solid green;
  101. }
  102.  
  103. #centerContent ul
  104. {
  105. 	font-family:Georgia, "Times New Roman", Times, serif;
  106. 	text-align:justify;
  107. 	list-style-type:decimal;
  108. 	color:black;
  109. }
  110.  
  111. #centerContent li
  112. {
  113. 	margin:3% 3%;
  114. 	line-height:1.5em;
  115. }
  116.  
  117. #rightContent
  118. {
  119. 	float:right;
  120. 	background-color:fuchsia;
  121. 	border:1px solid red;
  122. 	width:10%;
  123. }
  124.  
  125. /* ................................... STYLES ......................................... */
  126.  
  127. p.first-letter:first-letter
  128. {
  129. 	color:red;
  130. 	margin-left:5%;
  131. 	font-size:xx-large;
  132. }
  133.  
  134. p
  135. {
  136. 	font-family:Georgia, "Times New Roman", Times, serif;
  137. 	text-align:justify;
  138. 	font-size:medium;
  139. 	line-height:1.5em;
  140. 	margin:2% 3%;
  141. 	color:black;
  142. }
  143.  
  144. h4
  145. {
  146. 	font-family:Georgia, "Times New Roman", Times, serif;
  147. 	text-align:center;
  148. 	font-size:x-large;
  149. 	color:green;
  150. }
  151.  
  152. h5
  153. {
  154. 	font-family:Georgia, "Times New Roman", Times, serif;
  155. 	text-align:justify;
  156. 	font-size:medium;
  157. 	margin:2% 3%;
  158. 	color:blue;
  159. }
  160.  
  161. h6
  162. {
  163. 	font-family:Georgia, "Times New Roman", Times, serif;
  164. 	text-align:justify;
  165. 	margin:0;
  166. 	font-size:medium;
  167. 	font-weight:normal;
  168. 	color:red;
  169. }
  170.  
  171. .italic
  172. {
  173. 	font-family:Georgia, "Times New Roman", Times, serif;
  174. 	text-align:justify;
  175. 	color:black;
  176. 	font-style:italic;
  177. }
  178.  
  179. .bold
  180. {
  181. 	font-family:Georgia, "Times New Roman", Times, serif;
  182. 	text-align:justify;
  183. 	color:black;
  184. 	font-weight:bold;
  185. }
  186.  
  187. .colorTextRed
  188. {
  189. 	font-family:Georgia, "Times New Roman", Times, serif;
  190. 	text-align:justify;
  191. 	color:red;
  192. }
  193.  
  194. .colorTextBlue
  195. {
  196. 	font-family:Georgia, "Times New Roman", Times, serif;
  197. 	text-align:justify;
  198. 	color:blue;
  199. }
  200.  
  201. .colorTextGreen
  202. {
  203. 	font-family:Georgia, "Times New Roman", Times, serif;
  204. 	text-align:justify;
  205. 	color:green;
  206. }
  207.  
  208. /* ................................... TABLE ......................................... */
  209.  
  210. #contactTable
  211. {
  212. 	background-color:white;
  213. 	border-spacing:2%;
  214. 	margin:3% 3%;
  215. 	font-family:Georgia, "Times New Roman", Times, serif;
  216. 	text-align:left;
  217. }
  218.  
  219. #contactTable tr
  220. {
  221. 	border:none;
  222. }
  223.  
  224. #contactTable th
  225. {
  226. 	color:fuchsia;
  227. }
  228.  
  229. #contactTable td
  230. {
  231. 	font-size:medium;
  232. 	color:black;
  233. }
  234.  
  235. /* ................................... CLASSES ......................................... */
  236.  
  237. .table
  238. {
  239. 	background-color:white;
  240. 	border-spacing:2%;
  241. 	margin:3% 3%;
  242. 	font-family:Georgia, "Times New Roman", Times, serif;
  243. 	border-collapse:collapse;
  244. 	text-align:left;
  245. }
  246.  
  247. .tr
  248. {
  249. 	border:none;
  250. }
  251.  
  252. .td
  253. {
  254. 	border:thin solid red;
  255. 	font-size:medium;
  256. 	padding:2px;
  257. 	text-align:center;
  258. 	color:black;
  259. }
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
Permalink
Jun 14th, 2006
0

Re: CSS hover on individual link (li) ???

The site you reference, and the CSS-hover style, are for changing attributes the browser can actually change via CSS: fonts, colors, borders, etc.

The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.

You want to use old-fashioned image rollover code, if your buttons/links are going to be images.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Jun 14th, 2006
0

Re: CSS hover on individual link (li) ???

Not true tgreer! ... Suppose you have image1.gif and image2.gif which are both 100x50 pixels in size. What you can do is create a <div> of that height and width, and fill it with a clear.gif filler. Set the background of the div via CSS to image1.gif. Then, you can use the CSS hover property to alter the div's background property to image2.gif.
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002
Permalink
Jun 14th, 2006
0

Re: CSS hover on individual link (li) ???

Quote originally posted by tgreer ...
The site you reference, and the CSS-hover style, are for changing attributes the browser can actually change via CSS: fonts, colors, borders, etc.

The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.

You want to use old-fashioned image rollover code, if your buttons/links are going to be images.
Yes, this is exactly what I have in mind i.e. creat 2 different "images" one the normal & other the hover but how could I "hover" each INDIVIDUAL "li" on this menu ???

Afterall, in my style-sheet, I could have "li hover" OR "li a hover" but this "li" would be applicable for ALL the "li" i.e. Owner, Services, Contact, etc. but how do I go about having a code that allows me to have each INDIVIDUAL "li" (Owner, Services, Contact, etc.)
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
Permalink
Jun 14th, 2006
0

Re: CSS hover on individual link (li) ???

Quote originally posted by cscgal ...
Not true tgreer! ... Suppose you have image1.gif and image2.gif which are both 100x50 pixels in size. What you can do is create a <div> of that height and width, and fill it with a clear.gif filler. Set the background of the div via CSS to image1.gif. Then, you can use the CSS hover property to alter the div's background property to image2.gif.
So, you meant to say that I'd have to do this for EACH INDIVIDUAL images i.e. in my CSS I would have "owner img" AND "owner img hover", "service img" AND "service img hover", "contact img" AND "contact img hover", etc..
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
Permalink
Jun 14th, 2006
0

Re: CSS hover on individual link (li) ???

Thanks, Dani (cscgal). I'd never thought of using a hover style to swap a background. <slapping head> brilliant!

James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Jun 16th, 2006
0

Re: CSS hover on individual link (li) ???

Quote originally posted by tgreer ...
Thanks, Dani (cscgal). I'd never thought of using a hover style to swap a background. <slapping head> brilliant!

James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.
Thanks for your help, however, I fear I'm constantly failing to achieve the desired result.

All my relevant files i.e. "style.css", "contact.php" and images in "topmenu" folder (second last in the list) can be seen on:

http://members.lycos.co.uk/darsh25/personal_website/

I've got two images now (can be seen from folder "topmenu") for the "About" link i.e. "about.jpg" (with little dark background) for the NORMAL view and "about1hover.jpg" (with brighter background) for the HOVER view.

The relevant code for this in CSS is:

HTML and CSS Syntax (Toggle Plain Text)
  1. #aboutLink a:hover
  2. {
  3.  background:url(topmenu/about1hover.jpg);
  4. }

and the related HTML code is:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="aboutLink"><a href="aboutus.php"><img src="topmenu/about.jpg" border="0"></a></div>

It's more like a SWAP of images where "about.jpg" gets swapped with "about1hover.jpg" when the mouse is hover over it.
Last edited by j4mes_bond25; Jun 16th, 2006 at 10:59 am.
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Help with making a survey form
Next Thread in HTML and CSS Forum Timeline: indesign to web...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC