Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2007
    Posts
    4
    Member #
    15651
    I have designed a website for guilds for WoW and it seems that the login text space is stretching with the main text space , or vice versa. you can see on this page. also tell me what u think about the design. only took me a couple of hours.

    http://wowlfg.no-ip.org/lfg/

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That'll be because you're using tables for layout. Don't do that. There are many posts here on the forum that'll help you out in moving away from tables and into semantic XHTML and CSS.

  4. #3
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    The design is well thought out, the table code (however) is significantly over-complex and this is why, I think, you're having issues working out what's going on!!

    I would also use divs rather than tables for your design, but if you think tables are "more your thing" you need to break out of this "one table for all" idea and start nesting, which will make the whole thing far far easier to understand and to maintain moving forward...

    If you draw your site on paper (always a good idea) you will see that what you have is basically a very simple layout, so why make it so complex?

    Here's how I would probably do it, as a skeleton...

    Code:
    <!-- outer table -->
    <table>
      <tr>
         <td>HEADER CODE</td>
      </tr>
      <tr>
         <td>MENU CODE</td>
      </tr>
      <tr>
         <td>
             <!-- three columns -->
             <table>
                 <tr>
                     <td valign="top">
                            <!-- login -->
                            <table>
                               <tr>
                                  <td>HEADER</td>
                               </tr>
                               <tr>
                                   <td>CONTENT</td>
                               </tr>
                            </table>       
    
                            <!-- latest guilds -->
                            <table>
                               <tr>
                                  <td>HEADER</td>
                               </tr>
                               <tr>
                                   <td>CONTENT</td>
                               </tr>
                            </table>       
    
                            <!-- latest chars -->
                            <table>
                               <tr>
                                  <td>HEADER</td>
                               </tr>
                               <tr>
                                   <td>CONTENT</td>
                               </tr>
                            </table>       
                     </td>
                     <td valign="top">
                            <!-- main -->
                            <table>
                               <tr>
                                  <td>HEADER</td>
                               </tr>
                               <tr>
                                   <td>CONTENT</td>
                               </tr>
                            </table>       
                     </td>
                     <td valign="top">
                            RIGHT COLUMN CONTENT (as above)
                     </td>
                 </tr>
             </table>
         </td>
      </tr>
      <tr>
         <td>FOOTER CODE</td>
      </tr>
    </table>
    You have also made the creation of the boxes (eg. "Login") far too complex... all you've basically got is an image, some content and a border... use CSS... you have your "LOGIN" image, so if you put that on one table row and then simply apply a 1px border to the second row you effectively have your login box without any further use of images/tables or whatever.

    Simplicity is the key! Good luck!

    Sean

  5. #4
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Please see also my attempt at simplifying your page by removing tables altogether (as suggested by Shadowfield) at http://seanmiller.net/guild

    Source follows:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>LFGWebsite - Tableless Design</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <!-- STYLING -->
    
    <style type="text/css">
    	body {
    		background-color: #000000;
    		color: #FFFFFF;
    		font-family: Verdana, Arial, Helvetica, sans-serif;
    		font-size: 12px;
    	}
    	/* container centre-aligns and constrains */
    	#container {
    		width: 900px;
    		margin: 0px auto;
    	}
    	#header {
    		width: 100%;
                    float: left;
    	}
    	#nav {
    		width: 100%;
                    float: left;
    	}
            #footer {
                    width: 100%;
                    float: left;
                    margin-bottom: 1px; 
            }
    	#content-left {
    		width: 218px;
    		margin-right: 25px;
    		float: left;
    	}
    	#content-middle {
    		width: 621px;
    		float: left;
    	}
    	.content {
    		margin-bottom: 10px;
    		padding: 5px;
    		border: 1px solid #AAAAAA;
    		border-top: 0px;
    	}
    	.content p {
    		margin-top: 0px;
    	}
    </style>
    
    </head>
    <body>
    	<div id="container">
    		<div id="header">
    
    			<img src="http://wowlfg.no-ip.org/lfg/images/index_01.jpg" width="900" height="172" alt="">
    		</div>
    
    		<div id="nav">
    			<img src="http://wowlfg.no-ip.org/lfg/images/index_02.jpg" width="900" height="35" alt="">
    			<img src="http://wowlfg.no-ip.org/lfg/images/index_03.jpg" width="900" height="23" alt="">
    		</div>
    
    		<div id="content-left">
    			<div id="login">
    
    				<img src="login.jpg" width="218" height="22" alt=""><br>
    				<div class="content">
    					<p>Vestibulum a est. Maecenas elementum. Aenean pharetra. Suspendisse pellentesque. Donec at dolor a nisl cursus fermentum. Ut at felis. Integer nec purus. Proin quis sem. Phasellus consectetuer leo ut velit. Donec mattis sapien sed velit. Mauris consequat tortor at neque. Aliquam ultricies pede in velit. Ut varius lobortis dolor.</p>
    				</div>
    			</div>
    			<div id="guilds">
    				<img src="guilds.jpg" width="218" height="22" alt=""><br>
    				<div class="content">
    
    					<p>Pellentesque eu purus. Phasellus massa erat, consectetuer ut, aliquam eu, hendrerit vel, lorem. Nulla facilisi. Vestibulum justo nisi, bibendum nec, condimentum ut, facilisis eget, tellus. Suspendisse sed nisi. Cras eu purus. Donec nec felis. Duis venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum luctus commodo nulla. Fusce eu mi. Curabitur est. Nam massa metus, facilisis at, molestie quis, lacinia pellentesque, ligula. Nunc magna. Integer nisl. Vivamus turpis sem, gravida rhoncus, vestibulum vel, ornare sed, pede. Sed ultricies malesuada turpis. Vestibulum dictum tempor mi.</p>
    				</div>
    			</div>
    			<div id="chars">
    				<img src="chars.jpg" width="218" height="22" alt=""><br>
    				<div class="content">
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In nisl. Nullam ipsum. Nullam egestas porttitor erat. Ut porta posuere justo. Ut tincidunt arcu ac magna. Nulla facilisis massa sed leo. Integer ac ante. Donec pretium pulvinar mauris. Integer pharetra, quam at pellentesque gravida, augue massa egestas lacus, et convallis erat felis sit amet ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris quam lacus, semper ac, lacinia a, volutpat non, dui. Ut lacinia.</p>
    				</div>
    
    			</div>
    		</div>
    		<div id="content-middle">
    			<div id="main">
    				<img src="http://wowlfg.no-ip.org/lfg/images/index_05.jpg" width="621" height="22" alt=""><br>
    				<div class="content">
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In nisl. Nullam ipsum. Nullam egestas porttitor erat. Ut porta posuere justo. Ut tincidunt arcu ac magna. Nulla facilisis massa sed leo. Integer ac ante. Donec pretium pulvinar mauris. Integer pharetra, quam at pellentesque gravida, augue massa egestas lacus, et convallis erat felis sit amet ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris quam lacus, semper ac, lacinia a, volutpat non, dui. Ut lacinia.</p>
    					<p>Pellentesque eu purus. Phasellus massa erat, consectetuer ut, aliquam eu, hendrerit vel, lorem. Nulla facilisi. Vestibulum justo nisi, bibendum nec, condimentum ut, facilisis eget, tellus. Suspendisse sed nisi. Cras eu purus. Donec nec felis. Duis venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum luctus commodo nulla. Fusce eu mi. Curabitur est. Nam massa metus, facilisis at, molestie quis, lacinia pellentesque, ligula. Nunc magna. Integer nisl. Vivamus turpis sem, gravida rhoncus, vestibulum vel, ornare sed, pede. Sed ultricies malesuada turpis. Vestibulum dictum tempor mi.</p>
    
    					<p>Vestibulum a est. Maecenas elementum. Aenean pharetra. Suspendisse pellentesque. Donec at dolor a nisl cursus fermentum. Ut at felis. Integer nec purus. Proin quis sem. Phasellus consectetuer leo ut velit. Donec mattis sapien sed velit. Mauris consequat tortor at neque. Aliquam ultricies pede in velit. Ut varius lobortis dolor.</p>
    					<p>Mauris tincidunt gravida purus. Fusce ut augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam molestie. Aliquam est. Integer consequat, tellus et mollis faucibus, ipsum ipsum tristique eros, sed dignissim pede odio vel eros. Pellentesque leo velit, sagittis ornare, scelerisque eget, facilisis eu, mi. Duis quis leo lacinia augue mattis facilisis. Praesent id orci. Vivamus fermentum cursus lectus. In dapibus neque eget nisi. Ut tristique mattis ligula. Nullam interdum. Phasellus commodo massa et augue. </p>
    				</div>
    			</div>
    		</div>
    		<div id="footer">
    			<img src="http://wowlfg.no-ip.org/lfg/images/index_32.jpg" width="900" height="13" alt="">
    		</div>
    
    	</div>
    </body>
    </html>
    Sean

  6. #5
    Junior Member
    Join Date
    Aug 2007
    Posts
    4
    Member #
    15651
    wow, great work on that rebuild, im going to try it like that, i will post my success/faliures

    Update
    *************************************
    Alright, i successfully rebuilt it using your code (thx for that)
    there was only a couple errors in it, example; the extension of the letters from the buttons were 1 px too far down, creating a black space before it.
    and, im a GFX junkie, so that quality JPG isnt my style, i need to go maximum :P
    but overall, thanks for that great code, the whole website stretches nicely now.

  7. #6
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    no problem - wasn't meant to be a "final solution", just something to ponder... :-)

    Glad to have been of help.

    Sean


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com