A Digital Age Deserves A Digital Leader

Me again :D -- ul/li question and CSS hover links

Me again :D -- ul/li question and CSS hover links

Postby xxsonyboy4lfexx » Sat Nov 24, 2007 1:02 am

http://pac.thechillroom.com/test/1se.shtml
http://pac.thechillroom.com

I have question dealing with those top links. The 1st link is where I am trying to do this ul and li thing that seems to be the most popular way of having your navigation. Now I can't get my testing one to match the positioning of the normal one.

LINKS part

I need to figure out how to properly make a hover background and regular link background with CSS. ALSO how do I do the same thing but with images and no text? I heard I needed Javascript. I HAVE looked for online help but the tiny tutorials don't really offer all the details I need to make it work.
Image
PRO Level 8
User avatar
Posts: 315
Joined: Sat Jan 07, 2006 4:42 pm
Location: California

Postby jaelanicu » Sat Nov 24, 2007 4:09 am

Hmm? Why would you use UL and LI tags for single line side-by-side navigation links?
AFAIK, those tags are best for multi line text/items.
I think you could use positioning styles for them, but IMO, it's better to use tables like the main page.
I'm not very good at style sheets, so you should ask for other user opinion.

For text link with plain background color, here's a example.
Code: Select all
<html>
 <head>
 <style><!--
  a:hover { background-color: #00ffff; } /* cyan background */
 --></style>
 </head>
 <body>
  <a href="about:blank">Empty page</a>
 </body>
</html>


For link without text and with background image and hover image, you will need JavaScript for the hover image. Style sheet does provide a hover class, but it affects all links in the page (I think) so you can't use it for different link. Below is an example that doesn't use style sheet, since IMO it's less complicated. Note that you must use tables for this and each cell dimension should be set to the image dimension.
Code: Select all
<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <a href="about:blank">
   <td width="25" height="25" background="normal.jpg"
    onmouseover="background='hover.jpg'" onmouseout="background='normal.jpg'">
    <div></div> <!-- need empty div tag so there will be no selectable empty text -->
   </td>
  </a>
 </tr>
</table>
"Righteous is always honorable, but honor is not always righteous." - Me ^_^
PRO Level 5
User avatar
Posts: 156
Joined: Wed Aug 11, 2004 6:19 pm
Location: Indonesia

Postby xxsonyboy4lfexx » Sat Nov 24, 2007 2:49 pm

I am pretty sure I wanna use ul and li. Cause this site even does it. So I still need help with that. And What Javascript do I need?
Image
PRO Level 8
User avatar
Posts: 315
Joined: Sat Jan 07, 2006 4:42 pm
Location: California

Postby jaelanicu » Sat Nov 24, 2007 8:08 pm

The second example code uses the onmouseover and the onmouseout attributes to change the background image. Both of the attributes requires JavaScript.

The "background='hover.jpg'" is actually a JavaScript code (single statement and without using any function). The code simply modifies the background property of current object, the TD element in this case.
"Righteous is always honorable, but honor is not always righteous." - Me ^_^
PRO Level 5
User avatar
Posts: 156
Joined: Wed Aug 11, 2004 6:19 pm
Location: Indonesia

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 7 guests

cron
cron