css - 我的 "full width"页脚有框架吗？

标签 css footer

我浏览了 stackoverflow 和其他几个论坛，但一直没有弄清楚为什么我的页脚周围有一个框架？我正在尝试使用全宽页脚 ( http://www.tamararenwick.com/test/template.php )，并且它主要工作，除了页脚周围大约 10 像素的环绕。谁能告诉我哪里出错了？我真的很感激另一双(更有经验的)眼睛。谢谢!

@charset "utf-8";
/* CSS Document */


body {
	background-image: url(/test/assets/images/background.jpg);
	background-repeat: repeat;
}

#container {
	width: 860px;
	margin: 0 auto;
}

/* navigation */

#nav,
#logo,
#contact {
	float: left;
}

#logo {
	padding: 0px 20px 0px 20px;
	width: 80px;
}

#nav {
	padding: 0px 50px 0px 0px;
	width: 450px;
}

#contact {
	padding: 0px 20px 0px 20px;
	width: 200px;
	text-align: right;
}


#nav p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1em;
	color: #663366;
}

#contact a {
	text-decoration: none;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.8em;
	color: #663366;
}

#contact a:hover    {
		color: #994d99;
		text-decoration: underline;
}


.menu,
.selected   {
	float: left;
	padding: 0px 50px 0px 0px;
}

.menu li,
.selected li  {
	list-style-type: none;
}

.menu li a {
	text-decoration: none;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #663366;
}

.selected li a  {
	text-decoration: none;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #994d99;
}

.menu li a:hover,
.selected li a:hover    {
		color: #994d99;
}



/* home */

#home {
	margin-top: 65px;
}

#homeColOne, #homeColTwo, #homeColThree {
	float: left;
}

#homeColOne, #homeColTwo {
	width: 280px;
	margin-right: 60px;
}

#homeColThree {
	width: 280px;

}


/* inside */

#inside {
	display: inline-block;
	background-color: #ffffff;
	margin-top: 10px;
	padding: 20px 20px;
}

#columnOne, #columnTwo, #columnThree {
	float: left;
	}

#columnOne {
	min-height: 300px;
	width: 150px;
	padding-left: 0px;
	padding-right: 20px;
	padding-top: 20px;
	background: url("/test/assets/images/background-col1.jpg") no-repeat;
	background-position: top right;
}

#columnTwo {
	width: 440px;
	padding-left: 20px;
	padding-right: 20px; 
}

#columnThree {
	min-height: 300px;
	width: 150px;
	padding-left: 20px;
	padding-right: 0px;
	padding-top: 20px;
	background: url("/test/assets/images/background-col3.jpg") no-repeat;
	background-position: top left;
}


/* column one */

#columnOne .sidebar-contact, 
#columnOne .sidebar-blog,
#columnOne .sidebar-about,
#columnOne .sidebar-social,
#columnOne .sidebar-testimonials,
#columnOne .sidebar-nav, 
#columnOne .sidebar-work {
	padding: 0px 0px 40px 0px;
}


#columnOne h2 {
	font-family: "Eras Bold ITC", Verdana, sans-serif;
	font-size: 1em;
	color: #66334D;
}

#columnOne h2 a {
	color: #66334D;
	text-decoration: none;
}

#columnOne h2 a:hover {
	color: #994D99;
}

#columnOne h2 a:active {
	color: #994D99;
}


/* column one - side nav */

#columnOne .sidebar-nav ul {
	display: block;
	border-top: 1px solid #E0D5EA;
	width: 140px;
	padding-left: 0px;
	padding-right: 0px;
	margin-bottom: 0px;
}

#columnOne .sidebar-nav ul li {
	font: 12px Arial;
	background-color: #4D3366;
	color: #e1e1e1;
	border-bottom: 1px solid #E0D5EA;
	padding: 10px;
	list-style: none;
}

#columnOne .sidebar-nav ul li a {
	color: #FFF;
	text-decoration: none;
}

#columnOne .sidebar-nav ul li a:hover {
	color: #FFF;
	text-decoration: underline;
}


/* column one - testimonials */

#columnOne .sidebar-testimonials ul {
	border-top: 0px;
	width: 130px;
	padding-left: 10px;
}

#columnOne .sidebar-testimonials ul li {
	background-color: none;
	border-bottom: 0px;
	padding: 0px;
	list-style: none;
}

#columnOne .sidebar-testimonials ul li a {
	color: #212121;
	text-decoration: none;
}

#columnOne .sidebar-testimonials ul li a:hover {
	color: #994D99;
}


/* column two */

#columnTwo p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.9em;
	color: #333333;
	padding-bottom: 10px;
	line-height: 22px;
}

#columnTwo b {
	font-weight: bold;
}

/* column two headers */

#columnTwo h1 {
	font-family: "Eras Bold ITC", Verdana, sans-serif;
	font-size: 1.8em;
	color: #66334D;
}

#columnTwo h2 {
	font-family: "Eras Bold ITC", Verdana, sans-serif;
	font-size: 1.5em;
	color: #66334D;
}

#columnTwo h3 {
	font-family: "Eras Bold ITC", Verdana, sans-serif;
	font-size: 1.3em;
	color: #66334D;
}

#columnTwo h4 {
	font-family: "Eras Bold ITC", Verdana, sans-serif;
	font-size: 1.1em;
	color: #66334D;
}

#columnTwo h5 {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1em;
	color: #333333;
}


/* column two hyperlinks */

#columnTwo a:link {
	color: #663366;
	text-decoration: none;
	font-weight: bold;
}
#columnTwo a:visited {
	text-decoration: none;
	color: #663366;
		font-weight: bold;
}
#columnTwo a:hover {
	text-decoration: underline;
	color: #994D99;
		font-weight: bold;
}

#columnTwo a:active {
	text-decoration: none;
	color: #663366;
	font-weight: bold;
}


/* column two lists */

#columnTwo ul {
	border-top: 1px solid #66334D;
	border-bottom: 1px solid #66334D;
	padding: 20px 10px 20px 30px;
	list-style: circle;
	margin-bottom: 10px;
	}


#columnTwo li {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1em;
	color: #212121;
	line-height: 20px;
}

#columnTwo .slider-wrap ul {
	border-top: none;
	border-bottom: none;
	list-style: none;
	padding: 0px;
	height: 260px;
	margin: 0px 0px 20px 0px;
}
	

#columnTwo ol {
	border-top: 1px solid #66334D;
	border-bottom: 1px solid #66334D;
	padding: 20px 10px 20px 30px;
	margin-bottom: 10px;
	}


/* column three */

#columnThree .sidebar-contact, 
#columnThree .sidebar-blog,
#columnThree .sidebar-about,
#columnThree .sidebar-social,
#columnThree .sidebar-testimonials,
#columnThree .sidebar-work {
	padding: 0px 0px 40px 0px;
}

#columnThree p {
	padding: 0px;
}

#columnThree h2 {
	font-family: "Eras Bold ITC", Verdana, sans-serif;
	font-size: 1em;
	color: #66334D;
}

#columnThree h2 a {
	color: #66334D;
	text-decoration: none;
}

#columnThree h2 a:hover {
	color: #994D99;
}

#columnThree h2 a:active {
	color: #994D99;
}


/* button - small */

#columnOne .smallbutton,
#columnThree .smallbutton {
   border-top: 1px solid #994d99;
   background: #663366;
   background: -webkit-gradient(linear, left top, left bottom, from(#663366), to(#653366));
   background: -webkit-linear-gradient(top, #663366, #653366);
   background: -moz-linear-gradient(top, #663366, #653366);
   background: -ms-linear-gradient(top, #663366, #653366);
   background: -o-linear-gradient(top, #663366, #653366);
   padding: 3px 5px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   color: #ffffff;
   font-size: 0.8em;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   text-decoration: none;
   vertical-align: middle;
   }
   
#columnOne .smallbutton:link,
#columnOne .smallbutton:visited,
#columnThree .smallbutton:link,
#columnThree .smallbutton:visited {
	color: #FFFFFF;
	text-decoration:none;
	font-weight: bold;
}


#columnOne .smallbutton:hover,
#columnThree .smallbutton:hover {
   border-top-color: #ded8e2;
   background: #ded8e2;
  	text-decoration:none; 
   color: #994d99;
   }
   
#columnOne .smallbutton:active,
#columnThree .smallbutton:active {
   border-top-color: #663366;
   	text-decoration:none;
   background: #663366;
   }


/* button - large  */


#columnTwo .button {
   border-top: 1px solid #994d99;
   background: #663366;
   background: -webkit-gradient(linear, left top, left bottom, from(#663366), to(#653366));
   background: -webkit-linear-gradient(top, #663366, #653366);
   background: -moz-linear-gradient(top, #663366, #653366);
   background: -ms-linear-gradient(top, #663366, #653366);
   background: -o-linear-gradient(top, #663366, #653366);
   padding: 5px 10px;
   margin: 0px 0px 0px 20px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   }
  
	
#columnTwo .button:link {
	color: #FFFFFF;
	   text-decoration: none;
	font-weight: bold;
}

#columnTwo .button:visited {
	color: #FFFFFF;
	   text-decoration: none;
		font-weight: bold;
}

#columnTwo .button:hover {
   border-top-color: #ded8e2;
      text-decoration: none;
   background: #ded8e2;
   color: #994d99;
   }
   
#columnTwo .button:active {
   border-top-color: #663366;
      text-decoration: none;
   background: #663366;
   }


/* footer */

#footer {
	margin-top: 30px;
	background-color: #333333;
	padding-top: 20px;
}

#footercontainer {
	width: 860px;
	margin: 0 auto;
	min-height: 200px;
	border-bottom: solid 1px #E0D5EA;
}

#footer p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#ffffff;
	font-size: 0.9em;
	line-height: 18px;
	margin: 2px;
}



#footer h2 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 1.3em;
	color: #E0D5EA;
	border-bottom: solid 1px #E0D5EA;
}

#footer a:link {
	color: #ffffff;
	text-decoration: none;
}


#footer a:hover {
	text-decoration: underline;
	color: #994D99;
}

#footer a:active {
	text-decoration: none;
	color: #ffffff;
}


#footerColOne,
#footerColTwo,
#footerColThree {
	float: left;
}

#footerColOne {
	width: 190px;
	padding: 0px 20px 50px 40px;

}

#footerColTwo {
	width: 180px;
	padding: 0px 25px 50px 35px;
}

#footerColThree {
	width: 300px;
	padding: 0px 40px 50px 30px;
}

#footerNavOne,
#footerNavTwo {
	float: left;
	width: 80px;
}


/* copyright */

#copyright {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.6em;
	color: #ffffff;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}


.clear {
	clear: both; 
	visibility: hidden;
	}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


		<!-- css includes -->

<link href="/test/css/style.css" rel="stylesheet" type="text/css" />

		<!-- /css includes -->


		<!-- favicon & icon includes -->


<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link rel="icon" type="image/x-icon" />

<link href="/test/assets/images/apple-touch-icon.jpg" rel="apple-touch-icon" />
<link href="/test/assets/images/apple-touch-icon-76x76.jpg" rel="apple-touch-icon" sizes="76x76" />
<link href="/test/assets/images/apple-touch-icon-120x120.jpg" rel="apple-touch-icon" sizes="120x120" />
<link href="/test/assets/images/apple-touch-icon-152x152.jpg" rel="apple-touch-icon" sizes="152x152" />


		<!-- /favicon & icon includes -->

	<!-- javascript -->
    
    <script src="/test/javascript/jquery-1-1.3.2.min.js" type="text/javascript"></script>
	<script src="/test/javascript/jquery.innerfade.js" type="text/javascript" ></script>
		<script type="text/javascript">
	   $(document).ready(
				function(){
						$('.clients').innerfade({
						speed: 1000,
						timeout: 3000,
						type: 'random',
						containerheight: '90px'
					});
					
					$('.slider').innerfade({
						speed: 1000,
						timeout: 5000,
						type: 'sequence',
						containerheight: '260px'
					});
					
						$('.testimonials').innerfade({
						speed: 1000,
						timeout: 10000,
						type: 'random',
						containerheight: '250'
					});
			});
  	</script>
    
    	<!--  /javascript -->
</head>

<body>
	

    	<!--  footer  -->
<div class="clear"></div>
	<div id="footer">
		<div id="footercontainer">

	<!--  column one  -->  
           
         <div id="footerColOne">
 
<h2>Contact Me</h2>
<p><a href="http://www.facebook.com/tamararenwick" target="_blank"><img src="assets/images/facebook.png" width="32" height="32" alt="Tamara Renwick - Vancouver BC Marketing Consultant - on Facebook" /></a>   <a href="http://www.twitter.com/tamararenwick" target="_blank" ><img src="assets/images/twitter.png" width="32" height="32" alt="Tamara Renwick - Vancouver BC Marketing Consultant - on Twitter" /></a> <a href="http://ca.linkedin.com/in/tamararenwick/" target="_blank" ><img src="assets/images/linkedin.png" width="32" height="32" alt="Tamara Renwick - Vancouver BC Marketing Consultant - on LinkedIn" /></a> <a href="http://www.instagram.com/tamararenwick" target="_blank" ><img src="assets/images/instagram.png" width="32" height="32" alt="Tamara Renwick - Vancouver BC Marketing Consultant - on Instagram" /></a> <a rel="publisher" href="https://www.google.com/+TamaraRenwick" target="_blank"><img src="assets/images/google-plus.png" width="32" height="32" alt="Tamara Renwick - Vancouver BC Marketing Consultant - on Google+" /></a></p>
<p><a href="mailto:info@tamararenwick.com">info@tamararenwick.com</a><br />
<a href="tel:+17789981334">778.998.1334</a></p>
</div>
	<!--  /column one  --> 
    
    	<!--  column two  -->   
<div id="footerColTwo">
<h2>Navigate My Site</h2>

<div id="footerNavOne">
<p><a href="blog.php">Blog</a></p>
<p><a href="blog.php">Blog</a></p>
<p><a href="blog.php">Blog</a></p>
<p><a href="blog.php">Blog</a></p></div>

<div id="footerNavTwo">
<p><a href="blog.php">Blog</a></p>
<p><a href="blog.php">Blog</a></p>
<p><a href="blog.php">Blog</a></p>
<p><a href="blog.php">Blog</a></p></div>

</div>
	<!--  /column two  -->  

	<!--  column three  --> 
<div id="footerColThree">
<h2>Read My Blog</h2>
<p>
<a href="/more-building-a-website-from-scratch">More on Building a Website from Scratch</a></p>
<p><a href="/building-a-website-from-scratch">Building a Website from Scratch</a></p>
<p><a href="/useful-marketing-websites">Useful Marketing Websites</a></p>
<p><a href="/enactus-bcit-marketing-workshop">Enactus BCIT: Marketing Workshop</a>
</p>
</div>

	<!--  /column three  -->
    
         
</div>
   <div class="clear"></div>
    <div id="copyright">&copy; Tamara Renwick 2015. All Rights Reserved.<br />
    <a href="privacy-policy.php">Privacy Policy</a> | <a href="sitemap.php">Site Map</a></div>

</div>    	<!--  /footer  -->
</body>


</html>

最佳答案

添加此 CSS:

body { padding:0 !important; margin:0 !important; }

问题是您的 body 元素有 8px 的边距。

如果您想知道边距从何而来，这个边距是由浏览器的默认样式表设置的。

关于css - 我的 "full width"页脚有框架吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28004495/

上一篇：javascript - HTML选择永久显示值？

下一篇：HTML: <code> heightens block box - 有什么补救措施可以让它恢复垂直节奏吗？

相关文章：

html - 滚动选项和绝对底部位置

jQuery Mobile 固定页脚与文本一起滚动一次然后在 iOS 应用程序中停止

jquery - Phonegap JQM 固定位置页眉/页脚在关闭 iOS 键盘后移动

android - 添加页脚的最佳方法是什么，无论屏幕分辨率如何，页脚都位于底部？

html - CSS 子选择器模式

html - 在 rails 上安装 bootstrap 3 后的文本域高度问题

css - 页脚与页面底部的内容重叠

css - Travelify CSS - 在导航栏和边框/图像问题的正下方添加图像？

javascript - 更改输入字段焦点上的输入提交样式

Angularjs - 最后一次 ng-repeat li 之后的意外空间

©2024 IT工具网  联系我们