堆栈内存溢出
  繁体   English   中英

表格将我的标题下移

[英]form is shifting my header down

 原文  2014-02-11 14:54:36  0   3    php/ jquery/ html/ css-float

问题描述

浏览器：chrome

https://meocloud.pt/link/8b1b2319-7677-4c18-afd6-2d8ab48d5c63/form.JPG/

我有一个联系人页面，其中包含一个页眉和一个页脚，中间包含内容。 作为1 div左右浮动点的listener.php（200px + 750px + margin -right：10px总计960px），页脚为1 div中心（960px）中间的内容将动态导入到此页面中，其中2 div左右浮动（200px + 750px + margin -right：10px总计960px）。

我的问题如下：

当我在内容页面中插入表单（750像素-右浮动）时，它会将标题的所有右div（750像素）下移+/- 100像素。

我怎么解决这个问题？

谢谢

我试图清除：右/左/两者...不幸的是不能解决我的问题:(

这是代码（提前感谢）：

http://jsfiddle.net/yXdg6/embedded/result/ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home Page - MiCasa</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="box">
    <div id="header">
        <div id="header_topo">
                <a href="index.php"> <img src="assets/layout/logo/logo.jpg" alt="home" title="home" border="0" class="img_logo" />  </a>
                <ul>
                <li><a href="index.php?pg=home">Home</a></li>
                <li><a href="index.php?pg=properties">Property sell</a></li>
                <li><a href="index.php?pg=properties">Property to let</a></li>
                <li><a href="index.php?pg=rentals">Holidays rentals</a></li>
                <li><a href="index.php?pg=guide">Guide to Portugal</a></li>
                <li><a href="index.php?pg=register">Advertise</a></li>
                </ul>
        </div> <!------ close header_topo ------>

        <div id="header_navegar">

            <div id="header_navegar_central">
             <div id="header_navegar_filtro">
             <div id="q_search"></div> <!---- close q_search ---->
<h1> Find Your Home</h1> <h2> Quick Search</h2> 
<form name="filtrar_avancado" method="post" action="" >
                    <select name="tipo">
                        <option value=""> To Buy or To Rent? </option>
                        <option value=""> Properties for Sale </option>
                        <option value=""> Properties to Rent </option>
                        <option value=""> Holiday Rentals </option>
                    </select>

                    <select name="property_type">
                        <option value="" disabled="Disabled"> Select type </option>
                        <option value="" disabled="Disabled"> Apartment </option>
                        <option value="" disabled="Disabled"> Villa </option>
                        <option value="" disabled="Disabled"> Farm </option>
                        <option value="" disabled="Disabled"> Business </option>
                        <option value="" disabled="Disabled"> Townhouse </option>
                        <option value="" disabled="Disabled"> Old House </option>
                    </select>

                    <select name="area">
                        <option value="" disabled="Disabled"> Select Area </option>
                        <option value="" disabled="Disabled"> Algarve </option>
                        <option value="" disabled="Disabled"> Alentejo </option>
                        <option value="" disabled="Disabled"> Lisbon </option>
                        <option value="" disabled="Disabled"> Center </option>
                        <option value="" disabled="Disabled"> North </option>
                    </select>

                    <select name="bedrooms">
                        <option value="" disabled="Disabled"> Bedrooms </option>
                        <option value="" disabled="Disabled"> 1 room </option>
                        <option value="" disabled="Disabled"> 2 rooms </option>
                        <option value="" disabled="Disabled"> 3 rooms </option>
                        <option value="" disabled="Disabled"> 4 rooms </option>
                        <option value="" disabled="Disabled"> 5+ rooms </option>
                    </select>

                    <select name="price">
                        <option value="" disabled="Disabled"> select a price range </option>
                        <option value="" disabled="Disabled"> 0€ - 10000€ </option>
                        <option value="" disabled="Disabled"> 10001€ - 20000€ </option>
                        <option value="" disabled="Disabled"> 20001€ - 40000€ </option>
                        <option value="" disabled="Disabled"> 40001€ - 60000€ </option>
                        <option value="" disabled="Disabled"> 60001€ - 100000€ </option>
                    </select>

                    <span> Listing Count: 1256  </span>

                    <input type="submit" name="lista" value="Search" class="btn">
                    </form>

    </div><!------ close header_navegar_filtro ------>         

                <div id="header_navegar_banner">
                <img src="assets/temp/img02_b.jpg" class="banner"/>

                </div><!------ close header_navegar_banner ------>  

            </div><!------ close header_navegar_central ------>
        </div><!------ close header_navegar ------>
    </div> <!------ close header ------>
<div id="clear">
        <div id="imoveis_home">

                <div id="adverts"><h1>Advertisment </h1>
                <img src="assets/layout/list_property/List_Property_Bg_hover.jpg" class="advert"/>
    </div><!------ close adverts ------>
    <div id="facebook"><img src="assets/layout/facebook/FB_FindUsOnFacebook-114.png" class="facebook"/>
    </div> <!--- close Facebook ---->
 </div>
 </div>  <!--- close clear ----> 


<div id="pagina">
    <h1>Register</h1>

            <h2>The system of inserting your Advertizing is completly automatic. <br />
    Once your register, you will be given access to the member control panel where you will be able to:</h2>

     <h3>
     &raquo; Insert your property to let or sell!<br />
     &raquo; Edit you ongoing advert!<br />
     &raquo; Respond to messenges!<br />
     &raquo; Check your statistics!<br />
     &raquo; Process payments!<br />
     &raquo; Edit your profile!<br />
     &raquo; and much more....</h3>

     <h4>Register now and advertize you property!</h4>

     <h5>Questions? <a href="index.php?pg=contacts">Clique here!</a></h5>


   <form name="register_client" id="register_client" method="post" action="index.php?pg=register_ok" enctype="multipart/form-data">

       <fieldset><legend>Register and advertize</legend>

       <label>
          <span>Company:</span>
          <input type="text" name="company" />
        </label> 

        <label>
          <span>First Name:</span>
          <input type="text" name="first_name" />
        </label>

        <label>
          <span>Last Name:</span>
          <input type="text" name="last_name" />
        </label>

        <label>
          <span>E-mail:</span>
          <input type="text" name="email" />
        </label>

        <label>
          <span>Password:</span>
          <input type="password" name="password" />
        </label>

        <label>
          <span>Telephone:</span>
          <input type="text" name="telephone" />
        </label>


          <input type="submit" name="register" value="register" class="btn" />


       </fieldset>

     </form>


</div> <!--- close div pagina --->






        <div id="footer">
    <div class="txt" > 
    <ul>
        <li>

        <h2><a href="index.php?pg=about">About us</a></h2>
        <h3><a href="index.php?pg=news">News</a></h3>
        <h4><a href="index.php?pg=disclaimer">Terms and privacy</a></h4>
        <h5><a href="index.php?pg=contact">Contacts</a></h5>
        <h6><a href="index.php?pg=advertise">Advertise</a></h6>
        </li>
    </ul>
    </div><!------ close txt ------>
</div><!------ close footer ------>

</div><!------ close box ------>



</body>
</html>

3 个解决方案

解决方案1
 0  2014-02-11 14:59:52

尝试 

clear: both;

要么 

clear: left;

要么 

clear: right;

更多信息： http : //www.w3schools.com/cssref/pr_class_clear.asp

如果您可以发布代码，也可以帮助我们解决您的问题！

解决方案2
 0 已采纳  2014-02-11 16:43:36

我无法在Chrome中复制您的问题，但我认为您的标记令人费解，CSS CSS肿且不灵活。

因此，我建议您改变设计思路。 让内容流动，而不是对所有内容严格设置固定高度：

这也将使以后的编辑或响应变得更加容易： 

 /* ------- Content Container */ .contentContainer { width: 960px; margin: 0 auto; } /* ------- Aside */ .contentContainer .aside { width: 200px; float: left; } .contentContainer .aside .findHome { margin-bottom: 10px; background: #f00; border-radius: 5px; } .contentContainer .aside .advertisements { background: #f00; border-radius: 5px; } /* ------- Content */ .contentContainer .content { margin-left: 210px; } /* ------- Navigation */ .navigation { list-style: none; background: #014F66; padding: 10px; margin: 0 0 10px; border-radius: 5px; } .navigation li { display: inline; } .navigation li a { color: #fff; } /* ------- Hero Container */ .heroContainer { margin-bottom: 10px; } .heroContainer .hero { max-width: 100%; border-radius: 5px; display: block; } /* ------- Registration Panel */ .registration { border-radius: 5px; border: solid 1px #ccc; padding: 20px; } 
 <div class="contentContainer"> <div class="aside"> <div class="findHome"> Find Your Home <br> <br> <br> <br> <br> <br> </div> <div class="advertisements"> Advertisements <br> <br> <br> <br> <br> <br> <br> </div> </div> <div class="content"> <ul class="navigation"> <li><a href="">Home</a> </li> <li><a href="">Sell Property</a> </li> <li><a href="">Let Property</a> </li> <li><a href="">Holiday Rentals</a> </li> <li><a href="">Guide to Portugal</a> </li> <li><a href="">Advertise</a> </li> </ul> <div class="heroContainer"> <img class="hero" src="http://www.arts-wallpapers.com/art-wallpaper-org/panoramic-hd-wallpapers/images/2.jpg"> </div> <div class="registration"> <h1>Register</h1> </div> </div> </div>

解决方案3
 0  2014-02-11 17:22:27

改变值 

 #header_topo ul{
   margin:65px 0 0 0;
  }

至 

 #header_topo ul{
   margin:0;
  }

会工作的

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击提交后，我的表单正在转移到 php 中的后端页面 下拉在 php 中的我的 header 页面上不起作用 Magento标头CMS块移位 php正在改变我的图像 为什么我的选择表单没有下拉？ 验证我的表单和标题到另一个成功页面 如何通过添加下拉列表自定义我的 wordpress 帖子表单？ 为什么我的php下拉表单会导致未定义的偏移量 PHP File Down与header（） 如何防止我的联系表中出现电子邮件标题注入？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM