misterx100 Posted October 18, 2009 Share Posted October 18, 2009 I am making a design for a CMS - Tal 'Nessu Sisuhaldussüsteem (Sisuhaldussüsteem means CMS).Now I'm having a problem with position:relative;. The footer does not stay in the bottom of the page.You can see the site here: http://www.misterx.comuf.com/cms/Arendusindex.html <!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html><head> <title>Tal' Nessu Sisuhaldussüsteem</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="author" CONTENT="Kümmel Disain - Jaagup Kümmel"></head><body> <div id="container"> <img id="logo" src="images/logofixed2.png" width="328" height="109" alt="" border=0> <div id="versioon"> Versioon 1.0 Beta </div> <div id="menuu"> <a class="link" href="#">Avaleht</a> <a class="link" href="#">Lehed</a> <a class="link" href="#">Lisad</a> <a class="link" href="#">Seaded</a> <a class="link" href="#">Administraatorid</a> <a class="link" href="#">Sõnumid</a> <a class="link" href="#">Logi Välja</a> </div> </div> <div id="textarea"> <div id="text_1"> <div class="pealkiri"> Lorem ipsum </div> <div class="sisu"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat pharetra tempor. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere adipiscing ante, ut sollicitudin ipsum condimentum non. Nullam tincidunt, quam a varius convallis, massa felis rhoncus mauris, et aliquam erat erat vel elit. Nulla non nisl est. Praesent fermentum sem non magna adipiscing at auctor odio facilisis. Maecenas tempus faucibus risus vitae mollis. Ut est nunc, vehicula at cursus sit amet, egestas sed lacus. Nunc nec ligula elit, eu pretium orci. Donec convallis lacinia justo vitae scelerisque. Maecenas sit amet enim lectus, at imperdiet tellus. Aenean eget sapien purus. Nunc quis massa nec est accumsan fermentum.Integer sagittis volutpat libero. Sed tempus condimentum elit. Aliquam et commodo orci. Sed iaculis pulvinar sodales. Vivamus tempus tellus sollicitudin mi tristique convallis. Etiam a arcu ipsum. Ut ipsum est, ultricies id malesuada sit amet, sagittis sit amet nisi. Sed pellentesque vestibulum nibh, nec blandit sem sagittis nec. Aliquam posuere semper odio, malesuada accumsan lacus condimentum in. Mauris eu sem at felis imperdiet sollicitudin. Nunc nulla nunc, semper eget vulputate a, lacinia ac urna. Nam laoreet vehicula tincidunt. Mauris non leo augue. Phasellus eleifend faucibus mauris ut pulvinar. In egestas mattis purus id placerat. Fusce eget rutrum ipsum. Pellentesque eget lacus a ante congue gravida sed ut metus.Mauris ullamcorper enim sed est egestas faucibus. Nullam eu quam erat, at auctor sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec aliquet sapien odio. Donec semper rutrum rhoncus. Morbi at mi eu augue vulputate ultrices. In eros velit, fermentum eu facilisis vestibulum, vehicula vitae ipsum. Suspendisse sollicitudin luctus erat eget porttitor. Curabitur tellus sapien, gravida sit amet rhoncus eleifend, viverra eu orci. Aliquam convallis cursus odio, sed semper purus pretium sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo ultricies varius. Aenean urna risus, tincidunt non lacinia non, luctus quis dolor. Sed sollicitudin, lorem eget consequat lacinia, quam nulla ultricies erat, ac gravida felis urna vel dolor. Ut est erat, consectetur sit amet convallis quis, rutrum sit amet purus. Nullam in mattis enim. Phasellus vel lectus elit. Nulla a metus a nunc tincidunt venenatis.Etiam a purus lacus, vel consectetur velit. Donec euismod ligula eget enim suscipit in tincidunt lorem dictum. Phasellus ultricies leo et leo feugiat laoreet. Maecenas velit odio, ultrices eu luctus et, ornare ut velit. Morbi facilisis pulvinar elit at tristique. Duis sed urna nec nulla porttitor faucibus. Pellentesque ac odio vitae massa lobortis congue in quis justo. Sed ultricies tincidunt velit, in venenatis mauris fringilla eu. Aenean nec lacus non nisl sagittis venenatis. Etiam feugiat tellus in libero venenatis cursus.Sed nec diam vel mi auctor ullamcorper. Maecenas a quam nec nunc laoreet facilisis. Quisque vestibulum sagittis est a malesuada. Sed scelerisque lectus ligula, id egestas ipsum. Fusce scelerisque sapien vel libero tincidunt blandit. Integer rutrum sem a justo ornare ultrices. Etiam felis neque, ullamcorper ut pretium et, sodales nec leo. Quisque lobortis sodales purus id semper. Donec sagittis placerat mauris ac volutpat. Phasellus elementum arcu at velit suscipit aliquet. Praesent in aliquam ligula. Vivamus blandit enim quis velit sodales tempus. Nullam nisi diam, laoreet vitae auctor et, mollis in sem. Nullam sagittis enim ut massa ultricies nec pulvinar dui interdum.</p> </div> </div> <div id="text_2"> <div class="pealkiri"> Lorem ipsum </div> <div class="sisu"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat pharetra tempor. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere adipiscing ante, ut sollicitudin ipsum condimentum non. Nullam tincidunt, quam a varius convallis, massa felis rhoncus mauris, et aliquam erat erat vel elit. Nulla non nisl est. Praesent fermentum sem non magna adipiscing at auctor odio facilisis. Maecenas tempus faucibus risus vitae mollis. Ut est nunc, vehicula at cursus sit amet, egestas sed lacus. Nunc nec ligula elit, eu pretium orci. Donec convallis lacinia justo vitae scelerisque. Maecenas sit amet enim lectus, at imperdiet tellus. Aenean eget sapien purus. Nunc quis massa nec est accumsan fermentum.Integer sagittis volutpat libero. Sed tempus condimentum elit. Aliquam et commodo orci. Sed iaculis pulvinar sodales. Vivamus tempus tellus sollicitudin mi tristique convallis. Etiam a arcu ipsum. Ut ipsum est, ultricies id malesuada sit amet, sagittis sit amet nisi. Sed pellentesque vestibulum nibh, nec blandit sem sagittis nec. Aliquam posuere semper odio, malesuada accumsan lacus condimentum in. Mauris eu sem at felis imperdiet sollicitudin. Nunc nulla nunc, semper eget vulputate a, lacinia ac urna. Nam laoreet vehicula tincidunt. Mauris non leo augue. Phasellus eleifend faucibus mauris ut pulvinar. In egestas mattis purus id placerat. Fusce eget rutrum ipsum. Pellentesque eget lacus a ante congue gravida sed ut metus.Mauris ullamcorper enim sed est egestas faucibus. Nullam eu quam erat, at auctor sapien. </div> </div> </div> <div id="footer"> <div class="fleft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat pharetra tempor. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere adipiscing ante, ut sollicitudin ipsum condimentum non. </div> <div class="fcenter"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat pharetra tempor. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere adipiscing ante, ut sollicitudin ipsum condimentum non. </div> <div class="fright"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat pharetra tempor. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere adipiscing ante, ut sollicitudin ipsum condimentum non. </div> </div></body></html> and style.css body{ background-image:url('images/bg.png'); background-repeat:repeat-x; margin:0px; padding:0px;}#container{ position:relative; height:auto; min-height:100%;}#logo{ position:absolute; top:20px; left:5%;}#versioon{ position:absolute; top:15px; right:0.5%; color:#FFFFFF; font-size:8pt; font-family:Verdana, Helvetica, Tahoma, Arial, sans-serif;}#menuu{ position:absolute; top:164px; left:5%; float:left; width:90%; height:40px; text-align:center; margin:auto;}.link{ position:relative; color:#333333; font-size:10pt; font-family:"Times New Roman", Times, Helvetica, Verdana, Tahoma, Arial, sans-serif; text-transform:uppercase; text-decoration:none; padding-left:30px; padding-right:30px; padding-top:16px; padding-bottom:16px; height:40px;}.link:hover{ background-color:#666666; color:#FFFFFF; text-decoration:underline;}#textarea{ margin-top:275px; position:relative; width:90%; margin-right:5%; margin-left:5%;}#text_1{ position:absolute; left:0px; top:0px; width:65%; min-height:200px; text-align:justify; display:inline; float:left;}#text_2{ position:absolute; left:70%; width:30%; float:right; text-align:justify;}.pealkiri{ color:#1E90FF; font-family:"Times New Roman", Times, Heletica, Verdana, Tahoma, Arial, sans-serif; font-weight:bold; font-size:18pt; margin-bottom:25px; padding-bottom:5px; border-bottom-width:1px; border-bottom-color:#1E90FF; border-bottom-style:dotted; text-shadow: 1px 1px 1px #ccc;}#footer{ position:relative; height:120px; width:100%; padding-top:15px; padding-bottom:15px; margin-top:0px; background-image:url('images/footerfixed.png');} BTW, you may rate the design too.Thanks, anyway! Link to comment Share on other sites More sharing options...
jlhaslip Posted October 18, 2009 Share Posted October 18, 2009 It appears that the problem comes from the use of position: absolute and position: relative in your page design.For this design, I think you need to drop those attributes and use Floats, Margins and padding only.I can see no need for absolute or relative positions. They both remove the div's from the normal flow of the document and can really mess up. Especially on various Browsers.Where do you want the footer to be placed, exactly? At the bottom of the page? or the bottom of the display screen? Link to comment Share on other sites More sharing options...
misterx100 Posted October 18, 2009 Author Share Posted October 18, 2009 I know how to place it on the bottom of the screen. In the bottom of the page. Link to comment Share on other sites More sharing options...
thescientist Posted October 18, 2009 Share Posted October 18, 2009 i would take jl's suggestion and redo your site without thse position attributes. When you have your columns set up in their container div, to the footer just add clear: both Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.