Scropion Posted September 7, 2009 Share Posted September 7, 2009 Okay I have a site that I am coding for one of my friends and I happen to run into an error. The content (main part of the site where all the text and tables are) keeps extending over because of the right navigation. http://scropion.byethost2.com/ Here is the example, could anyone help me? I'll repeat my problem, the right side where it says My Team and Profile viewing is dragging down the center (main navigation) down to where it ends. Any help? Quote Link to comment Share on other sites More sharing options...
saltedm8 Posted September 7, 2009 Share Posted September 7, 2009 looks fine to me, I have added in some test text and also added a doctype ( which is essential when creating a web document ).. I have also cleaned up the code so its producing valid html ( http://validator.w3.org/ }.. but I cant see any issues like you have described <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test out layout</title> <style type="text/css"> <!-- body,td,tr { font-family:verdana;font-size:10px; } .navigation { padding: 3px; } hr { color: black; size: 1px; } a { color: #7b8c7c; text-decoration: none } .header { background-color: #7b8c7c; padding: 2px; color: white; font-weight: bold; border-bottom: 1px solid black } .left_navi .nav, .left_navi .header { border-bottom: 1px solid black; border-left: 1px solid black; } .right_navi .nav, .right_navi .header, .right_navi .p_nav { border-bottom: 1px solid black; border-right: 1px solid black; } .nav { padding: 3px; } .nav a { background-color: transparent; display: block; } .p_nav { padding: 3px; height: 32px; } .left_navi { top: 132px; width: 160px; } .content .header { text-align: center; border: 1px solid black; } .content { background-color: #FFFFFF; padding: 3px; text-align: center; margin-left: 160px; margin-right: 160px; border: 1px solid black; border-top: 0px; } .right_navi { top: 132px; width: 160px; } .footer { border: 0px; text-align: center; } input,textarea,select { font-family:verdana;font-size:10px; border: 1px solid black; text-align: left; padding: 2px; } --> </style> </head> <body> <script type="text/javascript" src="wz_tooltip.js"></script> <table width="900" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="left" height="125" style="background-repeat: no-repeat; border: 1px solid black;" colspan="3"> </td> </tr> <tr> <td class="left_navi" valign="top"> <div class="header">Member Panel</div> <div class="nav"><a>Login</a></div> <div class="nav"><a>Register</a></div> </td> <td class="content" valign="top"> <div id="lipsum"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut elit magna, id sodales velit. Proin malesuada nibh nec nulla suscipit sed mattis nisl elementum. Nam pulvinar orci sit amet felis cursus non aliquam urna tristique. Cras molestie, odio ac pulvinar lacinia, nisl tortor tempus quam, eu aliquet elit urna nec metus. In venenatis ullamcorper est, vitae faucibus risus interdum eget. Maecenas hendrerit placerat ullamcorper. Phasellus lorem dui, consectetur a vestibulum id, aliquam semper urna. Suspendisse scelerisque sem vitae lectus volutpat imperdiet. Proin odio leo, hendrerit nec dictum eget, euismod in ante. Integer orci libero, aliquet id lobortis quis, sagittis eget turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id dolor urna, id tincidunt lorem. Praesent magna quam, consectetur vitae aliquet vitae, lacinia vitae leo. </p> <p>Suspendisse vitae arcu id ipsum aliquet fermentum. Donec neque magna, blandit at auctor non, pharetra at libero. Nunc sit amet pretium orci. In tincidunt congue nisi sit amet placerat. Nam hendrerit massa quis arcu consectetur quis iaculis enim vulputate. Cras cursus egestas leo sit amet feugiat. Donec magna turpis, pretium nec sollicitudin non, faucibus a sem. Nulla facilisi. Suspendisse sagittis odio erat, eget pulvinar diam. Quisque lorem neque, bibendum tempor varius eu, laoreet ac ante. Donec elementum dignissim tortor, eget venenatis ante ultrices consectetur. Quisque sit amet nibh non odio semper lobortis a ut augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ornare neque. Pellentesque mollis blandit dui ut semper. In rhoncus nisi ac mauris posuere luctus et ut turpis. </p> <p>Nam sagittis condimentum metus, in malesuada risus fringilla molestie. Vivamus rhoncus interdum pharetra. Maecenas consectetur magna in purus scelerisque et mollis leo egestas. Integer pretium metus at magna suscipit interdum. Fusce interdum dolor at mauris eleifend tincidunt. Sed condimentum ornare arcu nec hendrerit. Sed lacinia risus tellus. Nunc posuere erat id diam eleifend in dictum mauris vestibulum. Vivamus dignissim fermentum semper. Nam sit amet elit non ipsum elementum posuere. Donec facilisis libero id enim hendrerit sit amet lobortis nisl vehicula. Vivamus urna tortor, ultrices et tincidunt sed, aliquet semper ante. Nulla facilisi. Praesent condimentum, nibh a posuere mollis, diam diam luctus felis, sagittis laoreet tellus purus a quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p>Donec id tellus tristique sapien ultricies congue. Praesent mattis pellentesque justo quis rhoncus. Fusce tincidunt lacus eget urna gravida et fringilla sapien imperdiet. Sed sed enim quam. Sed suscipit fermentum nisl, et ultricies erat sodales sit amet. Mauris ligula nulla, vestibulum non tincidunt sed, tempus in lorem. Fusce suscipit dictum tempor. In augue odio, ornare et convallis sed, luctus quis leo. Praesent ut enim odio. Donec arcu dolor, semper sit amet malesuada quis, luctus ac risus. Quisque mattis libero eu arcu pellentesque pharetra. Suspendisse sit amet leo dolor, sed faucibus felis. Aliquam vitae enim sem, in faucibus ante. Nam laoreet varius dignissim. Fusce rutrum purus in tellus luctus quis scelerisque magna vulputate. </p> <p>Suspendisse ut libero eu nibh imperdiet viverra. Suspendisse commodo odio elit. Ut mollis, libero non tempor iaculis, nibh est rhoncus metus, in semper lorem nunc vel lorem. Integer a placerat massa. Ut placerat ornare suscipit. In tempor urna id odio ultricies pulvinar. Donec blandit, risus varius pellentesque bibendum, odio nisi mattis erat, et iaculis elit sapien at metus. Suspendisse tempor neque vel massa dignissim vitae varius nunc ornare. Suspendisse potenti. Suspendisse potenti. </p> </div></td> <td class="right_navi" valign="top"> <div class="header"> My Team</div> <div class="p_nav"> Doggy</div> <div class="p_nav"> Monkey</div> <div class="p_nav"> Monkey</div> <div class="p_nav"> Monkey</div> <div class="p_nav"> Monkey</div> <div class="p_nav"> Monkey</div> <div class="header"> Profile Viewing</div> <div class="p_nav"> TEST</div> </td> </tr> </table> Quote Link to comment Share on other sites More sharing options...
Scropion Posted September 7, 2009 Author Share Posted September 7, 2009 Thanks alot but the problem was when you smaller text in the middle than the right side, the middle extend down to the bottom of the right side. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.