[html/css] horizontal list

liam_d · 07-09-2009, 04:04 AM

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):

Code:

		<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>

Code:

#friendslist

{

	padding:0;

	margin:0;

	white-space:nowrap;

	list-style-type:none;

}



#friendslist li 

{

	display:inline;

}

What am i doing wrong?

***djdeth*** · 07-09-2009, 09:56 AM

Try this

Code:

<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
????: NamePros.com http://www.namepros.com/programming/595331-html-css-horizontal-list.html

Code:

#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 · 07-09-2009, 03:24 PM

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

07-09-2009, 04:04 AM	THREAD STARTER #1 (permalink)
liam_d The original NP Emo Kid Join Date: Jan 2005 Location: Plymouth, UK Posts: 1,693 Follow @upurtweet	[html/css] horizontal list 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): Code: <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> Code: #friendslist { padding:0; margin:0; white-space:nowrap; list-style-type:none; } #friendslist li { display:inline; } What am i doing wrong? Last edited by liam_d; 07-09-2009 at 04:06 AM. Reason: missed the title lol*

07-09-2009, 03:24 PM	THREAD STARTER #3 (permalink)
liam_d The original NP Emo Kid Join Date: Jan 2005 Location: Plymouth, UK Posts: 1,693 Follow @upurtweet	while that works for the stacking, it seems to put the menu in the div below it? Last edited by liam_d; 07-09-2009 at 03:36 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[HTML/CSS] Calm 2.0 Corporate [4 day auction, wordpress included]	DylanButler	Web Designs For Sale	0	06-12-2007 11:07 PM
[HTML/CSS] "Corporate Blue" Wordpress Layout + Subpage	DylanButler	Web Designs For Sale	1	06-10-2007 02:12 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)