Winamp & Shoutcast Forums - So... What can I do about this... (html, simple)

Winamp & Shoutcast Forums (http://forums.winamp.com/index.php)

- General Discussions (http://forums.winamp.com/forumdisplay.php?f=1)

- - So... What can I do about this... (html, simple) (http://forums.winamp.com/showthread.php?t=183167)

So... What can I do about this... (html, simple)

Yea, I have some links that are in a column... one on top of the other, like a list.

Ex:
Link
Link
Link
Link

So. The links of are different lengths. So It looks more like:

|Home|
|Board|
|Contact|
|Content|

I tried doing:
| Home |
| Board |
|Contact|
|Content|

BUt with the font I'm using, nothing lines up. is there anyway that I can make a SMALLER space? I cant change the fact that the links are on top of each other. It would ruin the whole layout. Is there a way that I can fix this?

I would appreciate any ideas :)

You can define the with of one line by a table cell or defining that with a div tag, then you align the last (|) by align="right", then all the | will align if you had the same with of the tabelcells/divs.

Or you can just place the | in a cell by it's own...

You must put center on the text and not the | also, you can wrap | on both sides for all of them.

<div align="left">|</div><div align="center">TEXT HERE</div><Div align="right">|</div>

would that do it maybe?

I would suggest just using a table. Use CSS to turn off all borders except for the left and right ones.

You can yell at me now

;)

code:
<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>SquakMix Navigation thing</title>

<meta http-equiv="Content-Type" content=" text/xhtml; charset=utf-8" />

<style type="text/css">

a {

	color: #c1c1c1;

	font-size: 8pt;

	font-family: verdana;

}

a.nav {

	color: #c1c1c1;

	font-size: 8pt;

	font-family: verdana;

	border-left: 2px solid #c0c0c0;

	border-right: 2px solid #c0c0c0;

	padding: 0px;

	margin: 0px;

	margin-top: 5px;

	margin-bottom: 5px;

	padding-left: 10px;

	padding-right: 10px;

	text-decoration: none;

	

}

a.nav:hover {

	font-weight: bold;

}

body { 

	background-color: black;

}

div#left {

	border: 2px solid white;

	float: left;

	margin-left: 30px;

	padding: 5px;

	background-color: black;

	text-align: center;

	width: 100px;

}

</style>

</head>



<body>

     <div id="left">

        <a href="#" class="nav">Link</a><br />

        <a href="#" class="nav">Link</a><br />

        <a href="#" class="nav">Link</a><br />

        <a href="#" class="nav">Link</a><br />

        <a href="#" class="nav">Link</a><br />

        <a href="#" class="nav">Link</a><br />

     </div>

</body>



</html>

(above link is an example, if you haven't noticed)

Hey, thanks for the ideas! Yea, I'll just align the "|" To the right of a cell. Thanks. I didnt think about that.

Actually on mine... instead of the a.nav I have.

code:
a.nav {

	color: #c1c1c1;

	font-size: 8pt;

	font-family: verdana;

	border-left: 2px solid #c0c0c0;

	border-right: 2px solid #c0c0c0;

	padding: 0px;

	margin: 0px;

	line-height: 180%;

	padding-left: 10px;

	padding-right: 10px;

	text-decoration: none;

	

}

Changing the line height to 180% of the actual height of the <a>, it will add space between them. (Since using margins, IE didn't like it). You can just give it a fixed px value if you want.