Is there a CSS equivalent to this table?

Forum Moderators: not2easy

Message Too Old, No Replies

Is there a CSS equivalent to this table?

I use table to align three items

wu1821

2:11 am on Oct 9, 2008 (gmt 0)

Hi, I am new to CSS. I have been trying to convert this table into CSS, but haven't had any success. Can you help? Thanks.

This table occupies a section of the page. There is nothing to its left or right.

<TABLE align="center">
<TR>
<TH><A HREF="a.php">link1</A></TH>
<TH><A HREF="b.php"><img src="me.jpb" /></A></TH> /* img size usually is 601x400 or 400x601 */
<TH><A HREF="c.php">link2</A></TH>
</TR>
</TABLE>

alt131

10:42 am on Oct 9, 2008 (gmt 0)

Hi wu1821,

This is one way:

In your css:

div#mydiv {
text-align:center;
font-weight:bold;
}
div#mydiv * {
vertical-align:middle;
}

In your xhtml:

<div id="mydiv">
<a href="a.php">link1</a>
<a href="b.php"><img src="me.jpg"/></a>
<a href="c.php">link2</a>
</div>

(Watch for inherited styles that may affect the elements)

BadBoyMcCoy

10:54 am on Oct 9, 2008 (gmt 0)

swap this for your html

and put this on your stylesheet

div#table {
width:200px;/*you can change this to whatever width you need your table to be*/
}
div.tablecell {
width:33%;
float:left;
}

if you don't have an external stylesheet you can put it in before your closing html tag </html>
If you do put it in the head of your page then make sure you put it within the style tag

/*CSS Goes here*/

</style>

The div with the id of "table" is acting as a container for the 3 divs within in it. the inner tables are floated to the left so that the line up, and are given a width of 33% so that they aren't too wide for the container.

hope this helps

wu1821

1:55 pm on Oct 9, 2008 (gmt 0)

Thank you very much. That worked beautifully.

I noticed in the stylesheet there usually is a p {whatever}. If I want three p styles, one for aligning to the left, one for aligning to the center, and one for aligning to the right. How would you do that?

swa66

4:48 pm on Oct 9, 2008 (gmt 0)

You can do things like

HTML:


  <p>average joe paragraph</p>
  <p class="warning">Take care here!</p>
  <p class="quote">2B or not 2B</p>

CSS:
First let's style all paragraphs:


p {
  padding: 5px;
  margin: 0;
  font-family: verdana, arial, helvetica, sans;
}

Anything else is also possible, it's just an example.

Next style the warning red, pinkish background and bold text.
Also we can add text in front of the para graph (IE6 won't display it, but that's "graceful degradation")


p.warning {
  color: red;
  font-weight: bold;
  background-color: #fcc;
  margin: 5px;
}
p.warning:before{
  content: "Warning: ";
}

Notice how the :before part inherits the styling from the main warning class.

For quotes, we'll change a few things on that style to add a graphic element to it that's in the end just text:


      p.quote {
        font-style: italic;
        color: #666;
        background-color: #eee;
        border: 1px solid #666;
        margin: 5px;
      }
      p.quote:before {
        content: '" ';
        font-size: 300%;
        font-family: "century schoolbook", serif;
      }

Putting it all together:


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Untitled Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      p {
        padding: 5px;
        margin: 0;
        font-family: verdana, arial, helvetica, sans;
      }
      p.warning {
        color: red;
        font-weight: bold;
        background-color: #fcc;
        margin: 5px;
      }
      p.warning:before{
        content: "Warning: ";
      }
      p.quote {
        font-style: italic;
        color: #666;
        background-color: #eee;
        border: 1px solid #666;
        margin: 5px;
      }
      p.quote:before {
        content: '" ';
        font-size: 300%;
        font-family: "century schoolbook", serif;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <p>average joe paragraph</p>
      <p class="warning">Take care here!</p>
      <p>average joe paragraph</p>
      <p class="quote">2B or not 2B</p>
      <p>average joe paragraph</p>
    </div>
  </body>
</html>

BadBoyMcCoy

4:53 pm on Oct 9, 2008 (gmt 0)

In the stylesheet

p.textalignleft {text-align:left;}
p.textaligncenter {text-align:center;}
p.textaligncenter {text-align:right;}

the html

however, a better way of doing it would be to not use the <p> tag and simply apply the classes to the parent divs like so

In the stylesheet

.textalignleft {text-align:left;}
.textaligncenter {text-align:center;}
.textaligncenter {text-align:right;}

and the html

You can apply more than one class to a tag however you can't with id's
so <div id="table greenbg"> would be wrong
but <div id="table" class="greenbg redborder"> would be ok

Hope i explained that ok

wu1821

5:27 pm on Oct 9, 2008 (gmt 0)

Wonderful solution. Thanks a lot.

wu1821

6:26 pm on Oct 9, 2008 (gmt 0)

The text-align: center works if I don't have other things in it.
p.aligncenter {text-align:center;}

When I add other attributes, it doesn't align to the center anymore.

p.aligncenter {
background-color: #C0C0C0;
color: navy;
font-size: 100%;
text-align:center;
padding: 4px;
font-family: verdana, arial, helvetica, sans;
}

BadBoyMcCoy

10:38 am on Oct 10, 2008 (gmt 0)

when you say add other attributes do you mean adding other attributes to the <p> tag? the <p> tag should only contain text. also it wont allign anything other than text. Or do you mean when you add more css to the p.aligncenter class?

I've tried out the css you just pasted and it seems to be working ok. do you want to paste the html aswell as any other classes that might be interfering with it

wu1821

1:38 pm on Oct 10, 2008 (gmt 0)

I was expecting the following to have the picture in the middle, one link on the left, and one link on the right, all properly lined up; but the link on the right is no where to be seen.

<div id="bigbox">
<p class="leftcol"><a href="ccbill.php">Join</a></p>
<A HREF="DVDinfo.php?page=1&video=<?echo $firstFilm;?>" class="centercol"><IMG SRC="../images/<?echo $firstFilm;?>.jpg" title="Hi, Thanks for the visit. May I entertain you?" alt="<?echo $firstFilm;?>.jpg"></A>
<p class="rightcol"><a href="webmaster.php">Webmaster</a></p>
</div>

#bigbox {
display: block;
width: 720px;
height: 720px;
background-color: #808080;
margin-left: auto;
margin-right: auto;
}
#bigbox .leftcol {
position: absolute;
width: 100%;
text-align: left;
}
#bigbox .centercol {
position: absolute;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#bigbox .rightcol {
position: absolute;
width: 100%;
text-align: right;
}

BadBoyMcCoy

2:42 pm on Oct 10, 2008 (gmt 0)

</style>

</head>

<body>

<A HREF="DVDinfo.php?page=1&video=<?echo $firstFilm;?>" class="centercol"><IMG SRC="../images/<?echo $firstFilm;?>.jpg" title="Hi, Thanks for the visit. May I entertain you?" alt="<?echo $firstFilm;?>.jpg"></A>

<p class="rightcol"><a href="webmaster.php">Webmaster</a></p>

</div>

</body>
</html>

You were way off before, you gave each of the columns a width of 100% which meant they all had widths of 720px which they got from #bigbox. Also you were positioning them absolutley which takes them out of the document flow, so essentialy you were placing each of the div's over each other.

Ive added background-colors as it is a very handy way of seeing how things are being positioned on the page

Tell me how u get on

wu1821

3:31 pm on Oct 10, 2008 (gmt 0)

Thank you for the correction. I didn't start by using absolute, of course. But, when I saw everything was moving to the left, I tried the absolute and expanded them to 100%. I neglected to remove them. The difference was I didn't use float: left. Ideally, I would have preferred not having to specify the dimension because the images are of various sizes. With table that wasn't a problem, the browser adjust the <TD> width for me. But with CSS, looks like I don't have that freedom. Thank you again.

Patrick

BadBoyMcCoy

3:51 pm on Oct 10, 2008 (gmt 0)

Yea unfortunatly sometimes somethings can be done easier with tables (But very rarely)

Also a note on using floated elements within a container you will need to apply the "clearfix" css to your your div#bigbox because it will collapse in firefox and a few other browsers unless you are planning on giving it a set height (which you have, I just realised 'height:720px;') I could try and explain clearfix to you but, im sure hundreds of people have already given a much better explanation on the web. Just type "CSS Clearfix tutorial" into a search engine.

I hope this topic hasn't put you off css. Its really is helpful to learn there is just a bit of a learning curve. using css will get easier the more you learn

wu1821

4:06 pm on Oct 10, 2008 (gmt 0)

I am aware of the <div class="clear"></div>. Thank you. No, I am going to use CSS from now on, and say good-bye to tables. I may look like an idiot at the moment, despite I have been doing cgi programming for 11 years, but CSS is here to stay and is a great way to style a page. Again, thank you for your time.

BadBoyMcCoy

4:15 pm on Oct 10, 2008 (gmt 0)

The clear fix i was reffering to was

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

<p class="rightcol"><a href="webmaster.php">Webmaster</a></p>

</div>

It's cleaner, I was using <div class="clear"></div> not too long ago, untill i discovered the cleaner way.

Your welcome for my time, tbh I never usually never post on forums, but i got bored the other day and signed up. Glad I could be helpful

alt131

4:18 pm on Oct 10, 2008 (gmt 0)

I am aware of the <div class="clear"></div>. Thank you. No, I am going to use CSS from now on, and say good-bye to tables. I may look like an idiot at the moment, despite I have been doing cgi programming for 11 years, but CSS is here to stay and is a great way to style a page. Again, thank you for your time.

Well, it is a personal opinion, but no one looks like an idiot from here ;)

One thought though - the code seems awfully "over-engineered" to me. The change from using tables for layout requires a change of mind set - perhaps even more of a leap for someone with a solid background in programming. Like programming, in css more is a good abbreviation for "more opportunity for complication" ;)

My earlier contribution reproduced the layout in your example exactly. It would need modification to look more beautiful - but is there are reason it didn't provide a place to start?

wu1821

4:44 pm on Oct 10, 2008 (gmt 0)

Actually, I was using your contribution to do the page, and McCoy's to align them. I am still not fluent in CSS enough to simplify them. I noticed the best codes are usually the shortest codes too. What I was actually try to accomplish was using tables within table that I used to align them. The

<html><head></head><body>
<table summary="3" width="750" border="1" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px; ">
<tr>
<th height="24" bgcolor="#A0A0A0">
<table summary="3.1" width=100%>
<tr>
<th><a href="ccbill.php">Join</a></th>
<th>
<A HREF="DVDinfo.php?page=1&video=<?echo $firstFilm;?>"><IMG SRC="../images/<?echo $firstFilm;?>.jpg" title="Hi, Thanks for the visit. May I entertain you?" /></A>
</th>
<th><a href="webmasters.php">Webmasters</a></th>
</tr>
<tr><th></th>
</tr>
<tr>
<td></td>
<th bgcolor="#D0D0D0"><font size=+1 color=#251807>24-hour support hotline: (512)927-2448</font></th>
<td></td>
</tr>
</table>
</th>
</tr>
<tr>
<td bgcolor=#404040><font face="Lucida Handwriting"><font size="3" color="#CCCC99">
Now showing in high definition (1280x720).
</font></font></td>

</tr>
<tr bgcolor="#202020">
<th><a href="#"><img src="1231023.jpg" title="#" /></a></th>
</tr>
</table>

<table summary="4" width="750" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:10px; ">
<tr>
<th><a href="../videos/">Members Login</a></th>
<th>
<FORM action="FreeTour.php" method="get">
<INPUT type="submit" value="Free Tour (click me)" style="font-size: 18pt; color: #FFFFFF; background:#cc5500">
</FORM>
</th>
<th><A HREF="webmasters.php">Make Money</A></th>
</tr>
</table>
</body></html>

[edited by: SuzyUK at 4:19 pm (utc) on Oct. 17, 2008]
[edit reason] examplified some text ;) [/edit]

SuzyUK

4:26 pm on Oct 17, 2008 (gmt 0)

not sure if you took the advice to use 'clearfix' or not, but just a heads up. You don't always need it and you really really do not need it as quoted above:

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

the end 2 rules are totally not necessary, it's all doing the same thing.. I thought I'd done a post on this here, but of not perhaps it's time to clean the clearfix before it gets ridiculously complex :)

please anyone preferring to use the above clearing method, please don't use that version of it anymore