[Html/css] Horizontal list

[liam_d]

Hi all i am having problems making a horizontal list.

It works fine if i have say an avatar or a name so
*name *name *name etc

But if i have say
*avatar *avatar
*name *name

With the avatar and name seperated by a "<br />" then it will mess up the next list item .

My code is as follows (without the br):

		<ul id="friendslist">
		
			<li><img src="http://forum.prxa.info//images/noavatar.gif" alt="avatar" />
			<a href="profile.php?info=8">Tom1</a>
			</li>
			 
			<li><img src="http://forum.prxa.info//images/noavatar.gif" alt="avatar" />
			<a href="profile.php?info=29">Psybadek</a>
			</li>

			 
			<li><img src="http://forum.prxa.info//images/noavatar.gif" alt="avatar" />
			<a href="profile.php?info=14">haseeb</a>
			</li>
			
		</ul>

#friendslist

{

	padding:0;

	margin:0;

	white-space:nowrap;

	list-style-type:none;

}



#friendslist li 

{

	display:inline;

}

What am i doing wrong?

 

[djdeth]

Try this

<ul id="friendslist">
		
			<li><img src="http://forum.prxa.info//images/noavatar.gif" alt="avatar" /><br />

			<a href="profile.php?info=8">Tom1</a>
			</li>
			 
			<li><img src="http://forum.prxa.info//images/noavatar.gif" alt="avatar" /><br />
			<a href="profile.php?info=29">Psybadek</a>
			</li>

			 
			<li><img src="http://forum.prxa.info//images/noavatar.gif" alt="avatar" /><br />
			<a href="profile.php?info=14">haseeb</a>
			</li>
			
</ul>

And for the CSS

#friendslist

{

	padding:0;

	margin:0;

	white-space:nowrap;

	list-style-type:none;
	float:left;

}



#friendslist li 

{
float:left;
	display:inline;
	padding:10px;

}

You need to have the float:left; property.

 

[liam_d]

while that works for the stacking, it seems to put the menu in the div below it?