Think Visualizer and expand your options
 
Visualizer Navigator 
   Home | Keep up with the news | The Photo FX tour | Photo FX Bookmark and Share

Go Back   Visualizer Forums > Visualizer Online Learning > Web design and Scripting
User Name
Password
Register FAQ Members List Search Today's Posts Mark Forums Read


Reply
 
Thread Tools Search this Thread Display Modes
Old 12-24-2004, 12:20 AM   #1
CaptainKoala
Senior Member
 
CaptainKoala's Avatar
 
Join Date: Feb 2004
Location: land of the foobar
Posts: 381
Send a message via AIM to CaptainKoala Send a message via MSN to CaptainKoala

my photo blog, by CaptainKoala
Default CSS Tips

This is the thread in which, over a period of time, I will post various Cascading Style Sheet tips. A basic knowlege of CSS and HTML is required to understand of of it.

This tip will show you how to use unordered lists to make onMouseOver background-color-changing links like those on www.captainkoala.com.

CSS:
HTML Code:
ul#id { margin : <your-margin>; padding : <your-padding>; list-style-type : none; white-space : nowrap; } ul#id li { float : <this is the align// left or right are recommend>; font-family : <your-font-family>; font-size : <your-size>; margin : <your-margin>; padding : <your-padding>; background : #<hexadecimal color>; } #id a, #id a:link { margin : <your-margin>; padding : <your-padding>; color : #<hexadecimal color>; text-decoration : <none, underline, or overline>; } #id a:hover { color : #<hexadecimal color>; background : #<hexadecimal color>; }


Replace the elements in brackets (<...>) with whatever you want those elements to be.

HTML Implementation:
HTML Code:
<div id="id"> <ul id="id"> <li><a href="#">#</a></li> <li><a href="#">#</a></li> </ul> </div>


There you have it. This is just a simple way to have a simple background-changing link.
__________________
#!/usr/bin/env python

import webbrowser

webbrowser.open('http://www.captainkoala.com/')
# general quackery with a point
CaptainKoala is offline  Live RSS Feed from my photo blog   Reply With Quote
Old 02-10-2007, 08:38 PM   #2
raj5
Junior Member
 
Join Date: Feb 2007
Posts: 6

Default

You can use inbuilt features of Dreamweaver which can help you save lot of CSS coding. It is easy to use and navigate

Try using latest version of Dreamweaver
raj5 is offline   Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump



All times are GMT. The time now is 05:13 AM.



Copyright © 2002-2006 Visualizer Image Group.