well, new , learning go here, code has been added throughout process , may bloated , redundantly redundant.
i trying style site remains centered in page. had done , looking how wanted realized in fluid layout. want information remain fixed , have background color extend fluidly right , left needed larger screens.
i have managed adjust header fixed layout center white border not extend out either side fill rest of header space. able in fluid layout cannot figure out how accomplish now.
i in process of trying convert body , footer on well. footer coded following sticky footer code found while researching, mentioned above fluid , adjusting browser size resulted text moving when decreasing size horizontally , footer sliding in behind body when changing vertical size of browser. want create fixed, centered footer remains @ bottom of page black background extending out right , left fluidly fill in space.
thank can provide.
html:
<div id="page"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> <div class="footer-info"> <ul> <li><p><strong>address </strong> <br> street<br> city, state, zip<br> phone</p></li> <li><p><strong>address </strong> <br> street<br> city, state, zip<br> phone</p></li> <li><p><strong>address </strong> <br> street<br> city, state, zip<br> phone</p></li> <li><p>© 2013</p></li> </ul> </div> </div> </div> </html> css:
@charset "utf-8"; #header { font: 100%/1.4 open sans, verdana, arial, helvetica, sans-serif; background-color: white; margin: 0 auto; padding-top:10px; padding-bottom:10px; color: #7c0408; width:1000px; text-align:center; } body { font: 100%/1.4 open sans, verdana, arial, helvetica, sans-serif; background-color: #eae5e5; margin: 0; padding: 0; height: 100%; color: #000; } /* begin footer */ .footer-info li { color: white; background-color: black; list-style-type:none; margin: 0; padding-left:10px; display:inline-block; } .footer-info li:nth-child(4) { font-size: 0.8em; vertical-align:250%; } #footer { position: absolute; width: 100%; bottom: 0; height: 75px; /* value height of footer */ font: 75%/1.4 open sans, verdana, arial, helvetica, sans-serif; background-color: black; padding: 10px 0px 12px 0px; text-align:center; color: white; } /* end footer */ html { padding: 0; margin: 0; height: 100%; } #page { min-height: 100%; /* other browsers */ height: 100%; /* ie */ position:relative; } #main { padding-bottom: 75px; /* value height of footer */ } /* ~~ element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
i used html code supplied answer, recommend trying indent better , try find way around having use <br> tags. rewrote css, because easier start scratch.
i created jsfiddle , annotated can understand happening css. want, header , footer still fluid (width wise), text/logo inside of them fixed using css make sure placed in center. there's multiple ways header, without using <div>, there wasn't information on go there. you'll need create new division hold footer scales correctly page's height.
i recommend taking @ http://www.cssstickyfooter.com/ great job of explaining how sticky footer want , valuable resource continue learn.
Comments
Post a Comment