[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Смещается страница при размещении вначале form
Litron
Здравствуйте!
Может что не так делаю?!
Сверстал сайт. Все ок отображается.
В отдельном файле сверстал форму. Тоже отлично отображается.
Но когда в основном файле сразу после body подключил файл с формой, то сайт сверху получил отступ.
Это нормальное явление и код формы просто надо прятать в подвале? или как это обычно делается?
comolov
Открой отладчик нажав F12 в Хроме и посмотри на вкладке Elements, что там за отступ. Если не разберешся, то покажи код, как и что подключаешь.
Litron
В том то и дело, что там ничего не нахожу такого.

Вот index.php:
<!doctype html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html" charset="utf-8">

<link
rel="stylesheet" type="text/css" href="style.css">

<meta
name="Description" content="">
<meta
name="Keywords" content="">

<title>
Zаначка</title>

</head>
<body>
<?php
include 'order.tpl';?>
<div
id="main">
<div
class="section_logo">
<div
class="logo">
<!--<a href="index.php" >-->
<img src="images/logo.png" alt="logo">
<!--</a>-->
</div>
<div
class="name_logo">
<a
href="index.php">
<h1><span>
Z</span>аначка</h1>
</a>
</div>
<div
class="menu_phone_btn">
<div
class="menu">
<ul>
<li>
<a
href="#a_10241" title="ПОЧЕМУ МЫ">ПОЧЕМУ МЫ</a>
</li>
<li>
<a
href="#a_10242" title="ОТЗЫВЫ">ОТЗЫВЫ</a>
</li>
<li>
<a
href="#" title="КОНТАКТЫ">КОНТАКТЫ</a>
</li>
</ul>
</div>
<div
class="phone">
<p>

+7 922 123 45 67
</p>
</div>
<div
class="clear"></div>
</div>
<div
class="clear"></div>
</div>
<div
class="clear"></div>
<div
class="section_dark">
<div
class="dark"></div>
<div
class="section_inner">
<div
class="title">
Заказы
</div>
<div
class="sub_title">
Помогаем с бла блблаблаблабла блаблабла балаблаблабла<br> блаблаблаб аблаблабла блаблаблабла.
</div>
<div
class="c_btn">
<a
href="#popup_form" class="btn">Сделать заказ</a>
</div>

</div>
</div>
<div
class="section">
<a
name="a_10241"></a>
<div
class="title">
Вы нуждаетесь в помощи специалистов?
</div>
<div
class="arr">
<div
class="image">
<img
src="images/image_221.jpg">
</div>
<div
class="text">
<div
class="title_arr">
Узнайте стоимость Вашей работы<br><br>
</div>
<div
class="txt_arr">
Мы помогаем вааппвыавшцоущшкшцкшшк цукгцгукцгукгцукшщгцшукг укнегункегущшкег;<br>
ваповлдапова вапоадлыовдаоыуовшоуашк вапорвкгрпшгругшкрлываол варплорку парвлопргукрп раграыаывавп авпыпыыпыпап ыппкуапы ыапыапвп.<br>
<br>

Отправьте заявку, и мы не заставим Вас долго ждать с ответом (обычно 5-15 минут);
</div>
<div
class="c_btn1">
<a
href="#popup_form" class="btn1">Оставить заявку</a>
</div>
</div>
</div>
<div
class="clear"></div>
</div>
<div
class="o_nas">
<div
class="title_o_nas">
О нашей компании<br>
<span>
____________</span>
</div>
<div
class="img">
<img
src="images/komanda.jpg">
</div>
<div
class="text_o_nas">
Мы специализируемся наывлоарылвоилима ваоивлоам ваомтыдтвдслтывсы ыамлоиамло ы амыолмоиыилоарцгуда ывотлыотваыатыотвдслтдс ыбь ыотолытвм ымты олтыолмы амоуткдлт .
</div>
</div>
<div
class="uslugi">
<div
class="title">
Услуги, которые мы предлагаем
</div>
<div
class="sub_title">
Выберите услугу, подходящую под решение ваших задач
</div>
<div
class="arr">
<div
class="col">
<div
class="ico">
<img
class="dipl" src="images/d.png">
</div>
<div
class="title1">
Заказать
</div>
<div
class="text">
<p>
тут тоде немного текстаавпа ыпыапукпыввы.</p>
<p>
Настоятельно рекомендуем обращаться к нам заранее.</p>
</div>
<div
class="price">
от 90000 руб.
</div>
<div
class="c_btn2">
<a
href="#popup_form" class="btn2">Узнать подробнее</a>
</div>
</div>
<div
class="col">
<div
class="ico">
<img
class="kurs" src="images/k.png">
</div>
<div
class="title1">
Заказать
</div>
<div
class="text">
<p>
тут тоде немного текстаавпа ыпыапукпыввы.</p>
<p>
Настоятельно рекомендуем обращаться к нам заранее.</p>
</div>
<div
class="price">
от 30000 руб.
</div>
<div
class="c_btn2">
<a
href="#popup_form" class="btn2">Узнать подробнее</a>
</div>
</div>
<div
class="col">
<div
class="ico">
<img
class="ref" src="images/r.png">
</div>
<div
class="title1">
Заказать
</div>
<div
class="text">
<p>
тут тоде немного текстаавпа ыпыапукпыввы.</p>
<p>
Настоятельно рекомендуем обращаться к нам заранее.</p>
</div>
<div
class="price">
от 1000 руб.
</div>
<div
class="c_btn2">
<a
href="#popup_form" class="btn2">Узнать подробнее</a>
</div>
</div>
</div>
</div>
<div
class="clear"></div>
<div
class="section">
<div
class="title">
<span>
Гарантии</span>
</div>
<div
class="arr">
<div
class="image">
<img
class="garant" src="images/result.png">
</div>
<div
class="text">
<div
class="ttle">
Мы гарантируем!<br><br>
</div>
<div
class="txt">
<p>
Высокое качество выполнения заказов.</p>
<p>
Чтобы быть объективными и не вводить в заблуждение наших клиентов бла блаблаблаблаблабл балбалбалаблавоилвоивамьчитсмоилоыим</p>
</div>
<div
class="c_btn1">
<a
href="#popup_form" class="btn1">Оставить заявку</a>
</div>
</div>
</div>
<div
class="clear"></div>
</div>
<div
class="clear"></div>
<div
class="otzyiv">
<a
name="a_10242"></a>
<div
class="title">
Отзывы
</div>
<div
class="arr1">
<div
class="col1">
<div
class="foto">
<img
src="images/otziv.jpg">
</div>
<div
class="name">
✓ Наталья, 22 года
</div>
<div
class="otziv">
Пожелания: не останавливайтесь – двигайтесь вперед, становитесь еще лучше, расширяйтесь (и территориально тоже, например Украина). Удачи и спасибо за работу!
</div>
</div>
<div
class="col1">
<div
class="foto">
<img
src="images/otziv.jpg">
</div>
<div
class="name">
✓ Наталья, 22 года
</div>
<div
class="otziv">
Пожелания: не останавливайтесь – двигайтесь вперед, становитесь еще лучше, расширяйтесь (и территориально тоже, например Украина). Удачи и спасибо за работу!
</div>
</div>
<div
class="col1">
<div
class="foto">
<img
src="images/otziv.jpg">
</div>
<div
class="name">
✓ Наталья, 22 года
</div>
<div
class="otziv">
Пожелания: не останавливайтесь – двигайтесь вперед, становитесь еще лучше, расширяйтесь (и территориально тоже, например Украина). Удачи и спасибо за работу!
</div>
</div>
</div>
</div>
<div
class="clear"></div>
<div
class="zakaz">
Отправьте заявку, и мы не заставим Вас долго ждать с ответом
<div class="c_btn3">
<a
href="#popup_form" class="btn3">Оставить заявку</a>
</div>
</div>
<div
class="clear"></div>
<div
class="footer">
<div
class="logo_text">
бла бла бла
</div>
<div
class="address">
ООО «СтройТрейд», 123456, г.Москва, ул. Центральная 1, офис 100<br>
ИНН 1234567890 ОГРН 123456789012
<div class="polyc">
Политика конфиденциальности
</div>
</div>
<div
class="phone1">
+7 922 840 38 94
</div>
</div>
<div
class="clear"></div>
</div>
</body>
</html>


Вот сама форма order.tpl:
<div id="popup_form" class="zatemnenie">
<div
class="popup_form">
<div
class="forma_vvoda">
<form
name="order" action="#" method="post">
<div
class="form_title">
<div
class="title"><h3>Заказ</h3></div>
<div><a
href="#close" title="Закрыть" class="close">X</a></div>
</div>
<div
class="clear"></div>
<div
class="order_personal_data">
<input <?php
echo @$a1;?> type="text" name="name" maxlength="30" placeholder="Ф.И.О. *" value="">
</div>
<div
class="order_personal_data">
<input <?php
echo @$a2;?> type="text" name="email" maxlength="30" value="" placeholder="Email *">
</div>
<div
class="order_personal_data">
<input
type="text" name="number_phone" maxlength="30" value="" placeholder="Номер телефона">
</div>
<div
class="order_personal_data">
<fieldset <?php
echo @$a3;?>>
<legend>
Выберите:</legend>
<div
class="tip">
<div>
<input
id="k" type="checkbox" name="tip[]" value="1"><br>
<input
id="d" type="checkbox" name="tip[]" value="2"><br>
<input
id="r" type="checkbox" name="tip[]" value="3">
</div>
<div >
<label
for="k">1</label><br>
<label
for="d">2</label><br>
<label
for="r">3</label>
</div>
</div>
</fieldset>
<div
class="clear"></div>
</div>
<div
class="upload_file">
<label
for="uploadbtn" class="uploadbutton">Файлы</label>
<div
class="namefile">
<input
type="text" name="file-name" value="" disabled>
</div>
<div
class="clear"></div>
<input
type="file" name="uploadfile[]" id="uploadbtn" multiple>
</div>
<div
class="order_personal_data">
Описание заказа:<br>
<textarea
name="text_order" wrap="virtual"></textarea>
</div>
<div
class="order_personal_data">
<input
type="submit" name="go_order" value="Отправить заказ">
</div>
</form>
</div>
</div>
</div>


Если нужно style.css:
@charset "utf-8";
/* CSS Document */
/*
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 14px;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
*/

html{
font-size: 14px;
}
body,ul,p{
margin: 0px;
padding: 0px;
}

body{
font-family: Arial, sans-serif;
background-color: #ABABAB;
color: black;
border: 0 none;
}
a{
text-decoration: none;
}
h1{
font-size: 3.2rem;
font-style: italic;
}
.clear{
clear: both;
}

#main{
width: 960px;
margin: 0px auto;
background-color: white;
}

.section_logo{
display: inline-block;
position: relative;
padding-top: 10px;
width: 100%;
height: 120px;
}

.logo{
float: left;
height: 120px;
padding-left: 40px;
}
.logo img{
height: 120px;

}
.menu_phone_btn{
display: inline;
float: right;
min-width: 462px;
padding-top: 65px;
font-size: 1rem;
}
.menu{
float: right;
margin-right: 25px;
text-align: left;
}
.menu li{
color: #667;
display: inline;
}
.menu li::before{
content: "•";
padding: 0px 5px;
}
.menu li a{
color:inherit;
}
.menu li a:hover{
text-decoration: underline;
}
.phone{
padding-right: 5px;
float: right;
}

.section_dark{
height: 400px;
background-color: white;
background-image: url(images/header.jpg);
background-position: center;
background-attachment: fixed;
background-size: 960px;
}
.dark{
background-color: rgba(0,0,0,0.4);
width: 960px;
height: 400px;
position: absolute;
}
.section_inner{
position: relative;
width: 960px;
height: 300px;
padding-top: 50px;
}
.section_inner .title{
font-family: Arial, sans-serif;
color: white;
text-shadow: 0px 1px 1px #000;
font-size: 4.5rem;
text-align: center;
margin-bottom: 10px;
}
.section_inner .sub_title{
font-family: Arial, sans-serif;
color: white;
font-size: 1.85rem;
text-align: center;
text-shadow: 0px 1px 1px #000;
line-height: 150%;
}
.btn{
display: block;
color: #fff;
border: 3px solid;
font-size: 2.57rem;
font-family: Arial,sans-serif;
line-height: 75px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.btn:hover{
background-color: rgba(0,0,0,0.30);
}
.c_btn{
position: relative;
height: 80px;
width: 400px;
margin: 30px auto 0px;
text-align: center;
}
.section{
width: 960px;
background-color: white;
background-image: url(images/pattern_2.png);
padding-top: 25px;
padding-bottom: 40px;
}
.section .title{
font-size: 1.28rem;
text-align: center;
padding-bottom: 25px;
}
.section .arr,.uslugi .arr{
display: inline-block;
width: 100%;
}
.section .arr .image{
width: 350px;
height: 250px;
padding-left: 40px;
float: left;
}
.section .arr .text{
padding-right: 40px;
width: 470px;
float: right;
}
.title_arr{
font-size: 16px;
font-weight: bold;
}
.txt_arr{
line-height: 150%;
}
.section .arr .text .btn1{
display: block;
text-align: center;
height: 40px;
width: 250px;
border: 2px solid;
background-color: rgb(0, 102, 153);
color: rgb(255, 255, 255);
font-size: 1.21rem;
line-height: 38px;
border-radius: 3px;
}
.section .arr .text .btn1:hover{
background-color: rgb(255, 255, 255);
color: rgb(0, 102, 153);
border: 2px solid;
}
.c_btn1{
position: relative;
margin-top: 1.42rem;
}
.o_nas {
font-family: Arial, sans-serif;
background-color: white;
background-image: url(images/pattern_2.png);
}
.title_o_nas {
font-size: 2rem;
text-align: center;
padding-bottom: 15px;
}
.o_nas .title span{
font-size: 1.14rem;
}
.img img {
margin-left: 230px;
width: 500px;
box-shadow: 5px 5px 5px rgb(200,200,200);
}
.text_o_nas {
padding: 15px 100px 30px 120px;
font-size: 1rem;
line-height: 25px;
text-align: justify;
}
.uslugi {
font-family: Arial, sans-serif;
background-color: #006699;
background-image: url(images/pattern_12.png);
}
.uslugi .title {
text-align: center;
color: white;
font-size: 2rem;
padding-top: 20px;
margin-bottom: 10px;
}
.uslugi .sub_title {
text-align: center;
font-size: 1.14rem;
color: white;
margin-bottom: 30px;
}
.col {
float: left;
width: 320px;
}
.ico {
width: 120px;
height: 120px;
margin: 0px auto;
border-radius: 50%;
background: #f2f2f2;
display: block;
}

.dipl {
width: 90px;
padding-top: 30px;
padding-left: 15px;
}
.kurs {
width: 90px;
padding-top: 15px;
padding-left: 15px;
}
.ref {
width: 80px;
padding-top: 25px;
padding-left: 25px;
}
.col .title1 {
font-size: 1.28rem;
font-family: Arial,sans-serif;
text-align: center;
color: white;
padding-top: 15px;
padding-bottom: 15px;
}
.col .text {
color: white;
font-size: 1rem;
text-align: justify;
margin: 0px 30px;
line-height: 1.5;
}
.text p{
padding-bottom: 15px;
}
.price {
color: white;
text-align: center;
font-size: 25px;
}
.btn2 {
display: block;
background-color: rgb(0,0,0);
color: rgb(255,255,255);
width: 200px;
height: 40px;
text-align: center;
line-height: 2.3;
font-size: 1.21rem;
border: 1px solid;
border-radius: 3px;
margin: 20px auto;
}
.btn2:hover{
background-color: rgb(255,255,255);
color: rgb(0,0,0);
border: 1px solid;
}
.c_btn2{
position: relative;
}
.title span,.otzyiv .title{
text-align: center;
font-size: 2rem;
font-family: Arial, sans-serif;

}
.garant{
height: inherit;
padding-left: 80px;
}

.otzyiv {
background: white;
background-image: url(images/pattern_2.png);
}
.foto{
width: inherit;
overflow: hidden;
margin-bottom: 10px;
}
.name{
text-align: left;
font-size: 1.14rem;
padding-bottom: 15px;
border-bottom: 1px solid #D8D8D8;
}
.otziv{
text-align: left;
font-size: 1rem;
line-height: 1.5;
}
.col1{
width: 286px;
margin:0px 10px 10px;
float: left;
}
.arr1 {
display: inline-block;
margin: 0px 20px;
padding: 20px 0px;
}
.zakaz{
width: 100%;
background: white;
background-image: url(images/pattern_2.png);
background-position: 8px 4px;
padding: 60px 0px 20px;
text-align: center;
font-size: 1.14rem;
}
.btn3{
display: block;
width: 450px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: rgb(0, 102, 153);
color: rgb(255, 255, 255);
border: 2px solid;
border-radius: 2px;
margin: 25px auto 15px auto;
font-size: 1.71rem;
}
.btn3:hover{
background-color: rgb(255, 255, 255);
color: rgb(0, 102, 153);
border: 2px solid;
border-radius: 0px;
}
.c_btn3{
position: relative;
}
.footer{
display: inline-block;
width: 100%;
background: #3D3D3D;
background-image: url(images/pattern_14.png);
color: white;
padding: 30px 0px;
line-height: 150%;
vertical-align: bottom;
}
.logo_text{
margin: 0px 20px;
float: left;
font-size: 1.71rem;
}
.address{
margin: 0px 15px;
float: left;
font-size: 1rem;
}
.polyc{
text-decoration: underline;
cursor: pointer;
margin-top: 10px;
color: #888;
}
.phone1{
float: right;
text-align: left;
font-size: 1.71rem;
margin-right: 15px;
}
.name_logo{
float: left;
padding-left: 50px;
}
.name_logo h1 span{
color: red;
font-size: 3.57rem;
}
.name_logo a:visited, .name_logo a:active, .name_logo a:hover{
color: #000;
}
/*Всплывающее окно заказа*/
#popup_form{
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.5);

}
.popup_form{
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 540px;
background-color: #D4D4D4;
margin-left: -160px;
margin-top: -280px;
border-radius: 0px 10px;
}
#popup_form:target{display: block;}

.forma_vvoda{
padding: 0px 20px;
}
.form_title{
color: #F4F4F4;
font-size: 1.57rem;
display: inline-block;
width: 280px;
background-color: #006699;
background-image: url(images/pattern_12.png);
padding: 0px 20px;
margin:0px -20px;
}
h3{margin: 10px 0px;}
.form_title .title{float: left}
.form_title .close{
background-position: 0px 4px;
color: #000;
float: right;
text-align: center;
position: absolute;
top: -20px;
right: -20px;
width: 40px;
height: 40px;
background-color: #006699;
background-image: url(images/pattern_12.png);
border-radius: 50%;
line-height: 38px;
}
.form_title .close:hover{background-color: white;}
.order_personal_data{
margin-top: 10px;
}
.tip{
line-height: 1.5;
padding-top: 5px;
}
.tip div{
float: left;
}
.tip>div{padding-right: 10px;}

input[type=text]{
font-size: 1.21rem;
border-radius: 0px 10px;
height: 30px;
width: 257px;
padding: 0px 10px;
border: 1px solid #006699;
}

input[type=checkbox]{}

.order_personal_data textarea{
width: 265px;
height: 100px;
resize: none;
border-radius: 0px 10px;
border: 1px solid #006699;
padding: 0px 5px;
}
input[type="submit"]{
cursor: pointer;
width: 200px;
height: 40px;
text-align: center;
background-color: rgb(0, 102, 153);
color: rgb(255, 255, 255);
border: 2px solid;
border-radius: 0px 10px;
margin: 5px auto;
font-size: 1.71rem;
}
input[type="submit"]:hover{
background-color: rgb(255, 255, 255);
color: rgb(0, 102, 153);
border: 2px solid;
border-radius: 0px 10px;
}
input[type=file]{
position:absolute;
opacity: 0;
z-index: -1;
}

.uploadbutton{
position: absolute;
display:block;
float:left;
cursor:pointer;
width: 55px;
height: 26px;
line-height: 1.7;
text-align: center;
background-color: rgb(0, 102, 153);
color: rgb(255, 255, 255);
border: 2px solid;
border-radius: 0px 0px 0px 10px;
margin: 5px auto;
font-size: 1rem;
}
.uploadbutton:hover{
background-color: rgb(255, 255, 255);
color: rgb(0, 102, 153);
border: 2px solid;
border-radius: 0px 0px 0px 10px;
}
.upload_file{
margin-top: 10px;
}
input[name=namefile]{
width: 207px;
padding-left: 60px;
}
.namefile{
position: inherit;
padding-top: 4px;
}
fieldset{
border:1px solid #006699;
border-radius:0px 10px;
}
/*Конец окна заказа*/
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.