html - Getting Div tag to extend to the bottom of the Page w/out covering elements already on the page -
i have tried absolute footer remain on bottom of page covers elements @ bottom instead of going underneath them. fixed similar thing except if page longer cover elements in center of page. literally want backgound color of div extend bottom of page , have logo , text remain in between div @ set height. here's i've got.
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="main.css"/> <title> </title> <div class="heading"> <img src="images/redbird.gif" alt="redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px"> <form> search: <input type="search" name="search" style="float:right;"> </form> <br></br> <button type="button" id="login">login</button> <button type="button" id="login">create new account</button> <h1>technology blog</h1> <a href="index.html"> <img src="images/house.png" alt="home" style="width:35px; height:35px;"> </a> </div> <div class="table"> <table style+"width:100%"> <tr> <td><a href="phones.html">phones & tablets</a></td> <td>computers & laptops</td> <td>internships</td> <td>troubleshooting</td> <td>product ratings & reviews</td> </tr> </table> </div> </head> <body> <div class="welcome"> <h2>welcome</h2> <p>welcome illinois state university's technology blog. here can view , post questions, answers, reviews, , other info related technology. website illinois state university students only! must sign in or create business relationship view or post on website.</p> </div> <div class="slideshow"> <img src="images/dellcomps.jpg" alt="computers" style="width: 397px; height: 298px"> </div> </body> <div class="footer"> <img src="images/seal.png" alt="isu seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px"> copyright 2014 @ tec 319 grouping <br/> illinois sate university </div> </html> heres css. need edit .footer tag believe
html{ height: 100%; position: relative; } h1{ text-align: center; font-family: impact; font-style: italic; } .heading{ background-color: #ca0000; height:150px; } td{ border:5px solid black; text-align:center; background-color:#790000; color:white; padding:10px; font-family: helvetica; font-style: italic; font-size: 15px; } table{ width:100% } .table{ background-color:black; height:53px; } form{ float:right; } button{ float:right; } .slideshow img{ display: block; position: center; margin-left: auto; margin-right: auto; } .footer img{ display: block; position: center; margin-left: auto; margin-right: auto; } .footer{ margin-top: 40px; text-align: center; background-color: #d8d8d8; padding-bottom: 20px; width: 100%; } .preview td{ display: block; text-align: left; color: black; background-color: white; } .blog td{ display: block; text-align: left; color: black; background-color: white; border: 0px; } .newpost h2{ display: block; position: center; margin-left:auto; margin-right: auto; vertical-align: middle; color: white; background-color: #790000; border: 5px solid black; border-collapse: collapse; width: 250px; text-align: center; } h3 { color: white; background-color: #790000; border: 5px solid black; } h4{ text-align: left; font-size: 14pt; color:#790000 } .back h2{ display: block; position: left; border:5px solid black; background-color:#790000; color:white; padding:10px; font-family: helvetica; font-style: italic; font-size: 15px; width: 100px; } form.comment{ float:left; size } a.blogtitle:link { color: #790000; text-decoration: none; } a.blogtitle:visited{ color: #790000; text-decoration: none; } a.blogtitle:active{ color: #790000; text-decoration: none; } a.blogtitle:hover{ color: #ca0000; text-decoration: none; } a:link { color: white; text-decoration: none; } a:visited{ color: white; text-decoration: none; } a:active{ color: white; text-decoration: none; } a:hover{ color: #ca0000; text-decoration: none; }
you need set footer position relative have respect other elements on page. both absolute , fixed remove element page flow, causes overlapping.
change position:relative fixed in demo css , uncomment bottom see difference. can play height on body tag see how behavior changes.
<div id="content"> <p>content</p> </div> <div id="footer"> <p>footer stuff</p> </div> body { margin:0; padding:0; } #content { height:1200px; width:100px; background-color:#eee; position:relative; margin:0; padding:0; border:1px solid black; } #footer { width:100px; position:relative; /* bottom:0; */ background-color:#eee; margin:0; padding:0; border:1px solid black; } html css
No comments:
Post a Comment