Форум

Gamestop · #1 (**permalink**) 26.01.2012, 16:42

Пробовал таблицей, но таблица слишком громоздка,

проблема в том что картинки "Вход", всегда выше находится чем inputs, сама картинка есть <input type="image" /> - правильно-ли это??

ктонибудь киньте код для размышлений, а то уже долго мучаюсь, криво всё получается немогу сверстать,

я думаю сделать так

<div class="Серый блок который на всю ширину">
<div class="Блок в 980px такой размер нужен, он равен макету">
<img src="register.jpg" /> - это в левый край
<form>
логин
<input type="text" />
пароль
<input type="text" />
<input type="image" src="..." />
</form>
</div>
</div>

как вы думаете правильно-ли???

для выравнивания по центру я пробовал height: 50px; line-height:50px;
тока вот это свойство для формы ненаследуется, опять чтоли писать
или просто сделать display: table-cell??

я вот немогу понять какие свойства css надо применить для формы чтобы она в строчку и по центру элементы inputs, img или <input type="image" /> запутался и криво получилось

+ видите-ли надо чтобы когда пользователь войдёт, использовалась эта же структура, ну там будет тоже текст и картинки, конечно у них уже отдельно придётся отсутпы настраивать, ну главное я хочу понять структуру такого вот входа для пользователя сверху, просьба без таблиц, а то я использовал таблицы, там своя заморочка с td, ведь нужно-же чтобы код был чистым и лаконичным и главное понятным, если выложите примерчик прошу обьяснить по пальцам что и почему, буду благодарен, спасибо!!

мне ненужно для ie 6, мне просто нужно чтобы все современные браузеры это нормально отображали , что в принципе и наверняка и будет, просто как правильно это организовать, чтобы вот посомтреть на этот код и стало легко на душе)
Подскажите плизз

Картинку прикрепил внизу, кликните на неё чтобы посмотреть что я хочу сделать

ksa · #2 (**permalink**) 26.01.2012, 16:59

Сообщение от Gamestop

Подскажите плизз

Типа набросок...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<tdnk rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#head {
	min-width: 980px;
	background: silver;
}
#head_line {
	height: 40px;
	background: #000000;
}
#head_content {
	position: relative;
	width: 980px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
}
#b1 {
	position: absolute;
	top: 10px;
	left: 0;
}
#head_login {
	position: absolute;
	top: 10px;
	right: 0;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='head'>
	<div id='head_content'>
		<form id='frm' method = 'POST' action='tmp.html' onsubmit='return ok()'>
			<input type='button' id='b1' value='Регистрация' />
			<div id='head_login'>
				<label for='login'>Логин</label>
				<input id='login' type='login' />
				<label for='password'>Пароль</label>
				<input id='password' type='password' />
				<input type='button' id='b2' value='Вход' />
			</div>
		</form>
	</div>
	<div id='head_line'></div>
</div>
</body>
</html>

Gamestop · #3 (**permalink**) 26.01.2012, 17:02

вопрос а с картинками норма будет если вместо input button поставить type image???

Gamestop · #4 (**permalink**) 26.01.2012, 17:14

А без извращений типа position absolute, можно как-нибудь это сверстать?

ksa · #5 (**permalink**) 26.01.2012, 19:30

Сообщение от Gamestop

А без извращений типа position absolute, можно как-нибудь это сверстать?

Верстай - кто мешает.

Я так не считаю такое извращениями...

ksa · #6 (**permalink**) 26.01.2012, 19:30

Сообщение от Gamestop

а с картинками норма будет если вместо input button поставить type image?

Вставь и посмотри...

Gamestop · #7 (**permalink**) 26.01.2012, 21:44

я вот вставил картинку и у меня инпуты вниз ушли как их наравне сделать

Форум

Справочник

Discord чат

Курсы javascript