Подравняване на текст-малко помощ

C

confiscate

Registered
Здравейте ,

Бихте ли ми казали начин да подравня цените долу да са на едно ниво , а не да са така на стълбичка :)
Ето снимка: http://store.picbg.net/pubpic/60/5D/b0579901f068605d.jpg

Ако може да са на една линия. Това разместване се получва според мен заради различната големина на текста.

Благодаря предварително за помощта !!! :)
 
Ти в момента padding-а го задаваш от текста горе. Смисъл с padding-top, нали? Защо не го направиш да е с padding от дъното? padding-bottom ?
 
confiscate каза:
Ами пак не става ..... много странно :?
Увеличете...
Е как така? Не може да не става... Махни си padding-а, който ти е отгоре и го сложи от долу. :)
Друг вариант, за който се сещам е да го сложиш в таблица, но аз мразя таблици... :D
 
Код: 
<!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>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="Arena">
<div id="col1">
<h4>ЛИЧЕН САЙТ</h4>
<p>Дизайн</p>
<p>Главна страница и до 5 вътрешни страници</p>
<p>Технологии на работа: XHTML, PHP, CSS, Javascript</p>
<h4><span style="color: #ff6600;">Получавате безплатно:</span></h4>
<p>Безплатна регистрация в най-големите търсачки</p>
<p>Дизайн на банер</p>
<p>Поддръжка на сайта: 6 месеца</p>
 <h4><span style="color: #ff6600;">Цени: От 30 до 80 лв.</span></h4>
</div>
<div id="col2">
<h4>ФИРМЕН ИЛИ БИЗНЕС САЙТ</h4>
<p>Дизайн</p>
<p>Главна страница и до 10 вътрешни страници</p>
<p>Технологии на работа: XHTML, PHP, CSS, Javascript,Flash , PHPBB3</p>
<h4><span style="color: #ff6600;">Получавате безплатно:</span></h4>
<p>Безплатна регистрация в най-големите търсачки</p>
<p>Дизайн на банер и визитна картичка</p>
<p>Поддръжка на сайта: 12 месеца</p>
 <h4><span style="color: #ff6600;">Цени: От 30 до 80 лв.</span></h4>
</div>
<div id="col3">
<h4>ДИНАМИЧЕН САЙТ</h4>
<p>Дизайн</p>
<p>Главна страница и неограничен брой вътрешни страници</p>
<p>Технологии на работа: XHTML, PHP, CSS, Javascript,Flash , PHPBB3, MySQL, RSS</p>
<h4><span style="color: #ff6600;">Получавате безплатно:</span></h4>
<p>Безплатна регистрация в най-големите търсачки</p>
<p>Дизайн на банер и визитна картичка</p>
<p>Поддръжка на сайта: 12 месеца</p>
 <h4><span style="color: #ff6600;">Цени: От 30 до 80 лв.</span></h4>
</div>
</div>
</div>
</body>
</html>

CSS

Код: 
/* Main Style */
body { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.5em; text-align:left; background: #566d7b;}
p,h3,h4 { margin:0; padding: 0;}
img { border:none;}

/* Container */
#container { margin: 0 auto; width:1000px; background: #ffffff;}

#Arena { width: 703px; margin-left:1px; }
#Arena h4 {  color: #0ca5d0; padding-bottom:3px; padding-left:5px;}
#col1 { width:229px;  float:left; border: 1px solid #d0cece; margin-left:1px;}
#col2 { width: 229px;    float:left; border: 1px solid #d0cece; margin-left:5px;}
#col3 { width:229px;  float:right; border:1px solid #d0cece; }

Eто , отделил съм само кода за това което ми трябва , а не целия код :)
 
Но като им сложа , цените се разместват , а не са на едно ниво , което аз се опитвам да направя :)
 
Вкарай p-то във CSS-а.
И му задай някакви стойности :)
Пробвай и да махнеш line-height:1.5em; от body-то :)
 
HTML: 
<!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>Untitled Document</title>
<style>


/* Main Style */
body { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.5em; text-align:left; background: #566d7b;}
p,h3,h4 { margin:0; padding: 0;}
img { border:none;}

/* Container */
#container { margin: 0 auto; width:1000px; background: #ffffff;}

#Arena { width: 703px; margin-left:1px; }
#Arena h4 {  color: #0ca5d0; padding-bottom:3px; padding-left:5px;}
#col1 { height:303px; width:229px;  float:left; border: 1px solid #d0cece; margin-left:1px;}
#col2 { width: 229px;    float:left; border: 1px solid #d0cece; margin-left:5px;}
#col3 { width:229px;  float:right; border:1px solid #d0cece; }	
	

</style>
</head>
<body>
<div id="container">
<div id="Arena">
<div id="col1">
<h4>ЛИЧЕН САЙТ</h4>
<p>Дизайн</p>
<p>Главна страница и до 5 вътрешни страници</p>
<p>Технологии на работа: XHTML, PHP, CSS, Javascript</p>
<h4 style="color: #ff6600;">Получавате безплатно:</h4>
<p>Безплатна регистрация в най-големите търсачки</p>
<p>Дизайн на банер</p>
<p>Поддръжка на сайта: 6 месеца</p>
 <h4 style="color: #ff6600; margin-top: 42px;">Цени: От 30 до 80 лв.</h4>
</div>
<div id="col2">
<h4>ФИРМЕН ИЛИ БИЗНЕС САЙТ</h4>
<p>Дизайн</p>
<p>Главна страница и до 10 вътрешни страници</p>
<p>Технологии на работа: XHTML, PHP, CSS, Javascript,Flash , PHPBB3</p>
<h4><span style="color: #ff6600;">Получавате безплатно:</span></h4>
<p>Безплатна регистрация в най-големите търсачки</p>
<p>Дизайн на банер и визитна картичка</p>
<p>Поддръжка на сайта: 12 месеца</p>
 <h4 style="color: #ff6600;">Цени: От 30 до 80 лв.</h4>
</div>
<div id="col3">
<h4>ДИНАМИЧЕН САЙТ</h4>
<p>Дизайн</p>
<p>Главна страница и неограничен брой вътрешни страници</p>
<p>Технологии на работа: XHTML, PHP, CSS, Javascript,Flash , PHPBB3, MySQL, RSS</p>
<h4 style="color: #ff6600;">Получавате безплатно:</h4>
<p>Безплатна регистрация в най-големите търсачки</p>
<p>Дизайн на банер и визитна картичка</p>
<p>Поддръжка на сайта: 12 месеца</p>
 <h4 style="color: #ff6600;">Цени: От 30 до 80 лв.</h4>
</div>
</div>
</div>
</body>
</html>

Така трябва да е добре! Махна ти излишните span. Можеш стила да го слагаш направо на h4.
 
И така пробвах пак не става ... причината е , че текста в колни 2 и 3 е по-голям от текста в колонка 1. Май ще ползвам таблици :cry: :D
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе