[英]form is shifting my header down
瀏覽器: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>
» Insert your property to let or sell!<br />
» Edit you ongoing advert!<br />
» Respond to messenges!<br />
» Check your statistics!<br />
» Process payments!<br />
» Edit your profile!<br />
» 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>
嘗試
clear: both;
要么
clear: left;
要么
clear: right;
更多信息: http : //www.w3schools.com/cssref/pr_class_clear.asp
如果您可以發布代碼,也可以幫助我們解決您的問題!
我無法在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>
改變值
#header_topo ul{
margin:65px 0 0 0;
}
至
#header_topo ul{
margin:0;
}
會工作的
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.