PDA

View Full Version : Any Cool Horizontal Bulleting Ideas?

dennybot
02-19-2006, 09:48 PM
I've played with several ideas, but I'm wondering what I'm missing.

I'm looking for the best way to create the horzontal bulleted list you see on the page below. Ideally it would be ALL CSS, but I was having trouble with the top part of the strip frame.

I'd be happy with just some tips on getting the bullets to draw as a style, and of course line up with the text.

All help is most appreciated!

Here's the page:

http://www.dennyslounge.com/test/list_test.html

Here's what I'm using so far:

On page:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="427">
<tr><td><img src="img/video/video_strip_top.gif" border="0" /></td></tr>
<tr>
<td class="videoStrip" height="13">
<img src="img/video/bullet.gif" border="0" /><a href="#" style="padding-right:7px">Nin-A-Go-Go</a>
<img src="img/video/bullet.gif" border="0" /><a href="#" style="padding-right:7px">Nin-A-Go-Go</a>
<img src="img/video/bullet.gif" border="0" /><a href="#" style="padding-right:7px">Nin-A-Go-Go</a></td>
</tr>
<tr><td><img src="img/video/video_strip_bottom.gif" border="0" /></td></tr>
</table>

CSS:
.videoStrip {
text-align: center;
vertical-align: top;
line-height:13px;
background-image: url('/img/video/video_strip_stretch.gif');
}
_Aerospace_Eng_
02-19-2006, 10:12 PM
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TESTING</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
body {
text-align:center;
font-family: Arial;
font-size: 12px;
background-color: #4d4858;
color: #CFCFCF;
margin: 0;
padding: 0;
border: 0;
}

#nav {
width: 427px;
background-image: url('/img/video/video_strip_stretch.gif');
margin: 10px auto;
}

#nav ul {
margin: 0;
padding: 0 9px;
list-style: none;
border-left: 1px solid #7B6C9E;
border-right: 1px solid #7B6C9E;
text-align: center;
}

#nav ul li {
background: url('img/video/bullet.gif') 0 2px no-repeat;
display: inline;
padding-left: 14px;
}

#nav ul li a {
padding-right: 7px;
}

.bar {
line-height: 0px;
font-size: 0;
}

a:link, a:visited, a:hover, a:active {
font-size: 12px;
color: #CFCFCF;
}
</style>
</head>

<body>

<div id="nav">
<div class="bar"><img src="img/video/video_strip_top.gif" alt="" /></div>
<ul>
<li><a href="#">Nin-A-Go-Go</a></li>
<li><a href="#">Nin-A-Go-Go</a></li>
<li><a href="#">Nin-A-Go-Go</a></li>
</ul>
<div class="bar"><img src="img/video/video_strip_bottom.gif" alt="" /></div>
</div>
</body>
</html>
dennybot
02-19-2006, 10:33 PM
Man, you ARE GOOD. How do I repay the favor?
_Aerospace_Eng_
02-19-2006, 10:36 PM
No need to. CSS among browsers has always been a main problem of the users that post here. Through years of experience I pick up little tricks here and there.