Проблем с подреждане на бутони

J

justspy

Registered
Здравейте, в момента си кодирам едно дизайнче, и съм стигнал до странициращите бутони, всичко добре .. реших да проверя как ще седи, когато бутоните са 4 и си направих опит с един цикъл for в php .. и ето го и проблема бутоните излизат вертикално, което е странно, а трябва да излизат хоризонтално, ето ви и картинка :

http://store.picbg.net/pubpic/16/3F/178156618acd163f.PNG

Както виждате подреждат се нагоре, а трябва да е настрани, като нормално странициране, ето ви кода :

Код: 
<div class="page" style="margin-top: -80px; margin-left: 350px;"><a href="#">'.$i.'</a></div>

а ето и css кода :

Код: 
.page {
background:url('../images/page.png') no-repeat;
height:33px;
width:35px;
border:0px;
}

.page a
{
text-decoration:none;
color:#161616;
font-weight:bold;
line-height:35px;
font-size:14px;
}

.page :hover
{
background:url('../images/page-hover.png') no-repeat;
height:33px;
width:35px;
border:0px;
font-size:14px;
display:block;
}
 
Дивовете по default излизат един под друг.
Ако искаш да имаш повече от 1 на 1 ред трябва да използваш float:left (или right)
 
и с float несе получава, последното бутонче (4) се лепва най в дясно или там в ляво и само то се вижда ..
 
Добре, аз попринцип това го правя, защото това релано ще е странициране.. дали ще имам същия проблем, когато кода е готов и всичко това ще си е странициране ?
 
justspy каза:
и с float несе получава, последното бутонче (4) се лепва най в дясно или там в ляво и само то се вижда ..
Увеличете...

Я не се получавало!

<ul>
<li><a href="#">'.$i.'</a></li>
<li><a href="#">'.$i.'</a></li>
<li><a href="#">'.$i.'</a></li>
</ul>

ul li{
padding-right:2px;
float:left;
}

ul li a{
background:url('../images/page.png') no-repeat;
height:33px;
width:35px;
display:block;
color:#161616;
font-weight:bold;
font-size:14px;
}

ul li a:hover{
background:url('../images/page-hover.png') no-repeat;
}


Ето така е мн по-добре, не да позлваш тез маргини после да се чудип , защо в ие не ми се вида добре.
 
Абе хора ви се хвърляте в нищото. За какво ви е толкова код като си има едно нещо наречено display ?!?!?

Праскаш ги в общ див и пишеш display:inline
 
appmaster каза:
Абе хора ви се хвърляте в нищото. За какво ви е толкова код като си има едно нещо наречено display ?!?!?

Праскаш ги в общ див и пишеш display:inline
Увеличете...

Ами толкова код ти е нужен 1-во да са семантично подредени а-тата в списък, 2-ро нали трябва за да се види картинакта а тага да е блоков елемент.
 
@shterev имам два проблема така със списаците .. направих си ги нали както трябва тоест подредих си ги и тук идва проблема изобщо е без значение дали ще сложа цифрата на страница в <a href .. изобщо незачита линк просто си излиза като картинка и така нито има hover нито нищо ..
 
Нещо не правиш както трябва. Аз пък нямам такива проблемии не сам имал.
Пробвай горния код , който съм написал.
 
Нещо не правиш както трябва. Аз пък нямам такива проблемии не сам имал.
Пробвай горния код , който съм написал.
 
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> Добре дошли!</title>
<style>
	#menu{
		list-style-type:none;
		padding:0px;
		margin:0px;
	}
	#menu li{
		float:left;
		padding:0 5px 0 0;
	}
	#menu a{
		display:block;
		width:20px;
		height:20px;
		background:#000;
	}
	#menu a:hover{
		background:#ccc;
	}
</style>

	</head>
	<body>
		<ul id="menu">
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
	</body>
</html>

Ето едно примерно кодче.
 
Добре имам проблем само с едно нещо по този начин ... вместо страниците да излиза 1 2 3 4 те излиза 4 3 2 1 :D
 
@Soul_Stealler стана с float:left; беше си зададено float:right; :D мерси, но ще дам точка на @shtarev тей като той ми даде ц елия код .. дано нямаш нищо напротив .. :lol:
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе