2014-02-11 20 views
0

瀏覽器:鉻形式正在改變我的頭向下

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

我有一個接觸頁面頁眉和頁腳是included_once和中間的內容。 hearder.php爲1 div的浮動左右(200px + 750px + margin -right:10px total 960px),頁腳爲一個div中心(960px) 這個內容在中間被動態地導入到這個頁面,與2個div左右浮動(200px + 750px + margin -right:10px total 960px)。

我的問題是這樣的:

當我插入在內容頁面的表單(750px - 右浮動),它移動頭部向下+/- 100像素的(750px)的所有正確的股利。

我該如何解決這個問題?

感謝

我試圖明確:左/右/兩......遺憾的是沒有解決我的問題:(

這裏是代碼(在此先感謝):

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> 
+0

至少添加一個鏈接。 –

+0

你有關於codepen或jsfiddle的例子來說明你的問題嗎? –

+0

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

回答

0

我無法在Chrome中複製您的問題,但在我看來,您的標記是一個複雜的,你的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>

+0

只是一個問題...如果我重新設計我的網頁後,你的意見,我仍然可以有動態變化的基礎上的選擇菜單?正確...?因爲我擁有註冊表,那就是我將擁有關於頁面,搜索頁面,結果頁面等的地方...... – Likwit

+0

是的,你應該可以用完全相同的方式來完成它。只需更改動態包含區域周圍的標記和css即可。 –

0

變化值的

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

#header_topo ul{ 
    margin:0; 
    } 

它將工作