Выравнивание текста в верстке

[Borka]

Привет всем. Я изучаю html и css чуть более недели. На данный момент выполняю учебную верстку. Встала проблема с выравниванием текста в одну строку как показано на рис. то что

получилось у меня на рис.2

собственно проблемы следующие возникли: при изменении размера ячейки (write comment) меняется также и размер самой верхней ячейки (12). Буду благодарен если посмотрите мой html и css код перейдя по ссылке. http://zalil.ru/34662928.

[Struggle]

Забудь о таблицах, переделывай,

щас покажу примерный код

.block {
width: 200px;
height: 280px;
}
.block p {
float: left;
}
.block span {
float: right;
display: block;
background: url();
}
<div class="block">
<p>Текст</p>
<span>054</span>
</div>

Edited August 5, 2013 by Struggle

[Borka]

Struggle, а как без таблиц вообще делать если у меня таких элементов по 4 в строке, а строк 3 таких?

[Catherine]

Не по тем источникам учите, начните хотя бы с азов блочной верстки ) Оставьте таблицы для табличных данных.

http://htmlbook.ru/samlayout/blochnaya-verstka

[Borka]

Вот сверстал без использования вложенной таблицы

.

Укажите пожалуйста на недостатки в моем коде

<table id = 'icon' width='100%' cellspacing="0">
<tr style = 'vertical-align:top;'>
<td style='border-radius:8px;'>
	 <div class='rod' align= 'center'>
	 <div class = 'topt' >
	 <p><a href = '#html'>Lets get movies</a></p>
	 <form name = 'loic' action = '#' method = 'post'>
		 <p><input type="IMAGE" src = 'images/mes.png' value="" id = 'l1'><label for="l1"><p>12</p></label></p>
	 </form>
	 </div>
	 <div class = 'pcontent'>
	 <img src = 'images/pic1.gif' alt= 'picture' >
	 </div>
	 <div class = 'tfooter'>
	 <form name = 'star' action = '#' method = 'post'>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l1'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l2'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l3'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l4'></p>
	 <p><input type="IMAGE" src = 'images/star2.png' value="" id = 'l5'><label for="l1"><p style = 'padding-top: 2px; float:right; padding-right:2px;'><a style = 'font-size: 10px;' href = '#.html'>Write a Comment</a></p></label></p>
	 </form>	
	 </div>
	 </div>
</td>

[Struggle]

Вот сверстал без использования вложенной таблицы

.

Укажите пожалуйста на недостатки в моем коде

<table id = 'icon' width='100%' cellspacing="0">
<tr style = 'vertical-align:top;'>
<td style='border-radius:8px;'>
	 <div class='rod' align= 'center'>
	 <div class = 'topt' >
	 <p><a href = '#html'>Lets get movies</a></p>
	 <form name = 'loic' action = '#' method = 'post'>
		 <p><input type="IMAGE" src = 'images/mes.png' value="" id = 'l1'><label for="l1"><p>12</p></label></p>
	 </form>
	 </div>
	 <div class = 'pcontent'>
	 <img src = 'images/pic1.gif' alt= 'picture' >
	 </div>
	 <div class = 'tfooter'>
	 <form name = 'star' action = '#' method = 'post'>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l1'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l2'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l3'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l4'></p>
	 <p><input type="IMAGE" src = 'images/star2.png' value="" id = 'l5'><label for="l1"><p style = 'padding-top: 2px; float:right; padding-right:2px;'><a style = 'font-size: 10px;' href = '#.html'>Write a Comment</a></p></label></p>
	 </form>	
	 </div>
	 </div>
</td>

Используй 2 кавычки лучше) так читабельнее будет, и стили все в отдельный фаил, да и кстати, таблицы остались

Edited August 6, 2013 by Struggle

[Borka]

Вот сверстал без использования вложенной таблицы

.

Укажите пожалуйста на недостатки в моем коде

<table id = 'icon' width='100%' cellspacing="0">
<tr style = 'vertical-align:top;'>
<td style='border-radius:8px;'>
	 <div class='rod' align= 'center'>
	 <div class = 'topt' >
	 <p><a href = '#html'>Lets get movies</a></p>
	 <form name = 'loic' action = '#' method = 'post'>
		 <p><input type="IMAGE" src = 'images/mes.png' value="" id = 'l1'><label for="l1"><p>12</p></label></p>
	 </form>
	 </div>
	 <div class = 'pcontent'>
	 <img src = 'images/pic1.gif' alt= 'picture' >
	 </div>
	 <div class = 'tfooter'>
	 <form name = 'star' action = '#' method = 'post'>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l1'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l2'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l3'></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" id = 'l4'></p>
	 <p><input type="IMAGE" src = 'images/star2.png' value="" id = 'l5'><label for="l1"><p style = 'padding-top: 2px; float:right; padding-right:2px;'><a style = 'font-size: 10px;' href = '#.html'>Write a Comment</a></p></label></p>
	 </form>	
	 </div>
	 </div>
</td>

Используй 2 кавычки лучше) так читабельнее будет, и стили все в отдельный фаил, да и кстати, таблицы остались

ну так осталась главная таблица. без нее никак т.к. полный блок верстки вот так вот выглядит

2) по поводу помещения в отдельный файл.. у меня большая часть стилей в одном файле. Те которые в коде не удалось корректно использовать из файла

вот как в этой строчке

<p><input type="IMAGE" src = 'images/star2.png' value="" id = 'l5'><label for="l1"><p style = 'padding-top: 2px; float:right; padding-right:2px;'><a style = 'font-size: 10px;' href = '#.html'>Write a Comment</a></p></label></p>

не получается обратиться к тегу p и a которые в label