CSS Newbie--Converting HTML Tables

**skolya** · 02-26-2003 11:25 AM

Since I didn't know CSS when I built my site, it has multiply nested tables and is a real bloated mess that's exceeding my space on my host server. Can anybody explain to me--and feel free to treat me like a dummy--exactly how I go about creating the same effects using CSS so I can strip out the bloat?
Here's a typical content page URL:

www.jerizjoolz.com/earrings.html

**AdamGundry** · 02-26-2003 12:42 PM

You'd probably best look at a CSS tutorial, such as the one at W3Schools:
http://www.w3schools.com/css/default.asp

Adam

**skolya** · 02-26-2003 12:54 PM

THANK YOU! I'd forgotten the URL for the w3c tutorials and w3c.org doesn't tell you where they are!

**Charles** · 02-26-2003 01:18 PM

About mid-page at http://www.w3.org/Style/CSS/learning you will find a link to the W3Schools. And while this is further proof that everything you need to know can be found at the W3C site and that you really ought to spend your time there and not here, I'm not very impressed with the W3Schools.

**AdamGundry** · 02-26-2003 03:18 PM

From what I've seen of the site, it seems quite useful - may I ask why you aren't impressed with it?

Adam

**Charles** · 02-26-2003 03:33 PM

Well, let's start with the basics. You can see their example of a basic HTML page at http://www.w3schools.com/html/tryit....=tryhtml_basic. Notice that all of the tags that they use are optional and they've neglected all of the manditory stuff.

**spufi** · 02-26-2003 04:19 PM

Yeah, I noticed this too and I thought it was kind of odd that the people known for setting the web standards don't even show valid code when they teach you how to code.

**Charles** · 02-26-2003 04:30 PM

Originally posted by spufi
Yeah, I noticed this too and I thought it was kind of odd that the people known for setting the web standards don't even show valid code when they teach you how to code.

If I'm not mistaken, the W3Schools are not related to the W3C. They just use the name.

**nkaisare** · 02-26-2003 04:38 PM

Originally posted by skolya
www.jerizjoolz.com/earrings.html

You may want to do something like this:

Code:

<body>
<h1><img src="images/Jeri%27z_JoolzG.gif" alt="Jerry's Joolz"></h1>

<h2><img src="images/earrings.gif" alt="Earrings"></h2>

<div>
    <!-- Whatever other blah blah on the top -->
</div>

<div class="image2right">
    <img src="Jewelry/image1.jpg" alt="Description here">
    <ul>
        <li>Blah Blah Blah</li>
        <li>Item E12</li>
        <li>Pay by paypal or Order by email</li>
    </ul>
</div>
<div class="image2left">
    <img src="Jewelry/image2.jpg" alt="Description here">
    <ul>
        <li>Blah Blah Blah</li>
        <li>Item E16</li>
        <li>Pay by paypal or Order by email</li>
    </ul>
</div>
<!-- ... so forth -->

In the CSS, include the following:

Code:

body { background: #7E5E61
    url('images/bggoldtonedkmauve.jpg') repeat-y;
    margin-left: 200px }
h1, h2 { text-align: center; /* center align hack for IE */
    left: auto; right: auto; /* true center align */ }
div.image2right { clear:both }
div.image2left { clear: both }
div.image2right img { float: right; border: 0 }
div.image2left img { float: left; border: 0 }

Hope this helps.

**skolya** · 02-27-2003 10:44 AM

Yes, that is EXTREMELY helpful! I went thru the w3cschools tutorial and it showed me some basic stuff and got me comfortable with CSS syntax, but as far as the complex stuff. forget it! The site will ultimately be about 25 pages and the properties will basically be the same for every page: Can I put all that in a single CSS BODY element (i.e., background, the H1 image, font, font color, link colors, and so forth)?
Also, where do I put the whole PayPal form? Can I make a single one in CSS that will automatically be inserted at the end of each item description?
Tnx,
skolya

**skolya** · 02-27-2003 10:51 AM

I forgot to mention that a critical element of the design is having variable size <td>s that make the text in one cell align flush against the image in the other cell, with all the images being different sizes, and this has to alternate like so:

IMG | TEXT
TEXT | IMG

That's how I wound up with this mess of tables; it seemed to be the only way to get it to align without big gaps everywhere.

**spufi** · 02-27-2003 10:58 AM

**nkaisare** · 02-27-2003 11:12 AM

Spufi has answered your first question regarding where to put your CSS.

How the layout for your page will work is as follows:
"float: left" tells the browser to float the specific block (in this case <img> within <div class="image2left">) to the left. Likewise with "float: right".

"clear: both" tells the browser to clear the space on both sides of the float. Thus, the next div will start at the bottom of previous div.

When you alternate "image2left" and "image2right" divs, you get the alternate pattern that you are looking for.

Code:

Text Text -----------
Text Text |         |
Text Text |  Image  |
          |         |
          -----------

----------- Text Text
|         | Text Text
|  IMAGE  | Text Text
|         |
-----------

**skolya** · 02-27-2003 05:45 PM

The div/float thing works fine most of the time, but there are some other problems happening here that I've been fooling with all day and getting nowhere:
A. When the images are long and skinny, the text appears underneath them instead of beside them;
B. The text shouldn't be indented from the left margin;
C. The font attributes are the same for all the text, so I put them all in the BODY element and everything but the font-family works--????
D. As you can see, the form for the Paypal/Order by Email element is ALL screwed up;
E. Some of the images are hyperlinked to larger versions of themselves, but the "Click to enlarge" text is showing up in the wrong place (NOTE: Some of the pages have two hyperlinks associated with each image, which I can foresee will be an even bigger problem).
Here's my test URL:
www.jerizjoolz.com/braceletsCSS.html

Tnx!

**nkaisare** · 02-27-2003 09:15 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <title>Jeri'z Joolz, Antique, Vintage, and Collectible Costume Jewelry--Bracelets</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
    body {color: #c4a19f; font-family: BruceOldStyle_BT, sans-serif; font-size: 18px;
    background: #7E5E61 url('images/bggoldtonedkmauve.jpg') repeat-y;
    margin-left: 120px;}
    a {color: #ffffce}
    ul {list-style-type: none}
    h1, h2 {text-align: center; /* center align hack for IE */
        left: auto; right: auto; /* true center align */ }
    h3 {text-align: left}
    img {border: 0}
	
    div.image2right {clear:both}
    div.image2left {clear: both}
    div.image2right div {float: right; border: 0; margin: 5px;}
    div.image2left div {float: left; border: 0; margin: 5px;}
  </style>	
</head>

<body>

<h1><img src="http://www.jerizjoolz.com/images/Jeri%27z_JoolzG.gif" alt="Jeri'z Joolz"></h1>
<h2><img src="http://www.jerizjoolz.com/images/earrings.gif" alt="Earrings"></h2>

<p>For more bracelets, see <a href="http://www.jerizjoolz.com/bargain.html">The Bargain Bin</a>, where everything is under $20!</p>

<h3><img src="http://www.jerizjoolz.com/images/signedpink30.gif" alt="Designer Signed"></h3>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <div style="display: none">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="payments@jerizjoolz.com">
		<input type="hidden" name="no_note" value="1">
		<input type="hidden" name="currency_code" value="USD">
		</div>
		
		<div class="image2right">
		    <div><img src="http://www.jerizjoolz.com/Jewelry/B9-copperbellcuff.jpg" width="200" height="96" alt="Copper Bell Cuff"></div>
			<ul>
			    <li>Native American style cuff by COPPER BELL</li>
				<li>Item B09</li>
				<li>Price: $38</li>
				<li><input type="image" src="https://www.paypal.com/images/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
				OR <a href="mailto:order@jerizjoolz.com"><img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"></a></li>
			</ul>
		</div>
		
		<div class="image2left">
		    <div><a href="http://www.jerizjoolz.com/Jewelry/B26-corowhiteenamelleaves.jpg"><img src="http://www.jerizjoolz.com/Jewelry/B26-corowhiteenamleaves.jpg" width="221" height="234" alt="Coro Grapevine"><br>Click to enlarge</a></div>
			<ul>
			    <li>Native American style cuff by COPPER BELL</li>
				<li>Item B09</li>
				<li>Price: $38</li>
				<li><input type="image" src="https://www.paypal.com/images/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
				OR <a href="mailto:order@jerizjoolz.com"><img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"></a></li>
			</ul>
		</div>
		
		<div class="image2right">
		    <div><img src="http://www.jerizjoolz.com/Jewelry/B12-florenzacameo.jpg" width="250" height="87" alt="Florenza Cameo"></div>
			<ul>
			    <li>Native American style cuff by COPPER BELL</li>
				<li>Item B09</li>
				<li>Price: $38</li>
				<li><input type="image" src="https://www.paypal.com/images/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
				OR <a href="mailto:order@jerizjoolz.com"><img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"></a></li>
			</ul>
		</div>
		
		<div class="image2left">
		    <div><a href="http://www.jerizjoolz.com/Jewelry/B17-whiteglassbeads.jpg"><img src="Jewelry/B17-whiteglassbeads.jpg" width="290" height="55" alt="White Glass Beads"><br>Click to enlarge</a></div>
			<ul>
			    <li>Native American style cuff by COPPER BELL</li>
				<li>Item B09</li>
				<li>Price: $38</li>
				<li><input type="image" src="https://www.paypal.com/images/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
				OR <a href="mailto:order@jerizjoolz.com"><img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"></a></li>
			</ul>
		</div>
		
		<div class="image2right">
		    <div><img src="http://www.jerizjoolz.com/Jewelry/B14-diamondvermeil.jpg" width="284" height="49" alt="diamond vermeil"></div>
			<ul>
			    <li>Native American style cuff by COPPER BELL</li>
				<li>Item B09</li>
				<li>Price: $38</li>
				<li><input type="image" src="https://www.paypal.com/images/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
				OR <a href="mailto:order@jerizjoolz.com"><img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"></a></li>
			</ul>
		</div>
</form>

</BODY>
</HTML>

Thread: CSS Newbie--Converting HTML Tables

Thread Tools

Display

CSS Newbie--Converting HTML Tables

CSS Tutorial

Re: CSS Newbie--Converting HTML Tables

PS

OK, so far so good, but ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions