html - Footer not placed correctly (not taking full width) -
i'd footer take whole width of page reason not work when preview in safari (it looks ok within dreamweaver). wrong? i'd placed @ bottom of page , take whole width.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> liveweave </title> <!-- place cursor after , select javascript library 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' '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 @ 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 { font-size: 12px; display: block; text-decoration: none; } #mainmenu ul li a, #mainmenu ul ul:hover li { 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 { 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' '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 { 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 { float: left; display: block; margin-left: 5px; } #main_footer .autres_liens 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"> name </div> <div id="mainmenu"> <ul> <li> <h5> menu </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 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> 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 prevent cache behavior --> </div> </div> <div class="autres_liens"> <div class="label"> check 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>
your footer doesn't have width defined.
give width 100% footer i.e. update #main_footer css below
#main_footer { clear: both; position: fixed; background: #cfc8c0; height: 46px; overflow: hidden; display: block; bottom: 0; width: 100%; /* add rule */ } see working example
Comments
Post a Comment