прочее Помочь в html&css

JIOPD · 26 февраля, 2016

Нужна помощь.

Есть html и css файл.

html файл.

<html>
	<head>
		<!-- utf8!!! или тут или в htaccess -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- utf8!!! или тут или в htaccess -->
		
		<title>Калькулятор водоснабжения</title>

		
		<!-- css для формы -->
		<link rel="stylesheet" href="form.css" />
		<!-- css для формы -->
		
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script src="js/submit.js"></script>
		<script src="js/calc.js"></script>

	</head>
	<body id='body'>
		
	<h1>Калькулятор стоимости колодца</h1>
	<a href="/colodec/" id="back">Вернуться на главную</a>
						<!-- Калькулятор -->
						
						<form method="post" action="javascript:void(0);" id="request" onsubmit="ajax('request', 'call')">
							<fieldset id="calc-top">
								
								
								<div class="row">
									<div class="title">1. Количество колец</div>
									
									<ul>
										<li>
											<label>Выберите количество колец</label>
											<select id="kolvo" name="kolvo">
												<option>3</option>
												<option>4</option>
												<option>5</option>
												<option>6</option>
												<option>7</option>
												<option>8</option>
												<option>9</option>
												<option>10</option>
												<option>11</option>
												<option>12</option>
												<option>13</option>
												<option>14</option>
												<option>15</option>
												<option>16</option>
												<option>17</option>
												<option>18</option>
												<option>19</option>
												<option>20</option>
												<option>21</option>
												<option>22</option>
												<option>23</option>
												<option>24</option>
												<option>25</option>			
											</select>
										</li>
									</ul>
								</div>
								<div class="row">
									<div class="title">2. Тип колец</div>
									
									<ul>
										<li><input type="radio" name="type1" value="1" checked /><label>Включить стоимость колец с замками</label></li>
										<li><input type="radio" name="type1" value="0" /><label>Включить стоимость колец без замков</label></li>
									</ul>
								</div>
								<div class="row">
									<div class="title">3. Крепление швов</div>
									
									<ul>
										<li><input type="radio" name="krepej" value="1" checked /><label>Включить стоимость крепления швов</label></li>
										<li><input type="radio" name="krepej" value="0" /><label>Не включать стоимость крепления швов</label></li>
									</ul>
								</div>
								<div class="row">
									<div class="title">4. Гидроизоляция швов</div>
									
									<ul>
										<li><input type="radio" name="hydro" value="1" checked /><label>Включить стоимость гидроизоляции швов</label></li>
										<li><input type="radio" name="hydro" value="0" /><label>Не включать стоимость гидроизоляции швов</label></li>
									</ul>
								</div>
								<div class="row">
									<div class="title">5. Дополнительные материалы</div>
									
									<ul>
										<li><input type="radio" name="type2" value="1" checked /><label>Включить стоимость гравия, песка, цемента и жидкого стекла (рекомендуется)</label></li>
										<li><input type="radio" name="type2" value="0" /><label>Не включать стоимость гравия, песка, цемента и жидкого стекла</label></li>
									</ul>
								</div>
								<div class="row">
									<div class="title">6. Аксессуар</div>
									
									<ul>
										<li><input type="radio" name="type3" value="1" checked /><label>С домиком на колодце</label></li>
										<li><input type="radio" name="type3" value="0" /><label>Без домика на колодце</label></li>
									</ul>
								</div>
								
								<div class="submit">
									<input type="button" id="submit" class="calc" value="Рассчитать"/>
								</div>
														</form>
							</fieldset>
							<td><td>
							<fieldset id="calc-bot">
								<h1 class="title">Итого</h1>
								<div class="row"><label>Cтоимость колодца</label><input disabled type="text" name="final" id="final" value="" /><input type="hidden" name="final" id="final2" value="" /></div>
								<h1 class="title" style="margin-bottom:21px;">Сделать заказ</h1>
								<div class="row"><input id="fio" name="fio" placeholder="Имя (обязательно)" type="text" value="" /></div>
								<div class="row"><input id="phone" name="phone" placeholder="E-mail (обязательно)" type="text" value="" /></div>
								<div class="row"><input id="mail" placeholder="Телефон" name="mail" type="text" value="" /></div>
								<div class="row"><textarea name="text" id="text"></textarea></div>
							
								<div class="row"><input type="submit" id="submit" value="Сделать заказ"></div>
							</fieldset>
							</td></td>
						<!-- Конец калькулятора -->
		<div class="clr"></div>
	</body>
</html>

css файл

html {
	background:#f4f5ef;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
	font-size:30px;
	line-height:24px;
	color:#000;
	padding-left:60px;
	padding-top:10px;
	margin-bottom: 15px;
}

.clr {
	content:" ";
	display:block;
	width:150%;
	height:1px;
	clear:both;
}

#calc-top {
	background:#e7e8e3; 	
	border:1px solid #d5d6d2;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	padding-top: 34px;
	padding-left:59px;
	width:365px;
	border-left:1px solid #d5d6d2;
	border-right:1px solid #e0e1dc;
}

#body a#back{
	font-size:14px;
	line-height:24px;
	color:#4c4c4c;
	text-decoration:underline;
	position:absolute;
	right:14px;
	top:12px;
}

#body a#back:hover {
	text-decoration:none;
}

#body {
	width:100%;
	overflow-x: hidden;
	margin: 18px auto 0;
	background:#cbccc8;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	position:relative;
}



#calc-top ul {
	margin-top:1px;
	padding-left:0px;
	margin-bottom: 0px;
}

#calc-top li {
	list-style:none;
}

#calc-top .title {
	color:#7a2e0e;
	font-size:16px;
	line-height:24px;
	font-weight:bold;
}

#calc-top input[type="radio"] {
	font-size:14px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	line-height:24px;
	margin-left: 15px;
	margin-right: 8px;
}

#calc-top label {
	font-size:14px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	line-height:24px;
}

#calc-top .row {
	margin-bottom:0px;
}

#calc-top #submit {
	background:#2a7ed5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#fff;
	border:0px;
	margin:0px;
	padding:0px;
	font-size:16px;
	text-align:center;
	width:176px;
	margin-top:14px;
	font-weight:bold;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	height:80px;
}

#calc-top #submit:hover {
	cursor:pointer;
}	

#calc-top .submit {
	text-align:right;
}

#calc-top select {
	margin-left:15px;
}

#calc-bot {
	width:409px;
	background:#d8d9d4;
	border:1px solid #d5d6d2;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#222222;
	padding-top: 21px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	padding-right: 8px;
	padding-bottom:10px;
}

#calc-bot .title {
	font-size:24px;
	line-height:24px;
	color:#222222;
	padding-left:1px;
	margin-bottom:0px;
}

#calc-bot .row {
	font-size:24px;
	line-height:36px;
	color:#222222;		
	width:100%;
	clear:both;
}

#calc-bot .row:after {
    clear: both;
    content: " ";
    display: block;
    height: 2px;
    width: 100%;
}

#calc-bot .row > * {
	display:inline;
}

#calc-bot .row > label {
	float:left;
	font-size:14px;
	line-height:36px;
	color:#222222;
	width:180px;
	display:block;
}

#calc-bot .row > input,
#calc-bot .row > textarea {
	font-size:24px;
	line-height:36px;
	font-weight:bold;
	padding:0 10px;
	width:411px;
	border:1px solid #999999;
	font-size:14px;
}

#calc-bot .row > input:focus,
#calc-bot .row > textarea:focus {
	border-color:#000;
}

#calc-bot .row > textarea {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	resize:none;
	border:1px solid #bcbdbb;
	;
	height:150px;
	margin-top:0px;
	margin-bottom:0px;
}

#calc-bot .row > input {
	height:40px;
	text-align:left;
	border:1px solid #bcbdbb;
	margin-bottom:13px;
	;
}

#calc-bot #final {
	background:none;
	border:0px;
	height:28px;
	margin:0px;
	padding:0px;
	text-align:right;
	font-weight:bold;
	color:#7a2e0e;
	font-size:24px;
	text-align:left;
	float: left;
	width: 200px;
}

#calc-bot #submit {
	background:#be0909;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#fff;
	border:0px;
	margin:0px 0px 0px 100px;
	padding:0px;
	font-size:16px;
	text-align:center;
	width:176px;
	margin-top:20px;
	font-weight:bold;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	height:31px;
	margin-left: 230px;
	line-height: 31px;
	margin-top: 45px;
}

#calc-bot #submit:hover {
	cursor:pointer;
}	

#calc-top { 

float:center;


}


#calc-bot {

	float:center;

}

#calc-top h1,
#calc-bot h1 {
	margin-top: 0;
}

Как вы видите в коде, выходит 2 окна с информацией, но они друг под другом. А мне нужно что бы было 2 этих окна рядом с небольшим отступом.

Криво, но объяснил. Кому нужно, могу показать на скринах.

Изменено 26 февраля, 2016 пользователем JIOPD

L2Banners · 26 февраля, 2016

вместо:

#calc-top {
float:center;
}

#calc-bot {
float:center;
}

Поставить это:

#calc-top {
   float:left;
}

#calc-bot {
    margin-left:50px;
   float:left;
}

Изменено 26 февраля, 2016 пользователем L2Banners

JIOPD · 26 февраля, 2016

вместо:

#calc-top {

float:center;

}

#calc-bot {

    float:center;

}

Поставить это:

#calc-top {

   float:left;

}

#calc-bot {

    margin-left:50px;

   float:left;

}

Спасибо доброй души человек)

Войти

прочее Помочь в html&css

Рекомендуемые сообщения

JIOPD 2

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

L2Banners 664

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

JIOPD 2

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Сайт

Активность

Магазин

My Details