Jump to content


Photo

Turning 2 rows/columns into CSS?


  • Please log in to reply
2 replies to this topic

#1 extrovertive

extrovertive
  • Members
  • PipPipPip
  • Advanced Member
  • 235 posts

Posted 09 August 2006 - 06:33 AM

If you here

http://tutor.populateme.com/2b/

Under the navigation bar and betwee the "Resources" section is one big table. It holds two columns and two rows. Top-left = Find a tutor, top-right = Flash, bottom-left = newsletter, bottom-right = intro text.

Here's the code for the table with content removed:



/////content style
table.contenthome
{
	background-color: #FFFFFF;
	width: 730px;
	margin-left:auto;
	margin-right:auto;
	border-right: 1px solid #003399;
	border-left: 1px solid #003399;	
}

///////

<table cellpadding="5" cellspacing="10" class="contenthome">
        <tr valign="top">
       <td width="411" valign="top">
 <!-- Find A Tutor -->
</td>
    <td width="400" class="vertical">
<!-- Flash -->
</td></tr>

<tr valign="top"> 
          <td> 
		   <!-- Newsletter --> 
</td>
<td>
<!-- Intro text -->
</td>
        </tr>
</table>

I know basic CSS but in terms of making layouts such as the way I would use tables to make number columns and rows, I am bit confused.

#2 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 09 August 2006 - 12:29 PM

Check this link out: http://www.neuroticw...ayout/index.php

there is also a 3 column here : http://www.neuroticw...ayout/index.php

all you have to do is add <div style="clear:both;">&nbsp;</div> after your second "column" then this will be your second row.


Hope this helps,
-Chris

#3 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 09 August 2006 - 12:33 PM

Check this link out: http://www.neuroticw...ayout/index.php

there is also a 3 column here : http://www.neuroticw...ayout/index.php

all you have to do is add <div style="clear:both;">&nbsp;</div> after your second "column" then this will be your second row.


Hope this helps,
-Chris


very good point, but i would encourage you to use this idea in leu of the clear: both option: in your top div that holds your first "row," simply apply the clearfix class from Position is Everything. this way, your top row clears everything below it by itself, and you can also view it properly in all browsers. other types of clearing can sometimes cause issues in cross-browser situations.

good luck
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users