-1
Picture of the white space between "header" and "content"Почему так много пробелов между двумя div?
Я только что вернулся в веб-работу и не могу понять это! Theres большой разрыв между заголовком div и содержимым div, который отсутствует с div боковой панели, и код не слишком отличается для каждого из них, поэтому поэтому меня это смущает. Я не знаю, откуда это происходит.
Я взял кое-что из своего кода, что не имело значения, но дайте мне знать, если что-то, чего там нет.
<!-- Page Wrap -->
<div class="pagewrap">
<!-- Header -->
<div class="header">
<img src="images/Logo.jpg" width="530" height="180" alt=""/>
</div>
<!-- Header end -->
<!-- Sidebar -->
<div class="sidebartitle">
<center style="color: #FFFFFF">Specials</center>
</div>
<div class="sidebar">
<center>
<div class="page-popper">
</div>
<table width="187" height="196" border="0" align="center">
<tbody>
<tr>
<td><div class="buttonImageWrapper">
<img src="images/M-2.jpg" alt=""/>
</div></td>
<td>
<a href="/appointment.html">Request an Appointment</a></td>
</tr>
<tr>
<td><div class="buttonImageWrapper">
<img src="images/M-2.jpg" alt=""/>
</div></td>
<td><a href="/pdf/Salon-Menu.pdf">Salon Menu</a></td>
</tr>
<tr>
<td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td>
<td><a href="/pdf/Spa-Menu.pdf">Spa Menu</a></td>
</tr>
<tr>
<td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td>
<td><a href="/bridal-services.html">Bridal Services</a></td>
</tr>
<tr>
<td><div class="facebookImageWrapper"><img src="images/facebook-logo.png" width="48" height="48"></div></td>
<td><a href="">Like us on Facebook</a></td>
</tr>
</tbody>
</table>
</center>
</div>
<!-- Sidebar end -->
<!-- Content -->
<div class="contenttitle">
<center style="color: #FFFFFF">Welcome</center>
</div>
<div class="content">
<!-- Picture Slider -->
<table width="350" border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="left" valign="top"><div id="p7IRM_1" class="p7IRM01">
<div id="p7IRMow_1" class="p7IRMowrapper">
<div id="p7IRMw_1" class="p7IRMwrapper">
<div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" title=""><img class="p7IRMimage" src="../images/new/slide-show1/000.jpg" alt="000" name="p7IRMim_1" width="350" height="233" id="p7IRMim_1" /></a></div>
<div id="p7IRMdsw_1" class="p7IRMdesc_wrapper">
<div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div>
<div id="p7IRMds_1" class="p7IRMdesc"> </div>
</div>
<div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper">
<div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div>
</div>
</div>
</div>
<ul id="p7IRMlist_1" class="p7IRMlist">
<li><a href="../images/new/slide-show1/000.jpg">000</a></li>
<li><a href="../images/new/slide-show1/001.jpg">001</a></li>
<li><a href="../images/new/slide-show1/002.jpg">002</a></li>
<li><a href="../images/new/slide-show1/003.jpg">003</a></li>
<li><a href="../images/new/slide-show1/004.jpg">004</a></li>
<li><a href="../images/new/slide-show1/005.jpg">005</a></li>
<li><a href="../images/new/slide-show1/006.jpg">006</a></li>
<li><a href="../images/new/slide-show1/007.jpg">007</a></li>
</ul>
<!--[if IE 5.000]>
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style>
<![endif]-->
<!--[if lte IE 6]>
<style>.p7IRMpaginator a {width: auto !important;}</style>
<![endif]-->
<!--[if lte IE 7]>
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style>
<![endif]-->
<script type="text/javascript">P7_opIRM('p7IRM_1',1,1,1,3000,4000,1,0,1,0,1500,0,0);</script>
</div></td>
</tr>
</table>
<!-- Picture Slider end -->
<p><strong></strong><br />
<br />
<br />
</p>
<p><a href="salon-services.html">Salon Services</a> | <a href="spa-services.html">Spa Services</a> | <a href="spa-packages.html">Spa Packages</a> | <a href="bridal-services.html">Bridal Services</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a></p>
</div>
<!-- Content end -->
и CSS
.pagewrap {
width: 1000px;
margin: 0 auto;
}
.header {
background-color: black;
margin-bottom: 5px;
}
.header img {
width: 55%;
}
.sidebar {
width: 200px;
height: auto;
font-size: 16px;
float: left;
margin-bottom: 5px;
padding: 10px;
border: #000000 solid 2px;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.sidebartitle {
border: #000000 solid 2px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 10px;
height: auto;
width: 200px;
background-color: #68316B;
}
.content {
width: 600px;
height: auto;
font-size: 16px;
float: right;
margin-bottom: 5px;
padding: 10px;
border: #000000 solid 2px;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.contenttitle {
border: #000000 solid 2px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
float: right;
padding: 10px;
font-size: 16px;
width: 600px;
height: auto;
background-color: #68316B;
}
Что это со всеми таблицами .... вы были далеко за 20 лет? Также '
В Chrome Right Нажмите «Inspect Element» и просмотрите вкладку стилей, чтобы проверить, какие стили применяются, и проверьте вкладку «Computed», чтобы увидеть также модель окна. – raven
Я не самый лучший в веб-разработке, m действительно приличный, так что почему так много таблиц, это выглядит хорошо, хотя я думаю. Вы правы, я забыл забрать центр. Сейчас я сделаю JSFiddle. –