three coulmns with image above two (dumb html question)

bdconnolly · Post by **bdconnolly** » Sun Oct 21, 2007 1:05 am

dumb html question:

trying to create a three column effect and I want to put an image above the two sidebar columns.

<table id="mainpane">
    <tr>
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
    </tr>
</table>

Suggestions?

Thanks in advance.

chickens · Post by **chickens** » Sun Oct 21, 2007 1:18 am

Switch to bulletproof and use CSS

Or this should do the trick

Code: Select all

<table id="mainpane">
	<tr>
		<td>&nbsp</td>
		<td colspan=2><img src="blah.jpg" alt="blah" />
    <tr>
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
    </tr>
</table>

Replace the image with the actual image you want to use and it should do the trick. You could also set the background to be that image if you so desire.

bdconnolly · Post by **bdconnolly** » Sun Oct 21, 2007 1:47 am

grazie.

bdconnolly · Post by **bdconnolly** » Sun Oct 21, 2007 3:11 am

I spoke too soon.

This basically is where I'm going:

Code: Select all

<table id="mainpane">
    <tr>
        <td id="content" valign="top">{$CONTENT}</td>
        <td>
{if $rightSidebarElements > 0}
	    <table>
                         <tr>
                                 <td>&nbsp</td>
                                 <td colspan=2>
                         </tr>
                         <tr> 
                                <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
                                <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
                         </tr>
                </table>
         </td>
     </tr>
</table>

But now above columns 2-3 on the right, there's about 40 px of empty space. How can I even out columns 1 with 2-3?

chickens · Post by **chickens** » Sun Oct 21, 2007 4:17 am

Do you have a link or screenshot of whats going on? I dont quite understand whats going on.

You are missing a </td> on the colspan section.

bdconnolly · Post by **bdconnolly** » Sun Oct 21, 2007 4:47 am

Can't leave it up as it's a live site. How this:

-----------
column 1
======= ----------- ------------
======= column 2 column 3

Can't seem to be able to make them all even.

carl_galloway · Post by **carl_galloway** » Sun Oct 21, 2007 8:49 am

Brian,

Let me know what you want and we can customise carl02 to your requirements. The code is entirely mine with no licensing restrictions. It's also css only, no tables.

bdconnolly · Post by **bdconnolly** » Sun Oct 21, 2007 2:18 pm

Thank you kindly Carl. But I think I all set. Here's what I did:

Code: Select all

<table id="mainpane">
<tr>
   <td id="staticpage" valign="top">{$CONTENT}</td>
   <td valign="top">
      {if $rightSidebarElements > 0}
             <table>
                      <tr>
                             <td style="padding-left: 10px" colspan="2" valign="top">
                                <script type="text/javascript">rss scroller</script>
                             </td>
                     </tr>
                     <tr>
                             <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
                             <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
                    </tr>
             </table>
   </td>
      {/if}
</tr>
</table>

A little klugie maybe? It does validate and seems to render okay. Thoughts?

carl_galloway · Post by **carl_galloway** » Sun Oct 21, 2007 2:25 pm

Seems to be exactly what you need, and if it works for you then go for it. Not sure how you plan to deal with cellpadding and cellspacing, but I recommend keeping these in the stylesheet to reduce overhead in the html.