Проблема в верстке - HTML и CSS

kaljan775 · 23.08.2012, 11:05

В-общем, проблема следующая : надо сделать красиво страничку, исходная страничка такая :
https://www.dropbox.com/s/ns7kg0p1g92ilzk/Верстка.png
Код Html кнопок, которые сползают вверх :

Код:

<tr class="dataForAdd">
	<td>
		<a attr="cancel" class="cancel_creating"> </a>
	</td>
	<td>
		<input class="text-box single-line" id="ePID" name="ePID" type="text" value="">
	</td>
	<td>
		<input class="text-box single-line" id="RecordName" name="RecordName" type="text" value="">
	</td>
	<td>
		<input class="text-box single-line" id="ContactInfo" name="ContactInfo" type="text" value="">
	</td>
	<td>
		<input class="text-box single-line" id="Description" name="Description" type="text" value="">
	</td>
	<td>
		<a href="#" class="create_record"><span>Add</span></a>
	</td>
</tr>

Код CSS для этих элементов:

Код:


/*Button on dynamic downloaded data*/
.dataForAdd a { float: left; display: block; background: url(../../new_images/AddressBook/left_but_bg.png) left no-repeat; height: 24px; line-height: 24px; padding-left:17px; padding-top:9px; margin-right: 11px; }
.dataForAdd a span { display: block; padding-right: 17px; background: url(../../new_images/AddressBook/right_but_bg.png) no-repeat right; }

/*cancel creating record*/
a.cancel_creating { display: block; width: 16px; padding-top: 15px; height: 16px; background: url(../../new_images/AddressBook/delete_but.png) no-repeat center;}

В итоге, меняю padding - сползают текстбоксы, и правый конец кнопки, что делать - хз, подскажите, в какую сторону копать ?

Naive · 23.08.2012, 12:59

грязный хак: через относительное позиционирование (position:absolute

Правильно делать - через стандартные инпуты. Кстати, крестики должны быть по-идее на местах существующих строк)

kaljan775 · 23.08.2012, 13:31

вариант через
position : relative; top:6px и тд - нормальное решение проблемы?

однако контролы уехали еще дальше в опере

Naive · 24.08.2012, 08:28

В плане грязного хака я это и имел ввиду, описался... видать а чем-то своем думал)

Lesha · 24.08.2012, 10:18

http://jqbook.narod.ru/works/trash/ololo.html

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Ололо</title>
	<style type="text/css">
		.lite { border-collapse: collapse; }
		.lite th { color: #9393BB; text-align: left; }
		.lite th, .lite td { padding: 4px; border-bottom: 1px solid #E4E4E4; }
		.lite .add td {  border-bottom: none; }
		#mainlite button { padding: 0 2px; }
		#mainlite hr { color: #E4E4E4; }
		.lite input[type="text"] { width: 95%; }
	</style>
</head>
<body>

<div id="mainlite">

<h1>Hello kity</h1>
<table class="lite">
	<tr>
		<th>Record No.</th>
		<th>Walet No.</th>
		<th>Name</th>
		<th>Description</th>
		<th>Contact Info</th>
		<th>&nbsp;</th>
	</tr>
	<tr>
		<td>1</td>
		<td>11111</td>
		<td>awdawd</td>
		<td>awdawdawdwad</td>
		<td>awdawdawdawdawd</td>
		<td><input type="checkbox" name="checkbox[]" id="" /></td>
	</tr>
	<tr>
		<td>2</td>
		<td>11111</td>
		<td>awdawd</td>
		<td>awdawdawdwad</td>
		<td>awdawdawdawdawd awdawdawdawdawd awdawdawdawdawd</td>
		<td><input type="checkbox" name="checkbox[]" id="" /></td>
	</tr>
	<tr class="add">
		<td><img src="http://jqbook.narod.ru/works/trash/del_icon.png" alt="" /></td>
		<td><input type="text" name="" id="" /></td>
		<td><input type="text" name="" id="" /></td>
		<td><input type="text" name="" id="" /></td>
		<td><input type="text" name="" id="" /></td>
		<td><button>Add</button></td>
	</tr>
</table>
<hr>

<button>Add</button> <button>Delete</button> <button>Mess Payment</button>

</div>
</body>
</html>

23.08.2012, 12:59	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	грязный хак: через относительное позиционирование (position:absolute Правильно делать - через стандартные инпуты. Кстати, крестики должны быть по-идее на местах существующих строк) Alar, верни репу!

23.08.2012, 13:31	#3
kaljan775 :D Форумчанин Регистрация: 26.09.2010 Сообщений: 570	вариант через position : relative; top:6px и тд - нормальное решение проблемы? однако контролы уехали еще дальше в опере Пишу ПО, создаю сайты, делаю курсовые работы, за деньги C#, .NET, MS SQL, AngularJS, HTML, jQuery Последний раз редактировалось kaljan775; 23.08.2012 в 13:35.

24.08.2012, 08:28	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	В плане грязного хака я это и имел ввиду, описался... видать а чем-то своем думал) Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблемы в верстке	Raptor2013	HTML и CSS	3	10.08.2012 14:20
поболтайка про уроки по верстке	prostonick	HTML и CSS	26	25.06.2012 16:14