Displaying li elements horizontally.

Anything questions related to styling should go in here.
Post Reply
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

Displaying li elements horizontally.

Post by ta2shop »

jacek wrote:First part of this discussion is here http://betterphp.co.uk/board/viewtopic.php?f=4&t=98
thanks EcazS , much better!
but the problem is the css, how can i display dhem horazontly, i tried with display: inline and block but it is not working.
thanks.
#cart{
	margin:0 auto;
	padding:5px;
	width:99%;
	border:solid #FFF 1px;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#FFF;
	font-weight:lighter;
}
#products{
	margin:0;
	padding:0;
	text-decoration:none;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#fff;
	border:solid #FFF 1px;
	width:200px;
	height:200px;
}
#products li{
	margin:0;
	padding:0;
	list-style-type:none;
	display:block;
	float:left;
}
#products li a{
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
	text-decoration:none;
	margin:0;
	padding:0;
}
#products li a:hover{
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
	text-decoration:underline;
	margin:0;
	padding:0;
}
Image
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: modifiing code problem

Post by jacek »

You would want to float the li elements
li {
    float: left;
}
If you have any more problems on this, post in the css section ;)
Image
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

Re: modifiing code problem

Post by ta2shop »

ok, i will, but i am floating the li tag!
Image
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: modifiing code problem

Post by EcazS »

You can do
display: inline-block;
If you want all 3 lists horizontally then apply the display or float to ul in the css.
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

Re: modifiing code problem

Post by ta2shop »

somthing is wrong with the code! a mean i cant put the css on it.
function products() {
	$get = mysql_query('SELECT id, name, description, price FROM products WHERE quantity > 0 ORDER BY id DESC') or die(mysql_error());
	if(mysql_num_rows($get)==0) {
		echo "There are no products to display!";
	}
	else {
		while($get_row = mysql_fetch_assoc($get)) {
			echo'<ul id=\'products\'><li><b>'.$get_row['name'].'</b></li>
			<li>'.$get_row['description'].'</li>
			<li>'.number_format($get_row['price'],2).
			'€ <a href="cart.php?add='.$get_row['id'].'">Add</a></li></ul>';
		}
	}
}
if i put the css on the products id it wount do nothing. if i put it on the li tag, still nothing!
Image
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: modifiing code problem

Post by EcazS »

Do you have a product id in your css file?
Is it #product or ul#product ?
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

Re: modifiing code problem

Post by ta2shop »

i have a div id="cart" i put a ul tag in the while loop with id="products"
Image
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: modifiing code problem

Post by EcazS »

ta2shop wrote:i have a div id="cart" i put a ul tag in the while loop with id="products"
If you don't have those IDs in your CSS file nothing is going to happen :?
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

Re: Displaying li elements horizontally.

Post by ta2shop »

but i do here is the css for the cart thing:
#cart{
	margin:0 auto;
	padding:0;
	width:100%;
	border:solid #FFF 1px;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#FFF;
	font-weight:lighter;
}
#products{
	margin:0 auto;
	padding:10px;
	text-decoration:none;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#fff;
	border:solid #FFF 1px;
	width:180px;
	height:180px;
	display:inline-block;
}
#products li{
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline-block;
	float:left;
}
#products li a{
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
	text-decoration:none;
	margin:0;
	padding:0;
}
#products li a:hover{
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
	text-decoration:underline;
	margin:0;
	padding:0;
}
Image
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: Displaying li elements horizontally.

Post by EcazS »

That's weird. Unless I just became blind I can't see anything wrong.

Try doing
li#products {
   //stuff
}
Not that it should make a difference :?
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

Re: Displaying li elements horizontally.

Post by ta2shop »

nothing hapens! wired ha
Image
Post Reply