Making an image stick to the bottom of the webpage
hey guys, I have a web page in which I have an ad at the bottom of the page, now I want it that whenever a user scrolls down the page the ad should remain in the bottom only and also visible, something like sticky a开发者_开发百科d.... how could I achieve this?
Thanks in advance.
CSS Fixed positioning.
You can read about CSS positioning in general on the w3c. See http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning for fixed positioning in particular.
An example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>making an image stick to the footer of the webpage.</title>
<style type="text/css">
#myAdd {
position:fixed;
bottom:0px;
background:url(http://richard.jp.leguen.ca/images/ad.gif) CENTER NO-REPEAT;
height:80px;
width:100%;
text-align:-10000px;
}
</style>
</head>
<body>
<div id="myAdd">This is my add</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus gravida lorem, id molestie lectus tempus rhoncus. Curabitur vel augue ut metus scelerisque hendrerit at at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi hendrerit mattis tristique. Suspendisse fermentum justo in sem euismod pretium aliquet at erat. Phasellus lorem tellus, mollis in dictum sed, iaculis eu massa. Vestibulum iaculis aliquam massa, in porttitor lectus placerat vel. Pellentesque pharetra, orci non pretium porttitor, dolor justo placerat nisi, ut posuere sem enim id lorem. Vestibulum congue gravida enim, in faucibus sapien condimentum id. Nulla consequat arcu eu magna porta at consectetur nisl suscipit. Praesent pellentesque venenatis placerat. Suspendisse potenti. Pellentesque elementum auctor nibh sit amet mattis. Pellentesque rutrum porttitor libero, ac interdum tellus ultrices ultricies. Donec vehicula luctus nulla, eget cursus magna condimentum vitae. Aliquam eu enim mauris. Donec feugiat pulvinar nunc a dignissim. Aliquam placerat semper velit, eu venenatis tellus euismod vitae. Sed vitae justo massa, in luctus libero. Maecenas justo libero, fermentum semper ornare vitae, pulvinar eget magna.</p>
<p>Cras augue tellus, dignissim eu dapibus et, porttitor non sapien. Maecenas augue mauris, pulvinar id congue sit amet, pellentesque in dui. Sed ac fringilla nisi. Nam sit amet odio sed sem fringilla cursus. Nullam nibh mauris, ullamcorper ut facilisis ut, pellentesque ut nunc. Nulla ultricies iaculis sapien a eleifend. Curabitur pulvinar, velit et egestas aliquet, felis est luctus libero, in ultricies quam massa a tortor. Quisque vehicula imperdiet risus vitae accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel adipiscing nunc. Quisque consectetur mattis volutpat. Morbi viverra rutrum ante quis vehicula. Vivamus placerat bibendum mi eu auctor. Phasellus porta pharetra sagittis. Pellentesque id dui nec velit aliquam dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque pellentesque velit a mi mattis a consequat orci gravida. Morbi vel placerat sapien. Vivamus turpis ante, rutrum a ullamcorper sit amet, interdum ut tellus.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum augue arcu, aliquam vel elementum vel, iaculis ut lorem. Curabitur id nisi ac ipsum auctor sodales ut nec arcu. Vestibulum vitae risus in mi elementum mattis. Nulla imperdiet mattis enim, a ultricies magna fringilla eget. Maecenas vitae lacus sit amet eros cursus molestie at et dui. Morbi aliquam sagittis tellus ac placerat. Pellentesque vitae ante vitae sem imperdiet convallis. Donec sit amet tortor a ligula mollis dictum sit amet at purus. Sed ac sodales leo.</p>
<p>Sed vel est nec elit volutpat auctor. Mauris consequat, nulla eget accumsan euismod, neque dui ultricies justo, non vulputate elit felis non lorem. Donec venenatis pretium mauris quis interdum. Quisque vel augue at odio varius dignissim. Etiam tincidunt nunc nec diam faucibus faucibus. Praesent eget ligula vel nunc eleifend pharetra. Fusce pretium nisl libero. Nunc lacinia, ligula sed luctus sollicitudin, nulla nisl adipiscing odio, ac elementum nisl odio eget metus. Sed non eleifend massa. Praesent dictum neque non sapien fermentum pulvinar. Etiam vestibulum cursus elit eu vehicula. Vivamus et nunc lectus. Aliquam ac vestibulum nibh. Quisque a est nibh, id fringilla nisi. Pellentesque tristique euismod lectus. Vivamus dictum nibh eu ligula consequat sit amet viverra nunc posuere. Maecenas vitae erat ipsum. Aliquam a tempor velit. Donec eleifend neque id dui blandit vel eleifend risus lobortis. Aliquam erat volutpat.</p>
<p>In hac habitasse platea dictumst. Aenean facilisis orci sed ligula rhoncus condimentum. Aliquam lacus sapien, congue et commodo fringilla, tempus id neque. Donec vitae purus tortor. Nunc scelerisque rutrum lacinia. Ut est libero, tincidunt vel vulputate id, gravida non velit. Morbi et dolor sit amet turpis hendrerit consequat. Morbi ut felis adipiscing est eleifend lobortis. Cras vitae enim diam, et mattis dui. Proin volutpat risus sed nunc facilisis eleifend. Nunc eu interdum ipsum.</p>
<p>Ut fermentum interdum lectus pellentesque aliquet. In tincidunt turpis sit amet velit egestas condimentum auctor leo elementum. Maecenas fermentum sem at risus laoreet luctus sed id diam. Cras porttitor lacinia leo, porttitor condimentum eros mollis non. Phasellus tempus quam vulputate sapien scelerisque ultricies. Cras nunc sapien, rutrum vitae porttitor at, hendrerit a augue. Fusce eget felis nulla, at condimentum libero. Aliquam porta suscipit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa metus, faucibus sit amet sagittis ut, interdum non mi. Sed lacinia interdum pharetra. Integer pellentesque facilisis euismod. Vestibulum posuere, lorem quis dapibus viverra, sapien ipsum tempus nulla, vel cursus nibh ante nec arcu. Nullam feugiat elementum est eget gravida. Nam venenatis odio nec nulla faucibus vel ultrices metus mattis. Vestibulum ut rhoncus orci. Quisque nisl dolor, lobortis rutrum dapibus ac, pharetra ultricies tortor. In eu ante non est semper mattis. Fusce cursus, nulla eu pellentesque semper, arcu erat rutrum justo, sed condimentum velit ipsum eget elit. Fusce consectetur lacinia nibh lacinia scelerisque.</p>
<p>Vestibulum non nisi orci, a pulvinar enim. Curabitur gravida orci eget mauris laoreet non dignissim velit adipiscing. Vivamus vel ipsum risus. Duis bibendum tempus accumsan. Proin mollis pellentesque ullamcorper. Praesent ac lectus magna. Morbi condimentum vehicula rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras magna erat, euismod ut viverra ac, molestie a nisl. Aenean auctor, urna in venenatis accumsan, risus erat commodo nunc, porttitor sagittis sapien metus non mauris. Maecenas eget commodo dui. Maecenas mi metus, fermentum vitae lacinia sed, tristique vitae nunc. Morbi sed nulla nec orci vestibulum condimentum congue vitae leo. Pellentesque risus felis, euismod at convallis id, auctor nec purus. Pellentesque id ipsum augue, ullamcorper commodo arcu. Sed rutrum placerat dui et sollicitudin. Cras vel odio nunc.</p>
<p>In in nibh erat, vitae semper odio. Suspendisse feugiat turpis in leo consectetur gravida. In hac habitasse platea dictumst. Praesent vehicula ultrices ligula non tempor. Vivamus cursus mauris vel lacus malesuada aliquam. Maecenas egestas volutpat velit vitae fringilla. Vivamus rhoncus gravida faucibus. Nulla viverra iaculis lorem, ac adipiscing enim sodales eget. Duis cursus lacus nec odio molestie vulputate. Maecenas in risus at mi bibendum lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis, quam in volutpat sagittis, ante ipsum auctor metus, bibendum mollis eros nunc ac massa.</p>
<p>Nullam facilisis lacinia magna, et semper ante pellentesque laoreet. Aenean vel turpis augue. Pellentesque eget quam eu sapien gravida fringilla at at dui. Vivamus posuere, massa condimentum laoreet aliquet, nulla metus mollis mi, in blandit libero ante quis nulla. Aenean luctus massa faucibus sem consectetur eu viverra turpis vestibulum. Suspendisse pharetra scelerisque posuere. Nulla adipiscing urna at lacus euismod nec feugiat odio ornare. In hac habitasse platea dictumst. Duis tempor tellus eget turpis tempus consectetur. Donec odio enim, vestibulum sit amet tristique quis, adipiscing eu massa. Nulla interdum scelerisque diam vitae accumsan. Nullam diam sem, tempus sed tempus ut, tincidunt vitae felis. Praesent viverra mattis rutrum.</p>
<p>Praesent consectetur, leo non aliquam molestie, nibh nunc tempus odio, in ullamcorper sapien tortor id dui. Maecenas vitae pretium eros. Praesent orci magna, feugiat a tincidunt eget, rutrum eu risus. Curabitur volutpat nunc eu turpis accumsan aliquet. Donec eu purus a diam cursus pellentesque sit amet suscipit dolor. Fusce sit amet leo non dui sollicitudin consequat nec eget justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent viverra mattis justo, non gravida urna cursus semper. Cras feugiat leo eget tellus porttitor at lobortis tellus sodales. Proin aliquet mi ut orci dictum congue. Maecenas vitae metus sit amet velit fermentum hendrerit eu non metus. Curabitur varius, turpis id tempus mattis, mi elit consectetur nisi, nec pharetra ipsum metus sed lacus. Nullam eget nunc diam. Proin a mi eget augue pretium tempus. Aliquam egestas laoreet elit, et viverra purus posuere quis. Donec laoreet urna augue. Maecenas id magna leo. Mauris vel lacus nibh, nec sodales tortor.</p>
<p>Aenean a sem ut augue faucibus dapibus. Vivamus imperdiet, urna eget egestas malesuada, diam libero pretium ligula, a ultricies purus elit ac ligula. Nunc vulputate, justo vitae suscipit adipiscing, orci ante dictum lectus, ac euismod leo nisl vitae est. Ut mattis, mi a feugiat adipiscing, eros nibh rhoncus lectus, eget aliquam urna neque id tortor. Nunc tristique sapien eu leo cursus ultricies aliquam risus posuere. Cras sodales laoreet augue ut fringilla. Etiam eleifend libero et elit commodo at venenatis nulla viverra. Nunc eu auctor risus. Phasellus vitae urna at sem pellentesque posuere nec at tortor. Cras porta malesuada risus, vitae porttitor velit ultricies eu. Nam dolor tortor, iaculis sed imperdiet nec, mollis ut dui. Aenean in metus neque. Sed tempor nulla et quam blandit facilisis. Proin sem tellus, faucibus id gravida at, dapibus auctor leo. Integer ornare, risus et ultricies pretium, magna nulla hendrerit quam, vitae viverra mauris dui eu magna. Aliquam vel erat quis libero feugiat fringilla porttitor in turpis. Phasellus vulputate accumsan facilisis.</p>
<p>Duis vehicula lobortis porta. Vestibulum auctor augue in odio adipiscing laoreet. Nunc arcu ligula, eleifend at ullamcorper blandit, porttitor quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris condimentum quam at lacus tempus scelerisque. Aliquam molestie consectetur dapibus. Quisque eget nisl ut purus tincidunt imperdiet a varius ante. Cras a urna odio, vitae lacinia nisl. Cras non lectus eu libero interdum accumsan. Fusce non tincidunt magna. Mauris at tortor quis lorem viverra congue.</p>
<p>Proin et sapien justo, auctor aliquam justo. Etiam elementum scelerisque augue. Nam tristique rutrum ante, ac accumsan sem lobortis ut. Integer eros elit, euismod non sollicitudin non, pellentesque vitae purus. Nam diam diam, vestibulum lobortis malesuada ac, pretium sit amet orci. Proin feugiat nunc lacinia metus congue et tincidunt sapien posuere. Sed urna felis, dignissim in volutpat vel, ullamcorper vel nunc. Sed eu odio metus, nec facilisis velit. Mauris pharetra mauris a nibh lacinia ut pulvinar leo sollicitudin. Quisque rutrum orci nunc. Praesent orci tellus, consequat ut semper non, gravida sit amet elit. Aenean ornare dui nec risus auctor non varius risus dignissim.</p>
<p>Nulla erat nunc, facilisis quis laoreet id, aliquet at ipsum. Nam nulla risus, elementum eget tempus vitae, ultrices ac magna. Donec at mauris id libero mollis vehicula egestas interdum nisl. Suspendisse in vehicula nulla. Integer enim magna, adipiscing ac dignissim in, hendrerit et est. Curabitur at risus nisl. Sed ornare nulla fringilla sapien fringilla nec tincidunt sapien rutrum. Donec in ligula vitae arcu imperdiet aliquam eu et urna. Curabitur congue, sapien at posuere consequat, ipsum risus sodales erat, non vestibulum sem libero nec nisi. Sed nec egestas erat. Pellentesque lobortis massa sed sem tincidunt in fringilla mi tincidunt. Curabitur imperdiet, erat non accumsan pulvinar, nisi magna gravida tortor, nec consectetur nulla turpis id lectus. Praesent lacinia auctor felis, nec varius nunc iaculis sed. Nunc eget tempor est. Nullam luctus ligula sed velit auctor elementum. Proin sit amet malesuada magna. Morbi venenatis augue et arcu eleifend mattis a nec erat.</p>
<p>Aliquam erat volutpat. Integer fringilla urna et lorem tincidunt porttitor. Sed varius posuere neque, sit amet pulvinar mauris faucibus quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec ultrices nulla. Phasellus id justo leo. Aliquam consequat dui at neque ultrices placerat. Phasellus porttitor, nibh sit amet posuere tempus, magna turpis aliquet ante, at mattis leo purus et ante. Aenean semper varius risus non suscipit. Nullam at nisi orci, sed cursus leo. Phasellus vel purus a est rutrum volutpat.</p>
<p>varius neque non mauris aliquet mattis quis at nunc. Nunc quis turpis quis metus vehicula laoreet. Praesent faucibus interdum congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan mauris quis ante sollicitudin tempus blandit ligula semper. Sed aliquam porta ante, ac egestas leo sollicitudin quis. Aliquam ornare magna in diam rhoncus ut mattis nibh rutrum. Ut erat mi, cursus ac auctor et, tincidunt sed nibh. Nulla quam magna, dignissim non venenatis vitae, ullamcorper fermentum purus. Vivamus tempor bibendum ipsum vel mollis. Morbi vel lectus a arcu tristique ornare non in enim.</p>
<p>Proin non lorem lorem, nec dictum elit. Sed lectus purus, convallis et convallis sed, ornare et quam. Suspendisse potenti. Praesent non sem felis, a laoreet ipsum. Maecenas consectetur, neque eget lacinia sollicitudin, neque augue ultricies nunc, sit amet sollicitudin metus metus non ipsum. Integer molestie tristique faucibus. Proin sed mi sed elit egestas vehicula. Nam ac nulla vitae magna facilisis porttitor vitae ac justo. Vivamus tincidunt quam ac neque elementum quis ultrices magna ornare. Suspendisse vitae sapien leo, quis porttitor libero. Sed leo nulla, euismod in ullamcorper at, suscipit sit amet lacus. Fusce aliquet, augue ut pellentesque dictum, orci ligula aliquam felis, sed bibendum nulla dui sed elit. Sed suscipit lorem nec arcu convallis tincidunt.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed dictum ipsum a purus mollis feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis sodales sapien vitae vestibulum. Cras sed elit quis diam viverra scelerisque. Proin non arcu non libero vehicula consectetur quis vel felis. Aliquam erat volutpat. Cras at vulputate tortor. Cras sagittis sodales leo sit amet tristique. Curabitur eu justo ac risus mattis fringilla nec vitae dolor. Mauris pharetra gravida leo, a dapibus odio aliquet eget. Vestibulum id orci neque, eu posuere neque. Mauris in varius leo. Pellentesque tempor interdum tempor. Maecenas aliquet, dolor sed venenatis vestibulum, nisl metus accumsan sapien, eu molestie dui nulla in ligula. Nam venenatis leo at nisl porttitor placerat placerat elit ultricies.</p>
<p>Donec ullamcorper, arcu eu pulvinar feugiat, elit velit tincidunt justo, sit amet porttitor leo tortor eu neque. In id odio eu mauris tristique sodales. Etiam erat erat, consequat a venenatis id, viverra eget nibh. Nam sollicitudin volutpat commodo. Nunc nulla arcu, commodo at interdum sit amet, tempor placerat ante. Nulla pellentesque, arcu non gravida rhoncus, tortor elit congue nibh, id tristique arcu enim ac turpis. Morbi vitae tellus lectus. Praesent ante odio, sagittis at interdum eu, dapibus vehicula metus. Mauris nisi nisi, pharetra ac hendrerit eu, luctus nec enim. Nam in dignissim orci. Vivamus lacinia, nisl in ornare imperdiet, nisi massa semper dui, in tristique sem neque et velit.</p>
<p>Vestibulum sodales placerat massa, sed iaculis purus mattis blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sit amet tortor in purus congue dictum. Donec a bibendum libero. Fusce a dui ullamcorper est hendrerit imperdiet eget nec dui. Nunc in eros a orci sagittis rutrum in sed massa. Nam convallis nisl vel nisl fermentum porttitor dignissim tellus vehicula. Phasellus sed velit velit. Sed at nisl vel risus viverra commodo. Nullam orci sem, porta quis accumsan vel, pharetra et augue. Vestibulum ut orci ut purus bibendum fringilla. Integer pretium ultrices lectus, et accumsan metus tempor varius. Etiam sit amet iaculis eros. </p>
</body>
</html>
CSS Position: Fixed;
Css can be a tricky beast, especially when you add IE into the mix.
加载中,请稍侯......
精彩评论