CSS Forum

**Don.** · 12-01-2010, 10:36 AM

Hi Guys,

Im trying to align menu item text, so when the menu text word wraps onto the next line, it lines up with the text from the line above, rather than lining up with the block at the beginning of each line.

I look forward to any suggestions, thanks.

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style type="text/css"> 
.nav {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#939598;
	padding-left:5px;
	text-decoration:none;
	line-height: 20px;
	border-left-width: 10px;
	border-left-color:#B2448F;
	border-left-style: solid;
	margin-left: 10px;
	font-weight: bold;
}
</style>

<title>New Page 2</title>
</head>

<body>
	<table>
		<tr>
		<td width="150" valign="top" bgcolor="#FFFFFF" class="bg">
	
		  <a href="index.html" class="nav">home</a><br>
		  <a href="#line2" class="nav">This is the second line.</a><br>
		  <a href="#line3" class="nav">This is the third line.</a><br>
		  <a href="#line4" class="nav">This is the fourth line.</a><br>
		</td>
		</tr>
	</table>

</body>

</html>

**edgray** · 12-01-2010, 12:26 PM

you should be using an unordered list for this <ul>.

**Don.** · 12-01-2010, 01:55 PM

Quote:

Originally Posted by edgray

you should be using an unordered list for this <ul>.

Thanks for the suggestion.

I did try that, but the text still lines up under the block at the beginning of the text rather than under the text.

See the code below:

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style type="text/css"> 
.nav {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#939598;
	padding-left:5px;
	text-decoration:none;
	line-height: 20px;
	border-left-width: 10px;
	border-left-color:#B2448F;
	border-left-style: solid;
	margin-left: 10px;
	font-weight: bold;
}

#menu {
  padding:0;
  margin:0;
  }

</style>

<title>New Page 2</title>
</head>

<body>
	<table>
		<tr>
		<td width="150" valign="top" bgcolor="#FFFFFF" class="bg">
	
		  <a href="index.html" class="nav">home</a><br>
		  <a href="#line2" class="nav">This is the second line.</a><br>
		  <a href="#line3" class="nav">This is the third line.</a><br>
		  <a href="#line4" class="nav">This is the fourth line.</a><br>
<br>
<br>
<br>
<ul id="menu">
		<li><a href="index.html" class="nav">home</a></li>
		<li><a href="#line2" class="nav">This is the second line.</a></li>
		<li><a href="#line3" class="nav">This is the third line.</a></li>
		<li><a href="#line4" class="nav">This is the fourth line.</a></li>
</ul>		  
		</td>
		</tr>
	</table>

</body>

</html>

**edgray** · 12-01-2010, 03:29 PM

you need to replace the bullets with your square thingies. Check out these tutorials on how to:

http://css.maxdesign.com.au/listamatic/

Basically you need a vertical list with your own bullets.