change table to css - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

change table to css

change table to css

meanweaver

12:04 am on Jul 29, 2004 (gmt 0)

10+ Year Member

Need a little guidence, I have an existing site that has many nested tables, I want to replace these with css if i can, Now i know that some how need to give the text a background and margin but cant work out how to do it and also give it a width and height, below is one of the nested tables, if someone could give me an example replacing the table dimensions with css that would give me the info i need to change the rest, I tried using a div but could only do it if i used postition absolute, The table it is inside of is 600px wide but centered on the page. just cant work out how this can be done.

<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" bgcolor="#000066"><h3><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif"><em><strong>Are
you really getting a good deal?<br>
</strong></em></font><em><font color="#FF9900" face="Verdana, Arial, Helvetica, sans-serif">Or
a good deal of bother?</font></em></h3></td>
</tr>
</table>

Regards Ian

iamlost

4:06 am on Jul 29, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

The following validates xhtml 1.0 strict and css 2.

It approximates your <table>. Adjust to suit.

Note: It can be done without using the wrapper #your-div but is much easier to make cross-browser compatible as shown. Especially if part of multiple nested <div>s or <table>s.

CSS:

html, body {
width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
}
#your-div {
width: 100%; height: 100px; padding: 0; margin: 0; border: 0;
background: #006;
}
#your-div h3 {
padding: 1em 0 0 0; margin: 0; font: 1.25em Verdana, Arial, Helvetica, sans-serif; text-align: center;
}
.fff {color: #fff;}
.f90 {color: #f90;}

HTML:

<div id="your-div">
<h3><em class="fff"><strong>Are you really getting a good deal?</strong></em>
<br />
<em class="f90">Or a good deal of bother?</em></h3>
</div>

ronin

10:32 am on Jul 29, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

<h3><em class="fff"><strong>Are you really getting a good deal?</strong></em>
<br />
<em class="f90">Or a good deal of bother?</em></h3>

You could slim this down a little further by inserting:

font-weight:bold;
font-style:italic;

in the stylesheet and writing:

<h3>
<div class="first">Are you really getting a good deal?</div>
<div class="second">Or a good deal of bother?</div>
</h3>

The divs, being block-level elements, will be separated by a line break.

meanweaver

7:33 pm on Jul 29, 2004 (gmt 0)

10+ Year Member

Thankyou very much for your replys, still getting to grips with positioning with css, so thankyou for all help, will now put it into practice and hopefully remember it.

Regards Ian

meanweaver

8:40 pm on Jul 29, 2004 (gmt 0)

10+ Year Member

Seem to be having a few probs, the text seems to aligned left, and the 2 lines seem to be at the bottom of the blue background, and the your-divh3 example will not work at all, treid playing around with it but only made it worse, but moving in the right direction.

Regards Ian

iamlost

8:53 pm on Jul 29, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I ran my code in most Win browsers - did you run code just as given?

What browser/OS?

What doctype are you using?

If you plugged it back in a nested bunch other code might be triggering problems.

I suggest that you start from the outside in, top down (which you may well be doing). Replace one table at a time and debug as you go.

meanweaver

9:21 pm on Jul 29, 2004 (gmt 0)

10+ Year Member

ok got it sorted, I was just putting it in the head od the file, but as soon as i put it in the external css it started to work, it is now useable but to be perfect i need to bring the bottom line up about 5px, tried changing the margins which did move it up but then the distance increased between the lines making the overall height to much, also i can kind of get my head round the code which have div id's, but how does this bit work

html, body {
width: 100%; height: 100%; margin: 0; padding: 0; border: 0;

it has no id so cant work out how that works, sorry if this is overlooking something simple but new to type of css.

Thanks again Ian

iamlost

9:43 pm on Jul 29, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

html, body {
width: 100%; height: 100%; margin: 0; padding: 0; border: 0;}

<html> and <body> are inherent to html. Including these elements and attributes ease some cross browser differences. I usually also include: font-size: 100%;

Leave them out and take a look at the differences between IE, Opera, and Moz. Just leveling the playing field before starting.

Glad to read things are getting there. The road to CSS is a twisty and bumpy one but well worth the trip!

ronin

10:39 am on Jul 30, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Whoops. You're right, those <div>s I suggested won't validate. Better to use <span>s and style them with


display:block;

Jumper Willow

10:31 am on Jul 31, 2004 (gmt 0)

10+ Year Member

Instead of <span>s with display:block; wouldn't <p>'s validate as well. I know it's probably not "correct CSS" but i'm still learning too.

ronin

11:21 am on Jul 31, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Well... we're looking at a Heading 3 which needs to contain two block level elements. I thought headings could contain multiple block-level elements - <p> would be another example - but it looks from the w3c validator that they can't.

So it looks like the best way to get around it is to have the Heading 3 contain two inline elements... and then style them as block-level.