HTML/CSS - 页脚不会推到底部且图像无法正确对齐

标签 html css

我的网站网址:http://cudahost.com/new

你好，

我的页脚漂浮在页面中间，它没有推到所有内容下方应该位于的底部，有人可以帮我解决这个问题吗？我花了几个小时谷歌搜索但一无所获，我也尝试了几次代码更改。

另一个问题是主页框，功能框，正如您所看到的功能框的顶行有一个云的图片，看起来很乱，我正在尝试将该图片对齐到右上角，最好是在与标题(控制面板、强大的硬件、服务器 Mod 支持)在同一行，因此它们每个都有一个图标，但不会过多地打扰描述。所以基本上，标题在这里，图片在这里 标题在左，图片在右，显然两者在同一行，但图片向下一点也无所谓，但不会影响描述太多。

我的 CSS 是:

body {
    font-size: 12px;
    line-height: 22px;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #555;
    background-image:url('images/bg.png');
}


#navtopstick {
    background: inherit;
    height: auto;
    margin-top: -10px;
    position: fixed;
    z-index: 10;
}

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:980px; }

/* CONTENT */
#content { }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* STYLE NAVIGATION MENU */
#appleNav { list-style:none;

    /* Lucinda Grande is the font used */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;

    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;

    width:980px; height:34px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

#FooterWrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
    bottom:0;
} 

#footerwrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-top:20px;
}

#footer {
    background: url(images/darker.png);
    width: 100%;
    float:left;
    bottom:0;
} 

    .footer-links h3{ font-size: 20px; color: #36429B; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footer-links a{ color: #484646; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footer-links ul { list-style: none outside none; padding: 9px 0 0 0;  float:left; display:inline;}
    .footer-links:link { color: #484646; text-decoration: none}
    .footer-links a:visited { color: #484646; text-decoration: none}
    .footer-links a:hover { color: #7dc33a; text-decoration: underline}
    .footer-links ul li { float: left; display: inline; height: 20px; border-right: 1px solid #1a1a1a; padding-right: 10px; margin-right: 10px; }
    .footer-links ul li.last { border: 0; } 
    .footer-links ul li a { float: left; display: inline;  height: 20px; line-height: 20px; }

    .left, .alignleft { float: left; display: inline; }
    .right, .alignright { float: right; display: inline; }
    .topright, .aligntopright { float: right; float: top; display: inline; }

    .footerFloat h3{ font-size: 20px; color: #36429B; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a{ color: #7dc33a; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a:link { color: #7dc33a; text-decoration: none}
    .footerFloat a:visited { color: #7dc33a; text-decoration: none}
    .footerFloat a:hover { color: #7dc33a; text-decoration: underline}
    .footerFloatLast h3{ font-size: 20px; color: #36429B; margin-bottom: 10px; text-transform: none; font-weight: bold; }

.footerFloatLogo {
    width: 40%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloat {
    width: 25%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloatLast {
    width: 30%;
    float: left;
    min-width:200px;
    bottom:0;
}

#wrapper {
    width: 100%;
    overflow:hidden;
} 

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}

/* Set the states when hovering */
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}

/* When the user clicks the button, */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

/* Styling of the search field */
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    /* CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */    
    background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;

    background-color:#6E6E6E; /* Fallback */

    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left. */
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;

    border-left:none;
}

#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}

#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;

    border-right:none;
    width:124px;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

#appleNav {
     -webkit-animation: showMenu 1s;
}

/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box .box-b { background-image: url(images/nnnnnn.png);}
.home-box .box-t { background-image: url(images/nnnnnn.png); padding: 10px 20px; }
.home-box h4 { font-size: 16px; color: #36429B; font-weight: bold; text-transform: none; }
.home-box a { color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block; }
.home-box img.right { margin-top: 50px; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.home-box {
  float: left;
  display: inline;
  width: 314px;
  background-image: url(images/darker.png);
  border:1px solid;
  border-radius:5px;
border-color: transparent;
  margin-right: 19px;
  margin-bottom: 19px;
  background-repeat: repeat;
}

我的索引文件是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head><title>Cheap Minecraft Server Hosting - US/AU/UK | CudaHost</title>

<!--Meta Data -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta property="og:site_name" content="CudaHost | Cheap Minecraft Server Hosting - US/AU/UK"/>
<meta property="og:title" content="CudaHost | Cheap Minecraft Server Hosting - US/AU/UK"/>
<meta property="og:description" content="Minecraft Server Hosting, Rapidly Responsive, affordable and reliable. No lag, Great Support! Supporting Bukkit,Spigot,Tekkit,FTB and more! Locatated; US/AU/UK"/>
<!-- <meta property="og:image" content="http://cudahost.com/fbthumbnail.png"> -->
<meta property="og:url" content="http://CudaHost.com">
<meta property="og:type" content="minecraft"/>
<meta name="description" content="Minecraft Server Hosting, Rapidly Responsive, affordable and reliable. No lag, Great Support! Supporting Bukkit,Spigot,Tekkit,FTB and more! Locatated; US/AU/UK">
<!-- End, Meta Data --> 
<link rel="shortcut icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<?php flush(); ?> 
<body>
<!-- start header -->
<div id="wrapper">
    <div id="content">
<?php

include("header.html");

?>
            </div></div>
<!-- end header -->
<!-- Attempt Slider -->






<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Control Panel</h4>
<img src="http://cudahost.com/new/icon.png" alt="" class="right" />
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<div class="box home-box">
<div class="box-b"> <div class="box-t">
<h4>Powerful Hardware</h4> <img src="http://cudahost.com/new/icon.png" alt="" class="right" />
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Server Mod Support</h4> <img src="http://cudahost.com/new/icon.png" alt="" class="right" />
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl">&nbsp;</div> </div> </div> </div> <br />
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Specialized Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Migration Assistance</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Hardware Specs</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- end home boxes -->

<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t"> 
<h4>Control Panel</h4>
<!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<div class="box home-box">
<div class="box-b"> <div class="box-t">
<h4>Powerful Hardware</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Server Mod Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl">&nbsp;</div> </div> </div> </div> <br />
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Specialized Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Migration Assistance</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Hardware Specs</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- end home boxes -->

<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t"> 
<h4>Control Panel</h4>
<!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<div class="box home-box">
<div class="box-b"> <div class="box-t">
<h4>Powerful Hardware</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Server Mod Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl">&nbsp;</div> </div> </div> </div> <br />
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Specialized Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Migration Assistance</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Hardware Specs</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- end home boxes -->

<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t"> 
<h4>Control Panel</h4>
<!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<div class="box home-box">
<div class="box-b"> <div class="box-t">
<h4>Powerful Hardware</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Server Mod Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl">&nbsp;</div> </div> </div> </div> <br />
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Specialized Support</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box"> <div class="box-b"> <div class="box-t">
<h4>Migration Assistance</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl">&nbsp;</div> </div> </div> </div> 
<div class="box home-box last">
<div class="box-b"> <div class="box-t">
<h4>Hardware Specs</h4> <!--<img src="http://cudahost.com/new/icon.png" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl">&nbsp;</div> </div> </div> </div>
<!-- end home boxes -->

</div></div></div></div>
<!-- start footer -->
<br /> <br /> <br />
<div id="footerwrapper">
<div id="footer">
<?php

include("footer.html");

?>
</div>
</div>
<!-- end footer -->
</body></html>

非常感谢任何帮助，谢谢。

最佳答案

页脚包装器{

底部:0； 宽度:100%；

enter image description here

关于HTML/CSS - 页脚不会推到底部且图像无法正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21308108/

上一篇：css - IE8 - 带有不透明度的 div 中的圆 Angular

下一篇：jquery - 我们如何将 X 和 Y 轴移动到气泡图中的中心 (JQPlot)

相关文章：

javascript - 如何使用 javascript 将 servlet 响应传递给 html 文本

javascript - Android、WebView 和 SpeechRecognition-API

html - 同时水平和垂直排列<li>

HTML/CSS 页脚划分为列

css - 隐藏仅适用于移动设备的元素 - 语义 UI

css display : what? - 一个接一个地排列盒子

html - CSS Clear取决于元素的奇数或偶数

jquery - Scrollspy 与 ancor 过渡

css - CSS3 背景的最佳实践和对旧浏览器的支持？

html - wordpress 列中的 css 定位问题

©2024 IT工具网  联系我们