Jump to content

Layout Problem

Unrated

By Unrated
in CSS

 Share

Recommended Posts

Unrated Newbie

Unrated

Posted
Posted

I made a new topic for this cuz it was in the wrong section!http://test.psfederation.com/As you can see on the link the layout is misplaced when i add alot of text :) How do i solve this? Btw in the "big" box is gonne come a php script for News posting!So ppl can post news online and it will be added on the main page! So the layout should be able to resize!TxEDIT: The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Photoshop Federation</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style>html, body{ background-color: #5A6573; height: 100%;}.wrapper{ width: 726px; margin: 0 auto; padding: 0px;}.MainContent{ background-image: url(images/wrapper_bg.gif); margin: 0px; height: 100%;}.header{ background-image: url(images/wrapper_bg.gif); margin: 0px;}.LeftColumn{ padding-left: 7px; margin: 0px;}.LeftBoxMiddle{ background-image: url(images/left_box_middle.gif); padding:5px; margin: 0px;}.LeftBoxBtm{ margin: 0px; margin-bottom: 5px;}.RightBoxMiddle{ background-image: url(images/right_box_middle.gif); padding:5px; height:100%; margin: 0px;}.RightBoxBtm{ margin: 0px; }</style></head><body><div class="wrapper" style="height:100%"><div class="header"> <img src="images/header.gif" alt="" /></div><div class="MainContent"> <table cellspacing="2" cellpadding="0" style="height:100%">   <tr>     <td class="LeftColumn" valign="top">  <div><img src="images/banner_welcome.gif" alt="" /></div>  <div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  <div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>  <div><img src="images/banner_links.gif" alt="" /></div>  <div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  <div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>  <div><img src="images/banner_linkus.gif" alt="" /></div>  <div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  <div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>     </td>     <td class="RightColumn" valign="top" style="height:100%">  <div><img src="images/banner_news.gif" alt="" /></div>  <div class="RightBoxMiddle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eleifend nibh. Donec tincidunt, massa a bibendum laoreet, nisi libero mollis libero, quis ultricies orci lacus venenatis metus. Ut ullamcorper mauris id lorem. Vivamus malesuada dignissim dui. Morbi hendrerit, purus nec scelerisque dapibus, neque justo lobortis mi, ullamcorper dignissim orci augue pellentesque ligula. Maecenas lobortis orci eget nunc. Ut semper adipiscing elit. Aenean pharetra consequat odio. Phasellus nec nunc non quam auctor dapibus. In quis sem at velit pharetra rhoncus.Donec vehicula erat dignissim mi imperdiet eleifend. Aliquam elementum porta velit. Mauris sem libero, varius id, dignissim id, semper eu, nisl. Sed condimentum, velit eu consectetuer fringilla, elit erat ultricies nunc, et imperdiet quam enim quis purus. Fusce luctus tristique sem. Aliquam tincidunt libero sed sapien lobortis dignissim. Nulla facilisi. Duis ipsum metus, ornare ac, sodales eu, dictum nec, sem. Sed ante ante, vehicula sed, viverra sed, consectetuer id, lacus. Phasellus porta nunc at odio. Suspendisse at metus porta mauris pulvinar pulvinar. Curabitur vitae pede. In volutpat scelerisque lectus. Donec adipiscing justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum imperdiet velit eu urna.Integer at lacus. Nunc diam tortor, tempus eget, malesuada ac, sodales tempor, sapien. Duis rhoncus fermentum velit. Pellentesque ac felis sed sem mattis vehicula. Etiam dictum magna quis turpis. Morbi mattis magna eget orci. Sed nulla dui, posuere quis, varius sed, vehicula sit amet, mauris. Donec ut ipsum. Aliquam malesuada nunc vitae tellus. Aliquam vitae massa. Vestibulum justo nisi, suscipit non, ultricies malesuada, mattis et, mauris.Donec ac tellus. Vivamus molestie aliquet sem. Sed vitae massa et nisi eleifend porttitor. Nunc vehicula libero non arcu. Vestibulum eleifend mauris a arcu. Curabitur ac elit. Fusce sed turpis ut lacus consequat viverra. Proin ac tellus a pede bibendum semper. Nam fermentum vestibulum leo. Donec rhoncus dui ac ipsum. Nulla accumsan ante non risus.Maecenas quis neque. Nunc in mauris. Mauris nec est. Nullam facilisis neque et nibh. Etiam iaculis pede id nibh. Donec congue accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi dui. Nulla eleifend vestibulum tortor. Nullam posuere lectus eget nisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eleifend nibh. Donec tincidunt, massa a bibendum laoreet, nisi libero mollis libero, quis ultricies orci lacus venenatis metus. Ut ullamcorper mauris id lorem. Vivamus malesuada dignissim dui. Morbi hendrerit, purus nec scelerisque dapibus, neque justo lobortis mi, ullamcorper dignissim orci augue pellentesque ligula. Maecenas lobortis orci eget nunc. Ut semper adipiscing elit. Aenean pharetra consequat odio. Phasellus nec nunc non quam auctor dapibus. In quis sem at velit pharetra rhoncus.Donec vehicula erat dignissim mi imperdiet eleifend. Aliquam elementum porta velit. Mauris sem libero, varius id, dignissim id, semper eu, nisl. Sed condimentum, velit eu consectetuer fringilla, elit erat ultricies nunc, et imperdiet quam enim quis purus. Fusce luctus tristique sem. Aliquam tincidunt libero sed sapien lobortis dignissim. Nulla facilisi. Duis ipsum metus, ornare ac, sodales eu, dictum nec, sem. Sed ante ante, vehicula sed, viverra sed, consectetuer id, lacus. Phasellus porta nunc at odio. Suspendisse at metus porta mauris pulvinar pulvinar. Curabitur vitae pede. In volutpat scelerisque lectus. Donec adipiscing justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum imperdiet velit eu urna.Integer at lacus. Nunc diam tortor, tempus eget, malesuada ac, sodales tempor, sapien. Duis rhoncus fermentum velit. Pellentesque ac felis sed sem mattis vehicula. Etiam dictum magna quis turpis. Morbi mattis magna eget orci. Sed nulla dui, posuere quis, varius sed, vehicula sit amet, mauris. Donec ut ipsum. Aliquam malesuada nunc vitae tellus. Aliquam vitae massa. Vestibulum justo nisi, suscipit non, ultricies malesuada, mattis et, mauris.Donec ac tellus. Vivamus molestie aliquet sem. Sed vitae massa et nisi eleifend porttitor. Nunc vehicula libero non arcu. Vestibulum eleifend mauris a arcu. Curabitur ac elit. Fusce sed turpis ut lacus consequat viverra. Proin ac tellus a pede bibendum semper. Nam fermentum vestibulum leo. Donec rhoncus dui ac ipsum. Nulla accumsan ante non risus.Maecenas quis neque. Nunc in mauris. Mauris nec est. Nullam facilisis neque et nibh. Etiam iaculis pede id nibh. Donec congue accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi dui. Nulla eleifend vestibulum tortor. Nullam posuere lectus eget nisi.<br/><br/><br/><br/></div>  <div class="RightBoxBtm"><img src="images/right_box_btm.gif" alt="" /></div>     </td>   </tr> </table></div><div class="footer"> <img src="images/footer.gif" alt="" /></div></div></body></html>

Link to comment
Share on other sites
Skemcin Devoted Member

Skemcin

Posted
Posted

Sorry, not sure if this helps much, but the CSS seems to validate but does return these three warnings (not errors):

  • Line : 3 (Level : 1) You have no color with your background-color : body
  • Line : 3 (Level : 1) You have no color with your background-color : body
  • Line : 51 (Level : 2) Redefinition of margin-bottom : .LeftBoxBtm

Link to comment
Share on other sites
Skemcin Devoted Member

Skemcin

Posted
Posted

ahh - remove the height:100%;from the <body> and <html> definitions and it looks good in FF, IE, NN and Opera.In fact, I took out all the "height:100%;" definitions and it still works in all the browsers - I'm in Windows 2000 Professional.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...