Forum Moderators: not2easy

Message Too Old, No Replies

Line of 100% as link.

I used 'display:block' But did not work

         

romzinho2k7

6:57 am on Apr 11, 2006 (gmt 0)

10+ Year Member



People, I am new here in CSS's Forum.... I am with a small problem and would like their help

I have a table with some options. It would like that this whole table was a link ( I tried to use in css "display:block" ) but did not work.

The table is this way:

<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="2%" class="Ver12">ID</td>
<td width="2%" class="Ver12">S</td>
<td width="26%" class="Ver12">name</td>
<td width="42%" class="Ver12">message </td>
<td width="14%" class="Ver12">date</td>
<td width="14%" class="Ver12">answers</td>
</tr>
</table>

Could they help?

OBS: Kind, it would like that the whole table was a link, in other words, in anywhere of this table where the user put the mouse would be a link, so much in the parts writings as in the parts not writings.

I am doing a site for a customer and he wants the site be done in table because his workers do not understand anything of CSS, because of this he wants most site done in tables. Because of this it has to be with these tables that I passed. In case it are impossible to do this way, in tables, ae can be in CSS same, but only in last case.

If someone can help, it would get very thankful.

Thank you very much at once by the help.

Setek

7:25 am on Apr 11, 2006 (gmt 0)

10+ Year Member



If you want the entire cell to display as a link, it would be helpful if you had an anchor tag in there, then work from there.

HTML:


<table>
<tr>
<td><a href="#">test</a></td>
</tr>
</table>

CSS:

table tr td { padding: 0px; }
table tr td a { display: block;
padding: 10px; }

Alternatively, you can use javascript onclick events for it:

HTML:


<table>
<tr>
<td onclick="document.location.href = 'http://www.webmasterworld.com/';">test</td>
</tr>
</table>

CSS:

table tr td { padding: 10px;
cursor: pointer; }

I recommend the one with anchors, as it's more semantically correct :)

romzinho2k7

7:35 am on Apr 11, 2006 (gmt 0)

10+ Year Member



Hey

Would not he have how to do it use other name to without being table? Why if not all the tables are affected. Do anything to put in the ID of the table for example?

Thanks

Setek

7:52 am on Apr 11, 2006 (gmt 0)

10+ Year Member



If you want it just for the one table, on the one page, then yes, use an id.

If you want it to be used on -particular- tables on the one page, use a class.

The code I drew was a general outline of a concept, the details are left up to you to sort out :)

romzinho2k7

9:10 pm on Apr 11, 2006 (gmt 0)

10+ Year Member



Hey.

And how Could I do that 100% with CSS? Kind, using div.... How could create columns as the ones that did I create in table?

Thanks

Setek

11:09 pm on Apr 11, 2006 (gmt 0)

10+ Year Member



There are several ways to do it... If you're looking for 'columns' then you can do the three-part div sort of way, where:

<div id="container">
<div id="columnOne">
columnOne
</div>
<div id="columnTwo">
columnTwo
</div>
<div id="columnThree">
columnThree
</div>
<br style="clear:both;" />
</div>

With:

div#columnOne, div#columnTwo, div#columnThree { width: 33%;
float: left; }

That style of things, but do remember with percentage widths you'll run into problems with IE vs. standards compliant browsers.

romzinho2k7

12:16 am on Apr 12, 2006 (gmt 0)

10+ Year Member



Thank you very much!

I am starting to study CSS now and a day intend to do a whole site in CSS.

Thanks