0
我希望我的頁腳佔據頁面的整個寬度，但由於某種原因，當我在Safari中預覽時（它在Dreamweaver中看起來不錯），它不起作用。哪裏不對？我希望它被放置在頁面的底部並佔據整個寬度。頁腳未正確放置（未佔用全部寬度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Liveweave
</title>
<!-- Place cursor after this and select a
JavaScript library from the menu above -->
<!-- Supports context-sensitive CSS3 auto-completion -->
<!-- Style starts here. Try adding new CSS tags. -->
<style type="text/css">
@charset"UTF-8";
/* CSS Document */
Html, body {
padding: 0;
margin: 0;
height: 100%;
font-family: Tahoma, Geneva, sans-serif;
background: rgb(255,255,255);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjdmN2Y3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(53%, rgba(246,246,246,1)), color-stop(100%, rgba(247,247,247,1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 53%, rgba(247,247,247,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1);
/* IE6-8 fallback on horizontal gradient */
}
#header {
width: 100%;
height: 60px;
border-top: solid 4px #00539E;
}
#logo {
position: absolute;
left: 20px;
top: 35px;
color: #000;
font-size: 20px;
}
#header-text {
width: 400px;
position: absolute;
top: 70px;
left: 20px;
font-size: 12px;
font-weight: 300;
color: #333;
}
/* mainmenu */
#mainmenu {
width: 100%;
margin-right: 20px;
/* min-height: 180px;
*/
padding-bottom: 20px;
margin-top: -52px;
/* padding-top: -42px;
*/
overflow: hidden;
}
#mainmenu ul {
list-style: none;
margin: 0;
float: right;
color: #FFF;
}
#mainmenu ul li {
display: inline-block;
float: left;
width: 140px;
line-height: 18px;
}
#mainmenu>ul>li {
margin-left: 20px;
}
#mainmenu ul li a {
font-size: 12px;
display: block;
text-decoration: none;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
color: #333;
padding-left: 4px;
letter-spacing: 1px;
-moz-transition-property: all, -moz-transform;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-property: all, -ms-transform;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-property: all, -o-transform;
-o-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-property: all, transform;
transition-duration: .4s, .4s, .4s, .4s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
color: #005EBC;
-moz-transition-property: all, -moz-transform;
-moz-transition-duration: .4s, .4s, .4s, .4s;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-ms-transition-property: all, -ms-transform;
-ms-transition-duration: .4s, .4s, .4s, .4s;
-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-o-transition-property: all, -o-transform;
-o-transition-duration: .4s, .4s, .4s, .4s;
-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: .4s, .4s, .4s, .4s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-property: all, transform;
transition-duration: .4s, .4s, .4s, .4s;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
p {
font-size: 13px;
color: #333;
font-weight: 300;
}
h1 {
font-size: 30px;
letter-spacing: 1px;
color: #0064C5;
/* display: inline-block;
*/
margin-bottom: 0;
}
h2 {
font-size: 22px;
letter-spacing: 1px;
color: #BBB;
/* display: inline-block;
*/
margin-bottom: 0;
}
H5 {
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
padding-left: 4px;
font-size: 11px;
border-bottom: 1px dotted #666;
background: rgb(29,115,196);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkNzNjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDY0YzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(29,115,196,1)), color-stop(100%, rgba(0,100,197,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(29,115,196,1) 0%, rgba(0,100,197,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d73c4', endColorstr='#0064c5', GradientType=0);
/* IE6-8 */
}
div#content-left {
float: left;
width: 40%;
}
div#content-headline {
float: right;
width: 55%;
padding-right: 50px;
overflow: auto;
}
div#content-right {
float: right;
width: 55%;
max-height: 60%;
padding-right: 50px;
}
div#content-center {
overflow: hidden;
}
/* footer */
#main_footer {
clear:both;
position: fixed;
background: #cfc8c0;
height: 46px;
overflow: hidden;
display: block;
bottom:0;
}
#main_footer #lien_hot_news {
background: #e14242 url(pics/hot_news.gif) 50% 0 no-repeat;
color: #fff;
font: italic normal 24px Georgia, serif;
height: 38px;
width: 145px;
padding-top: 8px;
display: block;
text-align: center;
float: left;
}
#main_footer #lien_hot_news:hover {
background-color: #e92c26;
}
#main_footer #dernier_tweet {
float: left;
margin-left: 11px;
margin-top: 11px;
background: #fff url(ics/dernier_tweet_gauche.gif) 0 0 no-repeat;
position: relative;
}
#main_footer #dernier_tweet .lien_twitter {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 24px;
display: block;
}
#main_footer #dernier_tweet .inner {
max-width: 550px;
background: url(../images/picto/dernier_tweet_droite.gif) right 0 no-repeat;
padding: 4px 15px 5px 53px;
height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#main_footer #dernier_tweet a {
color: #75716c;
}
#main_footer #dernier_tweet a:hover {
color: #444;
}
#main_footer #dernier_tweet .last_tweet {
overflow: hidden;
}
#main_footer .autres_liens {
position: absolute;
right: 12px;
top: 9px;
font: italic normal 15px Georgia, serif;
color: #95897c;
}
#main_footer .autres_liens .label {
float: left;
padding-right: 3px;
padding-top: 5px;
}
#main_footer .autres_liens a {
float: left;
display: block;
margin-left: 5px;
}
#main_footer .autres_liens a img {
width: 28px;
height: 28px;
display: block;
}
}
</style>
<!-- Style ends here -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#MetTileFive").MetTileFive({
timeInterval: 6000
}
);
}
);
</script>
<div id="header">
</div>
<div id="logo">
My Name
</div>
<div id="mainmenu">
<ul>
<li>
<h5>
Menu I
</h5>
<ul>
<li>
<a title="" href="">
Biography
</a>
</li>
<li>
<a title="" href="">
Publications
</a>
</li>
</ul>
<li>
<h5>
Menu 2
</h5>
<ul>
<li>
<a title="" href="">
Demo
</a>
</li>
<li>
<a title="" href="">
Features
</a>
</li>
<li>
<a title="" href="">
Comparison
</a>
</li>
</ul>
</li>
<li>
<h5>
Menu 3
</h5>
<ul>
<li>
<a title="" href="">
Item 1
</a>
</li>
<li>
<a title="" href="">
Item 2
</a>
</li>
<li>
<a title="" href="">
Item 3
</a>
</li>
</ul>
</li>
<li>
<h5>
Menu 4
</h5>
<ul>
<li>
<a title="" href="">
ddfd
</a>
</li>
<li>
<a title="" href="">
dsfd
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- END DIV Main Menu -->
<div id="header-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</div>
<div id="content-left">
<a id="MetTileFive" class="tile-five" href="http://www.facebook.com/jEffectBox" target="_blank">
<div>
<label>
Lorem Ipsum
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit... nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div>
<label>
Ipsum
</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit... laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div>
<label>
Lorem
</label>
<p>
Lorem ipsum dolor sit amet, consectetur a... laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</a>
</div>
<div id="content-headline">
<h1>
Novitates autem si spem
</h1>
</div>
<div id="content-right">
<p>
Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus
fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo
loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin
in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est,
quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero
in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo
valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in
quibus diutius commorati sumus.
</p>
<h2>
This is a sub-title
</h2>
<p>
Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans
terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem
sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem
Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim
itidemque Ascalonem Gazam aevo superiore exstructas.
</p>
<p>
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
calamitatum societates! Ad quas non est facile inventu qui descendant.
Quamquam Ennius recte. END END END
</p>
</div>
<footer id="main_footer">
<a href="#_" id="lien_hot_news">
Hot News
</a>
<div id="dernier_tweet">
<a href="https://twitter.com/" class="lien_twitter" target="_blank">
</a>
<div class="inner">
<!-- Ajax load to prevent cache behavior -->
</div>
</div>
<div class="autres_liens">
<div class="label">
Check us also on :
</div>
<a href="http://" target="_blank">
<img src="pics/footer_facebook_2.png" alt="facebook" />
</a>
<a href="http:/" target="_blank">
<img src="pics/footer_youtube_2.png" alt="twitter" />
</a>
<a href="http://" target="_blank">
<img src="pics/footer_slideshare_2.png" alt="slideshare" />
</a>
</div>
</footer>
</body>
</html>
</html>