Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.01.2012, 15:42
Аспирант
Отправить личное сообщение для Gamestop Посмотреть профиль Найти все сообщения от Gamestop
 
Регистрация: 25.05.2011
Сообщений: 93

Как сверстать такую форму?
Пробовал таблицей, но таблица слишком громоздка,


проблема в том что картинки "Вход", всегда выше находится чем 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, мне просто нужно чтобы все современные браузеры это нормально отображали , что в принципе и наверняка и будет, просто как правильно это организовать, чтобы вот посомтреть на этот код и стало легко на душе)
Подскажите плизз

Картинку прикрепил внизу, кликните на неё чтобы посмотреть что я хочу сделать
Изображения:
Тип файла: jpg top.jpg (34.0 Кб, 12 просмотров)

Последний раз редактировалось Gamestop, 26.01.2012 в 15:53.
Ответить с цитированием
  #2 (permalink)  
Старый 26.01.2012, 15:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,110

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 26.01.2012, 16:02
Аспирант
Отправить личное сообщение для Gamestop Посмотреть профиль Найти все сообщения от Gamestop
 
Регистрация: 25.05.2011
Сообщений: 93

вопрос а с картинками норма будет если вместо input button поставить type image???
Ответить с цитированием
  #4 (permalink)  
Старый 26.01.2012, 16:14
Аспирант
Отправить личное сообщение для Gamestop Посмотреть профиль Найти все сообщения от Gamestop
 
Регистрация: 25.05.2011
Сообщений: 93

А без извращений типа position absolute, можно как-нибудь это сверстать?
Ответить с цитированием
  #5 (permalink)  
Старый 26.01.2012, 18:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,110

Сообщение от Gamestop
А без извращений типа position absolute, можно как-нибудь это сверстать?
Верстай - кто мешает. Я так не считаю такое извращениями...
Ответить с цитированием
  #6 (permalink)  
Старый 26.01.2012, 18:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,110

Сообщение от Gamestop
а с картинками норма будет если вместо input button поставить type image?
Вставь и посмотри...
Ответить с цитированием
  #7 (permalink)  
Старый 26.01.2012, 20:44
Аспирант
Отправить личное сообщение для Gamestop Посмотреть профиль Найти все сообщения от Gamestop
 
Регистрация: 25.05.2011
Сообщений: 93

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 20:24
Как можно сократить такую строчку кода. saturn Элементы интерфейса 2 30.11.2011 20:03
как можно доотправить форму Артем125 AJAX и COMET 1 23.11.2011 20:22
Как отправить форму на серв?? karakym Общие вопросы Javascript 4 19.12.2010 09:45
Как обработать такую конструкцию if(V1=0){fl1='au'}; Nikitos* Общие вопросы Javascript 1 19.12.2008 12:46