Convert Table to CSS

N

nightstar

Hello,

I have been working with CSS for some little time now and have a
conversion that needs to be done. We are supposed to convert (to divs)
a table very similar to:

<table width="100%">
<tr>
<td>Header Left</td>
<td>Header Center</td>
<td>Header Right</td>
</tr>
<tr>
<td colspan="3">Section 1</td>
</tr>
<tr>
<td colspan="2">Section 2</td>
<td>Section 3</td>
</tr>
<tr>
<td>Footer Left</td>
<td>Footer Center</td>
<td>Footer Right</td>
</tr>
</table>

I have been working on this for a couple hours now and seem to be
getting major overlapping on the Y axis. Each row is generated via php
and database and can be a dynamic height (I believe this is where my
issue is). I would appreciate it if someone could whip up a quick css
file. I know widths are very easiy controled so im not concerned with
that. It was recommended by the boss to use as much absolute
positioning as possible but I do not believe it can be done not knowing
the height of each row.

Thank you very much and Im looking forward to some good insight as I
have looked at numerous sites and templates and still have issues.
 
C

Chris Beall

Hello,

I have been working with CSS for some little time now and have a
conversion that needs to be done. We are supposed to convert (to divs)
a table very similar to:

<table width="100%">
<tr>
<td>Header Left</td>
<td>Header Center</td>
<td>Header Right</td>
</tr>
<tr>
<td colspan="3">Section 1</td>
</tr>
<tr>
<td colspan="2">Section 2</td>
<td>Section 3</td>
</tr>
<tr>
<td>Footer Left</td>
<td>Footer Center</td>
<td>Footer Right</td>
</tr>
</table> (snip)
Thank you very much and Im looking forward to some good insight as I
have looked at numerous sites and templates and still have issues.
nightstar,

It's late and I'm tired and I haven't tested this, but it may give you a
starting point:

<div>
<div style="float: left; width: 33%">
Header left
</div>
<div style="float: left; width: 33%">
Header center
</div>
<div style="float: left; width: 33%">
Header right
</div>
</div>
<div style="clear: all"> (or is it "both"? One of them is deprecated)
Section 1
</div>
<div style-"clear: all">
<div style="float: left; width: 66%">
Section 2
</div>
<div style="float: left; width: 33%">
Section 3
</div>
</div>
<div style="clear: all">
<div style="float: left; width: 33%">
Footer left
</div>
<div style="float: left; width: 33%">
Footer center
</div>
<div style="float: left; width: 33%">
Footer right
</div>
</div>

Of course I've made some assumptions about the content and what physical
relationships need to be preserved. A URL pointing to the current page
would be a help.

Chris Beall
 
T

Toby Inkster

Chris said:
<div style="clear: all"> (or is it "both"? One of them is deprecated)

style="clear:both". style="clear:all" is not deprecated -- it was never
valid to begin with.
 
C

Chris Beall

Toby said:
Chris Beall wrote:




style="clear:both". style="clear:all" is not deprecated -- it was never
valid to begin with.
Toby,

"both" it is, then. I must've dreamed the other one.

Anyway, with "both" I tested what I posted earlier and it works as I
intended. Whether it meets the requirements of the OP I don't know...

Chris Beall
 
Joined
May 15, 2011
Messages
1
Reaction score
0
Hello
i want convert table to css , but i cant
can you help me?

<tr>
<td colspan="2" class="tool">
<table width="99%" cellpadding="3" cellspacing="0" border="0">
<tr>
<td align="right" style="font-size: 8pt;">
<a href="<?=$url?>">صفحه نخست</a> &nbsp; | &nbsp;
<a href="<?=$url?>/pages"><?=$set["extra_page"] ? $set["extra_page"] : "صفحات اضافي"?></a> &nbsp; | &nbsp;
<a href="<?=$url?>/search.html">جستجوی پیشرفته</a> &nbsp; | &nbsp;
<a href="<?=$url?>/contact.html">تماس با ما</a> &nbsp; | &nbsp;
<a href="<?=$url?>/meta/sitemap.html" target="_blank" title="Sitemap">نقشه سایت</a> &nbsp; | &nbsp;
</td>
<td align="left" valign="top" style="padding-top:4px;">
<a title="RSS" class="meta" target="_blank" href="<?=$url?>/meta/rss.xml">RSS</a>
<a title="Sitemap" class="meta" target="_blank" href="<?=$url?>/meta/map.xml">SITEMAP</a>
</td>
<td align="left"><form action="<?=$url?>/search.html" method="post">
<input name="q" type="text" class="search" size="30" value="<?if(@trim($_POST['q'])){echo $_POST['q'];}else{echo "نام محصول را اینجا وارد کن...";}?>" onclick="value=''"/><input type="submit" value="جستجو" class="search" title="Search"/><input type="hidden" name="db" value="all"/></form></td>
</tr>
</table>
</td>
</tr>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top