July 21, 200818 yr I’m trying to adjust this site http://www.photofinale.org/comp2.html so that the pages are elastic in length for when there’s lots of content being added the pages fits the content. Is there a way of setting a minimum height so that on pages where there’s not much content the lay out looks correct? But becomes elastic above a set value At the moment it looks bad as seen here http://www.photofinale.org/comp/photo-comp-portfolio.html Thanks for any advice
July 21, 200818 yr You can use min-height in your css. This isn't understood by IE though. For IE, declare your min-height as simply height. IE incorrectly allows the container to expand with its content even though a height has been declared. #mydiv { min-height:400px;/*non-IE browsers*/ } #mydiv { height:400px;/*IE browsers*/ } To only show the height declaration to IE, you will need to use either a conditional comment and IE specific stylesheet or an IE hack in your current stylesheet. Hope that helps.
July 21, 200818 yr I’m trying to adjust this site http://www.photofinale.org/comp2.html so that the pages are elastic in length for when there’s lots of content being added the pages fits the content. Is there a way of setting a minimum height so that on pages where there’s not much content the lay out looks correct? But becomes elastic above a set value At the moment it looks bad as seen here http://www.photofinale.org/comp/photo-comp-portfolio.html Thanks for any advice This should work... before the end of the closing tag of the div that has the background styled, add another div with class="spacer" then add this to your css... div.spacer { clear:both; } Shoot me if it doesn't work...
July 22, 200818 yr Author thanks for the replys. Im going to try them all! with the footer Ive tryed clearing it but nothing happens below is the code .thrColAbsHdr #footer { padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ background:#DDDDDD; clear: } Ive tred both none right left both and inherant but nothing happens?
July 22, 200818 yr Author for adding the div.spacer which div tag do I need to add it to? <body class="thrColAbsHdr" or <div id="container"> in my css file Ive added div.spacer { clear:both; } In Dreamweaver it makes the design look very odd. When checking in the browser it doesn’t appear to have done anything. I’m testing it in ie and fire fox I’m assuming I’m doing something wrong?
July 22, 200818 yr Author Im testing in ie and fire fox. Ive just tryed the other method and tested in ie but if I add a hight value it stays that hight and dose not change. Im assuming Im super rubbish? As I work around I’ve gone in to the main content area in the middle and added <p> </p> until the content fits the screen. I haven’t up loaded it yet but it’s working in the browsers on the computer I’m testing it on.
July 22, 200818 yr Im testing in ie and fire fox. Ive just tryed the other method and tested in ie but if I add a hight value it stays that hight and dose not change. Im assuming Im super rubbish? As I work around I’ve gone in to the main content area in the middle and added <p> </p> until the content fits the screen. I haven’t up loaded it yet but it’s working in the browsers on the computer I’m testing it on. Its a long shot but try height: 1%; for ie Pat
July 22, 200818 yr hmmm.. I think it's down to the 'sidebar2' section being positioned 'absolute'... taking that off extends the background colour. When i do designs of this nature I tend to float all the elements in the container div - float:left; Then I 'clear:both;' the footer to make the background adhere. So if you want to use this method you'll have to set a width on your divs inside the container & float them left in the css. You would also need to move the 'sidebar2' div after 'mainContent' in the html to make it display properly... then clear:both; the footer. Hope this helps...??? css---------------------------------------------------------------------------------------------------------------------> add - float:left; to - 'sidebar1', 'mainContent' (you will need to add the correct width on this), 'sidebar2' add - clear:both; to - 'footer' html (swap sidebar2 & mainContent around)-------------------------------------------------------------------------------> <div id="container"> <div id="header"><!-- end #header --> <div align="center"><img src="images/images3/title" alt="bike comp" width="731" height="144" /></div> </div> <div id="sidebar1"> <p><a href="../comp2.html">Info ></a></p> <p><a href="photo-comp-Subbmissions.html">Submissions ></a></p> <p><a href="photo-comp-rlues.html">Rules ></a></p> <p><a href="photo-comp-forms.html">Forms ></a></p> <p><a href="photo-comp-copyright.html">Copyright ></a></p> <p><a href="photo-comp-galleries.html">Galleries ></a></p> <p>Portfolio ></p> <p><a href="photo-comp-Events.html">Events ></a></p> <p><a href="../index.html">Photofinale></a></p> <p> </p> <p> </p> <!-- end #sidebar1 --></div> <div id="mainContent"> <h1>Portfolio</h1> <div class="fltlft"></div> <div class="fltlft"> <p><a href="../past_1/index.htm" target="_blank"><img src="images/past.jpg" alt="past" width="125" height="100" border="0" /></a></p> <p><a href="../past_1/index.htm" target="_blank">Past 1</a></p> </div> <p> </p> <p> </p> <p> </p> <h2> </h2> <p> </p> <p> <!-- end #mainContent --> </p> </div> <div id="sidebar2"> sponserd by <p align="center"><a href="http://www.leicester.gov.uk/index.asp?pgid=7010" target="_blank"><img src="images/images3/cyclecitylogo.gif" alt="cycle city" width="149" height="75" border="0" /></a></p> <p align="center"><a href="http://www.leicester.gov.uk/index.asp?pgid=7010"><img src="images/images3/EndLCC.gif" alt="lcc" width="52" height="75" border="0" /></a></p> <p align="center"><a href="http://www.thin-kingmedia.co.uk/" target="_blank"><img src="images/images3/tkpink.gif" alt="thin-king media" width="110" height="75" border="0" /></a></p> <p align="center"><a href="http://www.leicester.gov.uk/your-council--services/transport--traffic/transport-development/sustainable-team-homepage/cycling-in-leicester/ride-leicester-2008" target="_blank"><img src="images/images3/ride_leicestee-pink.gif" alt="rideleicester" width="199" height="75" border="0" /></a><br /> <!-- end #sidebar2 --> </p> </div> <div id="footer"> <p>web site by thin-king media</p> <!-- end #footer --></div> <!-- end #container --></div>
July 26, 200818 yr Author Thanks for the advice I’ve only just had time to look at it again. I’ve made all the changes but I still can’t get it to lay out properly. http://www.photofinale.org/test/comp2a.html Any ideas on how to lift up the side bar 2? I know all the logos are missing Thanks again for your help
July 27, 200818 yr Remove the absolute positioning from #sidebar1. Remove the left and right margins from #maincontent and you should be ok.
Create an account or sign in to comment