Results 1 to 3 of 3

Thread: Review Question: Fluid Layouts

  1. #1
    Vexir's Avatar
    4,185
    posts
    Coming and going.

    Review Question: Fluid Layouts

    Right so, I was slicing a layout earlier after what seems like a year; and due to my addiction to World of Warcraft I've forgotten everything I knew about designing websites. Heh. Anyhoo, can someone take a look through this code and tell me why the table breaks when I add content to the content cell? (the one with the background img)

    HTML Code:
    <html>
    <head>
    <title>Fluid Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body bgcolor="#D4EABB" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <center>
    <p align="center">
    <table id="Table_01" border="0" cellpadding="0" cellspacing="0">
    <tr><td>
    	<div align="center">
    	  <table id="Table 1A" border="0" cellpadding="0" cellspacing="0">
    	    <tr>
    	      <td>
    	        <img src="images/layout1_03.jpg" width="420" height="161" alt="" />          </td>
    		  </tr>
    	    <tr>
    	      <td>
    	        <img src="images/layout1_05.jpg" width="420" height="12" alt="" />          </td>
    		  </tr>
          </table>
    </div></td></tr>
    <tr><td>
    	<div align="center">
    	  <table id="Table 1B" border="0" cellpadding="0" cellspacing="0">
    	    <tr>
    	      <td>
    	        <img src="images/layout1_06.jpg" width="16" height="15" alt="" />	        </td>
    		    <td>
    			    <img src="images/layout1_07.jpg" width="388" height="15" alt="" />	        </td>
    		    <td>
    			    <img src="images/layout1_08.jpg" width="16" height="15" alt="" />	        </td>
    		  </tr>
    	    
    	    <tr>
    	      <td>
    	        <img src="images/layout1_09.jpg" width="16" height="100%" alt="" />	        </td>
    		    <td background="images/layout1_10.jpg" valign="top">
    		      sdasdasdasd vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv	frrgfdg	dfgdf  fdg dfg dfg dfg dfg df gdfg dfg df gdf df gdfg dfg dfg df gdfg df gdfg dg d gd gdf gd gdg df gdfg dfg dfg dfg df gdfg fdis fhdfhdiufh sdiuhf siudhfiush fisudhfsiu dhsiduhf isduh fsidu hfsiud fhsdiu hfsiu hfsiuhf </td>
    		    <td>
    			    <img src="images/layout1_11.jpg" width="16" height="100%" alt="" />	        </td>
    		  </tr>
    	    
    	    <tr>
    	      <td>
    	        <img src="images/layout1_12.jpg" width="16" height="19" alt="" />	        </td>
    		    <td>
    			    <img src="images/layout1_13.jpg" width="388" height="19" alt="" />	        </td>
    		    <td>
    			    <img src="images/layout1_14.jpg" width="16" height="19" alt="" />	        </td>
    		  </tr>
          </table>
        </div>
    </tr>
    <div align="center">
      </td>
    </div>
    <tr><td>
    	<div align="center">
    	  <table id="Table 1C" border="0" cellpadding="0" cellspacing="0">
    	    <tr>
    	      <td>
    	        <img src="images/layout1_15.jpg" width="16" height="37" alt="" />	        </td>
    		    <td>
    		      <img src="images/layout1_16.jpg" width="388" height="37" alt="" />	        </td>
    		    <td>
    		      <img src="images/layout1_17.jpg" width="16" height="37" alt="" />	        </td>
    		  </tr>
          </table>
        </div>
    </body>
    </html>

  2. #2
    Input this:

    HTML Code:
    .text {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #7A8239;
        padding: 5px;
        vertical-align: top;
    }
    .content {
        background-color: #FBFFDE;
        background-image: url(images/layout1_10.jpg);
        background-repeat: no-repeat;
        background-position: top;
        margin: 0px;
        height: 317px;
        width: 388px;
    }
    and attach it to this html file I modded:

    HTML Code:
    <html>
    <head>
    <title>Fluid Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor="#D4EABB" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <center>
    <p>
    <table id="Table_01" border="0" cellpadding="0" cellspacing="0">
    <tr><td>
        <table id="Table 1A" border="0" cellpadding="0" cellspacing="0">
            <tr>
            <td>
                <img src="images/layout1_03.jpg" width="420" height="161" alt="" />
            </td>
            </tr>
            <tr>
            <td>
                <img src="images/layout1_05.jpg" width="420" height="12" alt="" />
            </td>
            </tr>
        </table>
    </td></tr>
    <tr><td>
        <table id="Table 1B" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img src="images/layout1_06.jpg" width="16" height="15" alt="" />
                </td>
                <td>
                    <img src="images/layout1_07.jpg" width="388" height="15" alt="" />
                </td>
                <td>
                    <img src="images/layout1_08.jpg" width="16" height="15" alt="" />
                </td>
            </tr>
            
            <tr>
                <td>
                    <img src="images/layout1_09.jpg" width="16" height="100%" alt="" />
                </td>
                <td class="content"><p class="text">This is filler text. . .</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p>
                <p class="text">&nbsp;</p></td>
                <td>
                    <img src="images/layout1_11.jpg" width="16" height="100%" alt="" />
                </td>
            </tr>
            
            <tr>
                <td>
                    <img src="images/layout1_12.jpg" width="16" height="19" alt="" />
                </td>
                <td>
                    <img src="images/layout1_13.jpg" width="388" height="19" alt="" />
                </td>
                <td>
                    <img src="images/layout1_14.jpg" width="16" height="19" alt="" />
                </td>
            </tr>
        </table>
    </tr></td>
    <tr><td>
        <table id="Table 1C" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                <img src="images/layout1_15.jpg" width="16" height="37" alt="" />
                </td>
                <td>
                <img src="images/layout1_16.jpg" width="388" height="37" alt="" />
                </td>
                <td>
                <img src="images/layout1_17.jpg" width="16" height="37" alt="" />
                </td>
            </tr>
    </table>
    </p>
    </center>
    </body>
    </html>
    Here is a screenie of an explaination:

    www.fadedelement.com/misc/pic.jpg

    Hope this helps.

    ~Philip
    Last edited by creativeFuzion; February 12th, 2006 at 08:56 PM.

  3. #3
    Vexir's Avatar
    4,185
    posts
    Coming and going.
    Mmm thanks. Damnit, changing that shadow will screw up the width..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012