PDA

View Full Version : css borders


webmorpheus
04-06-04, 08:36 PM
http://www.californiabusinesslist.com/

on the top navgation, when you rollover I wanted a dashed box effect, only the bottom border doesn't show up!! someone tell me how to tweak my css,


#california-business-listing-h-n {
float: right;
color : #ffffff;
padding-top: 10px;
position: relative;
}

#california-business-listing-h-n a:link ,#california-business-listing-h-n a:visited ,#california-business-listing-h-n a:active {
color : #ffffff;
font : normal 12pt Verdana, Helvetica;
text-decoration : none;
margin : 0;
padding : 3px;
}

#california-business-listing-h-n a:hover {
color : #ffffff;
font : normal 12pt Verdana, Helvetica;
text-decoration : none;
background-color: #808080;
border-width: 1px;
border-style: dashed;
border-color: #ffffff;
padding: 3px;
}

Bonzo
04-07-04, 03:40 AM
For me its ONLY the bottom of the box that shows up.

The link below that may be helpful; if not let me know I have some more links.

Anthony

http://www.w3schools.com/css/css_border.asp

rosanda
04-15-04, 03:27 PM
hi,
here is how to solve your problem

#california-business-listing-h-n {
float: right;
color : #ffffff;
padding: 10px 0px 3px 0px;
position: relative;
}

#california-business-listing-h-n a:link ,#california-business-listing-h-n a:visited ,#california-business-listing-h-n a:active {
color : #ffffff;
text-decoration : none;
margin : 0;
}

#california-business-listing-h-n a:hover {
color : #ffffff;
text-decoration : none;
background-color: #808080;
border: 1px dashed #000;
}

webmorpheus
04-15-04, 04:22 PM
thank you guys, that seems to do the trick.

how do I add some spacing to them to make it more like buttons? should i make them blocks? or make it a list-type?

LJK
07-04-04, 12:08 PM
Hi -
Yeah, an ul with li's styled to suit is a great way to do links - just decide if to display:inline; or not to make horiz. or vert. Now that you've taken all the time on your dashed borders - here's an easy 'button look' you might try, instead:

Give each a background that's an off color from the header color, then each should have a border:5px outset colorchoice - this will give a 3-d look quite easily. The hover color could be different than both the header and original link background for a nice effect. (I also like to alternate styles if there are several links - odd and even having slightly diff. or opposite colors...)

good luck,
El