Форум Сайтостроение Веб-строительство

Помогите с верстой по картинке

Neptoon
На сайте с 12.07.2011
Offline
126
Neptoon
443

Сделал верхнюю серую панель и форму ввода по центру, а вот дальше не получается.

Ссылка на архив 

<html>

<head>

<link rel="stylesheet" href="bootstrappanel.css" type="text/css" media="screen, projection" />

</head>

<body>

<style type="text/css">

body {padding-top:35px;}

#nav {height:35px; border-bottom:1px solid #ddd; position:fixed; top:0px; left:0px; right:0px; background:#F1F1F1; z-index:9999;}

</style>



<div id="nav" style="clear:both;">



	<center>

	<form style="padding-top:5px;" action="" method="post">

	<div class="input-append">

	<input class="span2" style="width: 280px; height: 27px; font-size: 14px;" type="text" name="u">

	<input title="Go" style="margin: 5px 5px; border: 0; position: relative; left: -25px; margin-right: -16px; width: 16px; height: 16px; clear:both;" type="image" src="enter.png" width="16" height="16" align="top">

	</div>

	</form>

	</center>

</div>

Content



<input type="radio" name="mode" value="1" onclick="javascript: document.Mode.submit()">1 <input type="radio" name="mode" value="2" checked onclick="javascript: document.Mode.submit()">2<input type="radio" name="mode" value="3"  onclick="javascript: document.Mode.submit()">3

</body>

</html>

Текстовое поле должно быть строго по центру экрана. Слева от него добавить радио-инпуты (их код уже представлен выше), а справа с отступом 35px от края страницы добавить ссылку Закрыть панель.

Вот как должно получится:

Просьба помочь, спасибо.

Drive your way
mugukamil
На сайте с 05.11.2013
Offline
26
mugukamil
#1 

<html>
<head>
<meta charset="uft-8">
<title>searchengines</title>
<link rel="stylesheet" href="bootstrappanel.css" type="text/css" media="screen, projection" />
</head>
<body>
<style type="text/css">
body {padding-top:35px;}
#nav {height:35px; border-bottom:1px solid #ddd; position:fixed; top:0px; left:0px; right:0px; background:#F1F1F1; z-index:9999;}
form {
	position: relative;
}

.radio {
	position: absolute;
	left: 300px;
	top: 9px;
	z-index: 9999999;
}
</style>



<div id="nav" style="clear:both;">

			<center>
			<form style="padding-top:5px;" action="" method="post">
			<div class="input-append">
			<input class="span2" style="width: 280px; height: 27px; font-size: 14px;" type="text" name="u">
			<input title="***x41E;***x442;***x43A;***x440;***x44B;***x442;***x44C;" style="margin: 5px 5px; border: 0; position: relative; left: -25px; margin-right: -16px; width: 16px; height: 16px; clear:both;" type="image" src="enter.png" width="16" height="16" align="top">
			</div>
			</form>
			</center>
</div>
Content

<div class="radio">
	<span>text is here</span>
	<input type="radio" name="mode" value="1" onclick="javascript: document.Mode.submit()">1
	<input type="radio" name="mode" value="2" checked onclick="javascript: document.Mode.submit()">2
	<input type="radio" name="mode" value="3"  onclick="javascript: document.Mode.submit()">3</div></body>
</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий