html - How to place my footer? -
i'm having problem, i'm beginner , improve css , html skills, if have tips please post here, problem footer, not on right place, (on bottom, center of page) help me please?
my html:
<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title></title> </head> <body> <div id="header"> <p id="nome">joão pedro</p> <a href="mailto:jp_5_5@hotmail.fr"><p id="email">jp_5_5@hotmail.fr</p></a> <p id="imagem"><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xfp1/t1.0-9/10250173_10203771744604525_8177123278861015451_n.jpg" style="width: 50px; height: 50px" /></p> </div> <div class="left"> <p>nome</p> <hr> <p>email</p> <hr> <p>contacto</p> <hr> <p>sobre</p> <hr> <p>mais</p> <hr> <p>jogos</p> <hr> <p>videos</p> </div> <div class="right"> <p id=boss><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/s720x720/564356_10200810585497398_1364591551_n.jpg" style="height: 300px"/></p> <div id="texto"><h3>o que é o jejum de jesus? -vocês perguntam.</h3> <p>o jejum de jesus é onde nós nos santificamos deus para receber o espirito santo.</p> <p>durante 40 dias iremos nos desapegar das coisas mundanas tais como:</p> <ul> <li>internet</li> <li>musica</li> <li>jogos</li> </ul> </div> <div id="footer"></div> </body> </html> my css:
body { background-color: #e7e7e7; } div { border-radius: 5px; } #header { margin: auto; position: relative; height: 60px; width: 98%; background-color: #230f65; margin-bottom: 17px; } .left { float: left; margin-left: 14px; position: relative; background-color: #bdabf8; width: 10%; height: 400px; margin-bottom: 17px; } .right { float: right; margin-right: 14px; position: relative; background-color: #dfd7f7; width: 86%; height: 400px; margin-bottom: 17px; border: 1px solid black; } .left { text-align: center; padding-top: 19px; margin-bottom: 17px; } #footer { position: fixed; bottom: 0; background-color: #230f65; width: 85%; } #nome { color: #ffffff; float: left; padding-left: 30px; padding-top: 5px; font-family: sans-serif, verdana; } #email { float: right; padding-top: 3px; padding-right: 10px; font-family: sans-serif, verdana; color: #ffffff; } a:hover { font-weight: bold; } p > img { border-radius: 100%; } #imagem { padding-top: 5px; padding-left: 140px; } #boss { padding-top: 33px; float: left; padding-left: 15px; } #texto { padding-left: 255px; }
you need set height footer, (yet) has not content , no height.
#footer { position: fixed; bottom: 0; background-color: #230f65; width: 85%; height: 100px; } if want footer stick bottom, take @ http://cssstickyfooter.com
also, center footer, in case utilize left: 7.5%;, have remaining space on sides of footer. (100% - 85% equals 15%, half of on left, half on right)
html css
No comments:
Post a Comment