Page 1 of 1

Displaying li elements horizontally.

Posted: Wed May 11, 2011 12:19 pm
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;
}

Re: modifiing code problem

Posted: Wed May 11, 2011 12:28 pm
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 ;)

Re: modifiing code problem

Posted: Wed May 11, 2011 12:36 pm
by ta2shop
ok, i will, but i am floating the li tag!

Re: modifiing code problem

Posted: Wed May 11, 2011 1:07 pm
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.

Re: modifiing code problem

Posted: Wed May 11, 2011 2:32 pm
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!

Re: modifiing code problem

Posted: Wed May 11, 2011 2:35 pm
by EcazS
Do you have a product id in your css file?
Is it #product or ul#product ?

Re: modifiing code problem

Posted: Wed May 11, 2011 2:44 pm
by ta2shop
i have a div id="cart" i put a ul tag in the while loop with id="products"

Re: modifiing code problem

Posted: Wed May 11, 2011 2:49 pm
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 :?

Re: Displaying li elements horizontally.

Posted: Wed May 11, 2011 2:54 pm
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;
}

Re: Displaying li elements horizontally.

Posted: Wed May 11, 2011 4:30 pm
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 :?

Re: Displaying li elements horizontally.

Posted: Wed May 11, 2011 5:39 pm
by ta2shop
nothing hapens! wired ha