Как сверстать такую форму?
Вложений: 1
Пробовал таблицей, но таблица слишком громоздка,
проблема в том что картинки "Вход", всегда выше находится чем 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, мне просто нужно чтобы все современные браузеры это нормально отображали , что в принципе и наверняка и будет, просто как правильно это организовать, чтобы вот посомтреть на этот код и стало легко на душе) Подскажите плизз Картинку прикрепил внизу, кликните на неё чтобы посмотреть что я хочу сделать |
Цитата:
<!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>
|
вопрос а с картинками норма будет если вместо input button поставить type image???
|
А без извращений типа position absolute, можно как-нибудь это сверстать?
|
Цитата:
|
Цитата:
|
я вот вставил картинку и у меня инпуты вниз ушли как их наравне сделать
|
| Часовой пояс GMT +3, время: 16:48. |