Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

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