1
可能很明顯，我對html和css很陌生。我最近把它們（和Django一起），並一直在玩我自己的代碼，並從各種教程中借用片段。生成你在下面看到的科學怪人的一個缺點是，神祕的異常傾向於從晴朗的藍天中出現。最近和令人困惑的是我的一些divs（頂部的兩個）之間的小空白區域。我已經爲罪魁禍首進行了高低調查，但迄今還沒有成功。如果有人能夠看一看並提供建議，那將是驚人的。某些div（但不是其他）的空白
這裏是我的HTML：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> BTracker </title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
</head>
<body>
<div id="page-container">
<div style="background:red">
div1
</div>
<div>
<ul id="navTop">
<li>Hi, <strong><a href="/UserName/">UserName</a></strong></li>
<li><a href="/help/">Help</a></li>
<li><a href="/account/settings/">Settings</a></li>
<li class="last"><a href="/account/logout/">Logout</a></li>
</ul>
</div>
<div id="main-nav">
<nav>
<ul class="nav">
<li><a href="/home/" class="homeIcon">Home</a></li>
<li><a href="/news/">News</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
<div id="header">
</div>
<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
<div id="content">
<div class="padding">
<h2><img src="path/to/about.gif" width="150" alt="About" /></h2>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida.</p>
<p>Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate.</p>
<h2><img src="/path/to/contact.gif" width="250" alt="Contact Us" /></h2>
<p>Phone: (07) 867 5309<br />
Fax: (07) 867 5309<br />
Email: <a href="mailto:[email protected]">[email protected]</a><br />
P.O Box: 12345 Timbuck, Too</p>
<p><a href="#">More contact informationż/a></p>
</div>
</div>
<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
Copyright BlahBlah Webservices
<br>
Powered by Yours Truely
</div>
</div>
</body>
</html>
這裏是我的CSS：
/*------------------------------------------------------------------
[ STYLE.CSS ] Main Stylesheet
--------------------------------------------------------------------
[Table of Contents]
1. Link colors
2. MAIN STYLES
2.a Tags defaults
2.b Page Container
2.b Navigations
/*------------------------------------------------------------------
1. Link colors
------------------------------------------------------------------*/
a:link {color:white;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:grey;} /* mouse over link */
a:active {color:yellow;} /* selected link */
/*------------------------------------------------------------------
2. MAIN STYLES
General definitions
--------------------------------------------------------------------
/*-------------------------------
2.a Tags defaults
-------------------------------*/
html {
background: url("/path/to/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font-family: Helvetica, Arial, Verdana, Sans-serif;
}
h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 35px;
padding-right: 200px;
}
div {margin:0;padding:0;}
/*-------------------------------
2.b Container
-------------------------------*/
#page-container {
width: 1000px;
margin: auto;
/* color: #979731; */
background: black;
}
/*-------------------------------
2.c Navigation
-------------------------------*/
#navTop {
text-align: right;
height:32px;
background: rgba(151, 111, 48, .4);
background:violet;
}
#navTop li {
display: inline-block;
list-style-type: none;
border-right: 1px solid #d1d1d1;
height: 8px;
line-height:8px;
padding: 0 5px;
}
#navTop li.last { border: 0; }
#main-nav {
height: 85px;
background: blue;
text-align: center;
}
.nav{
/* Affects the UL element */
overflow: hidden;
display: inline-block;
}
.nav li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
border-right: 1px solid rgba(9, 9, 9, 0.125);
/* Adding a 1px inset highlight for a more polished efect: */
box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
position:relative;
float: left;
list-style: none;
}
.nav li:after{
/* This creates a pseudo element inslide each LI */
content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;
/* Gradients! */
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
/* This will create a smooth transition for the opacity property */
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}
/* Treating the first LI and li:after elements separately */
.nav li:first-child{
border-radius: 4px 0 0 4px;
}
.nav li:first-child:after,
.nav li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
}
.nav li:last-child{
border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
.nav li:last-child:after,
.nav li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
border-radius:0 4px 4px 0;
}
.nav li:hover:after,
.nav li.selected:after,
.nav li:target:after{
/* This property triggers the CSS3 transition */
opacity:1;
}
.nav:hover li.selected:after,
.nav:hover li:target:after{
/* Hides the targeted li when we are hovering on the UL */
opacity:0;
}
.nav li.selected:hover:after,
.nav li:target:hover:after{
opacity:1 !important;
}
/* Styling the anchor elements */
.nav li a{
color: #5d5d5d;
display: inline-block;
font: 20px/1 Lobster,Arial,sans-serif;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
}
.nav a.homeIcon{
background:url("/path/to/home.png") no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
}
#header {
height: 130px;
background:red;
}
#sidebar-a {
float: right;
width: 500px;
line-height:25px;
background:purple;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 500px;
line-height: 25px;
background: orange;
}
#content .padding {
padding: 25px;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
padding-left: 150px
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#footer {
clear: both;
height: 66px;
border-top:1px solid #efefef;
padding: 13px 25px;
line-height:20px
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 16px;
color: white;
background: green;
}
#footer #altnav {
width: 400px;
float: right;
text-align: right;
}
.hidden {
display: none;
}
你能指出在哪個div？ –
我看不到任何div之間的任何空間：http://jsfiddle.net/KN7RE/ –
@NullPointer空白空間出現在page-container div內的第一個，第二個和第三個div之間。 – user1079401