Dotted Lines in Tables

[Andy_H]

Hi
I am just considering a CSS style to make my website a lot easier to control in appearance, setup and altering.
I am interested in a nav menu that has a vertical listing with each line separated with a dotted line, background light blue and when hover over font changes color
Is there a simple attribute or style that will achieve my aim
An example of what I am trying to achieve can be found on http://www.moneyworld.co.uk/

[Andy K]

You need to set css properties for a:link and a:hover

For dotted lines use something like

Code: Select all

border-top: 1px dotted fuchsia

Check this out: http://www.hotdesign.com/seybold/index.html

Hope this helps

[danburzo]

It is not complicated:

your menu should be a unordered list, and the list entries will be your menu items:

Code: Select all

<div id="menu">
   <ul>[*]Menu item 1[*]Menu item 2[*]Menu item 3[*]Menu item 4[/list]</div>

now add the following style:

Code: Select all

#menu {
	width: 200px;
	float: left;
	background: #00CCFF;
}

#menu ul {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
   font: 12px/18px Arial, Verdana, sans-serif;
}

#menu li {
	border-bottom: 1px dotted #000000;
	height: 25px;
	text-indent: 10px;
	padding-top: 8px;
}

#menu ul a {
   display: block;
}

#menu ul a:link, #menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

#menu ul a:hover {
   color:#006600;
   text-decoration: underline;
}

this will create a vertical menu floating on the left side of the page.

The effect on the site you provided was made by using the image of a dotted line as a background image docked to the bottom of the list item:

Code: Select all

li {
    background-image: url(/images/dotted_line.gif);
    background-repeat: repeat-x;
    background-attachment: scroll;
    -x-background-x-position: center;
    -x-background-y-position: bottom;
}

[Andy_H]

many thanks you to both, great stuff,
But as an final request,
1. How do you get the a title inserted for each section displaying in a slightly different format ie bold, slightly bigger and different color
I believe that a little css trick should be able to get this but all I end up with is the title is the same size as the rest.
2. I have altered my text to show links - blue hover - red
but would like the visited links to reappear blue any ideas on how to achieve this

thanks again
rgds
andy

[Andy K]

ccs styles for

Code: Select all

a:visited

a:active

[Andy_H]

thanx
andy