Forum Moderators: not2easy

Message Too Old, No Replies

tables to css

tables

         

damara23

9:34 pm on Jun 24, 2004 (gmt 0)

10+ Year Member



I want to position my current table but using regular html br and p lines aren't helping. My table is 103 pixel width, col -1, rows - 4, 1st cell height - 51, the following 3 cell heights - 21

can someone transfer that into css for me please.
to view my positioning problem, please email me.
<No specifics, thanks. See TOS [webmasterworld.com]>

[edited by: DrDoc at 12:53 am (utc) on June 25, 2004]

ktwilight

12:47 am on Jun 26, 2004 (gmt 0)

10+ Year Member



can you please post a snippet of the revelant codes?

TheBlueEyz

7:43 pm on Jun 26, 2004 (gmt 0)

10+ Year Member



Woohoo, a chance to flex my budding CSS skills.

Here's something for you to think about:

The following HTML elements are BLOCK LEVEL elements:

<hX>
<p>
<ul>
<li>
<div>
<a> (default inline but you can control its behavior)
<span> (same)

Now, why do I mention this?

When I was using tables, my old habit of making a menu was to do the following:

<table border="1">
<tr><td>Menu1</td>
<td>Menu2</td>
<td>Menu3</td>
</tr>
</table>

Here's that same menu in CSS:

<ul>
<li>Menu1
<li>Menu2
<li>Menu3
</ul>

With the following style definitions:

ul { margin: 0;}
li { display: inline; border:1px solid #000;}

What does this do?

The margin:0; on the ul element makes the UL stop breaking lines (you know the default behavior, how you have a space above the list?).

The display:inline; part makes each list item stop being on its own line.

The border declaration sets a border around each LI - all BLOCK LEVEL elements! They're little blocks, that's right! And so they actually can look like their own little <td>!

The inline declaration makes it so they nestle up next to each other.

Cool huh? Then you can set whatever heights and widths you want on each of them, with a little bit more CSS.

createErrorMsg

7:56 pm on Jun 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



damara, Welcome to Webmaster World!

Unfortunately, it's difficult to know exactly what you want help with without, as ktwilight said, some code snippets. Are you looking to replace the table with css, or to place the table somewhere on your page with css?