/    Sign up×
Community /Pin to ProfileBookmark

CSS Newbie–Converting HTML Tables

Copy linkTweet thisAlerts:
Feb 26.2003

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:

[url]www.jerizjoolz.com/earrings.html[/url]

to post a comment
CSS

18 Comments(s) ↴

Copy linkTweet thisAlerts:
@AdamGundryFeb 26.2003 — You'd probably best look at a CSS tutorial, such as the one at W3Schools:

http://www.w3schools.com/css/default.asp

Adam
Copy linkTweet thisAlerts:
@skolyaauthorFeb 26.2003 — THANK YOU! I'd forgotten the URL for the w3c tutorials and w3c.org doesn't tell you where they are!
Copy linkTweet thisAlerts:
@CharlesFeb 26.2003 — [font=georgia]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.[/font]
Copy linkTweet thisAlerts:
@AdamGundryFeb 26.2003 — From what I've seen of the site, it seems quite useful - may I ask why you aren't impressed with it?

Adam
Copy linkTweet thisAlerts:
@CharlesFeb 26.2003 — [font=georgia]Well, let's start with the basics. You can see their example of a basic HTML page at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic. Notice that all of the tags that they use are optional and they've neglected all of the manditory stuff.[/font]
Copy linkTweet thisAlerts:
@spufiFeb 26.2003 — 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.
Copy linkTweet thisAlerts:
@CharlesFeb 26.2003 — [i]Originally posted by spufi [/i]

[B]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. [/B][/QUOTE][font=georgia]If I'm not mistaken, the W3Schools are not related to the W3C. They just use the name.[/font]
Copy linkTweet thisAlerts:
@nkaisareFeb 26.2003 — [i]Originally posted by skolya [/i]

www.jerizjoolz.com/earrings.html[/QUOTE]
You may want to do something like this:
<i>
</i>&lt;body&gt;
&lt;h1&gt;&lt;img src="images/Jeri%27z_JoolzG.gif" alt="Jerry's Joolz"&gt;&lt;/h1&gt;

&lt;h2&gt;&lt;img src="images/earrings.gif" alt="Earrings"&gt;&lt;/h2&gt;

&lt;div&gt;
&lt;!-- Whatever other blah blah on the top --&gt;
&lt;/div&gt;

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

In the CSS, include the following:
<i>
</i>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.
Copy linkTweet thisAlerts:
@skolyaauthorFeb 27.2003 — 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
Copy linkTweet thisAlerts:
@skolyaauthorFeb 27.2003 — 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.
Copy linkTweet thisAlerts:
@spufiFeb 27.2003 — <link rel="stylesheet" title="Default" media="screen" href="styles.css" type="text/css">

Incase you didn't know, you can use that in your <head> tag and have all your CSS code in a file named styles.css. This way when you use that line of code you bring in your CSS code to that page. Since you are doing 25 pages worth of a site with mostly the same design, this will save you a lot of time by doing it this way. Plus, it will cut down on the amount of code that goes into your HTML pages.
Copy linkTweet thisAlerts:
@nkaisareFeb 27.2003 — 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.
<i>
</i>Text Text -----------
Text Text | |
Text Text | Image |
| |
-----------

----------- Text Text
| | Text Text
| IMAGE | Text Text
| |
-----------
Copy linkTweet thisAlerts:
@skolyaauthorFeb 27.2003 — 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!
Copy linkTweet thisAlerts:
@nkaisareFeb 28.2003 — <i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Jeri'z Joolz, Antique, Vintage, and Collectible Costume Jewelry--Bracelets&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;style type="text/css"&gt;
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}

<i> </i>div.image2right {clear:both}
<i> </i>div.image2left {clear: both}
<i> </i>div.image2right div {float: right; border: 0; margin: 5px;}
<i> </i>div.image2left div {float: left; border: 0; margin: 5px;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

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

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

&lt;h3&gt;&lt;img src="http://www.jerizjoolz.com/images/signedpink30.gif" alt="Designer Signed"&gt;&lt;/h3&gt;

&lt;form action="https://www.paypal.com/cgi-bin/webscr" method="post"&gt;
&lt;div style="display: none"&gt;
&lt;input type="hidden" name="cmd" value="_xclick"&gt;
&lt;input type="hidden" name="business" value="[email protected]"&gt;
&lt;input type="hidden" name="no_note" value="1"&gt;
&lt;input type="hidden" name="currency_code" value="USD"&gt;
&lt;/div&gt;

<i> </i> &lt;div class="image2right"&gt;
<i> </i> &lt;div&gt;&lt;img src="http://www.jerizjoolz.com/Jewelry/B9-copperbellcuff.jpg" width="200" height="96" alt="Copper Bell Cuff"&gt;&lt;/div&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;Native American style cuff by COPPER BELL&lt;/li&gt;
<i> </i> &lt;li&gt;Item B09&lt;/li&gt;
<i> </i> &lt;li&gt;Price: $38&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;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!"&gt;
<i> </i> OR &lt;a href="mailto:[email protected]"&gt;&lt;img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"&gt;&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;

<i> </i> &lt;div class="image2left"&gt;
<i> </i> &lt;div&gt;&lt;a href="http://www.jerizjoolz.com/Jewelry/B26-corowhiteenamelleaves.jpg"&gt;&lt;img src="http://www.jerizjoolz.com/Jewelry/B26-corowhiteenamleaves.jpg" width="221" height="234" alt="Coro Grapevine"&gt;&lt;br&gt;Click to enlarge&lt;/a&gt;&lt;/div&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;Native American style cuff by COPPER BELL&lt;/li&gt;
<i> </i> &lt;li&gt;Item B09&lt;/li&gt;
<i> </i> &lt;li&gt;Price: $38&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;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!"&gt;
<i> </i> OR &lt;a href="mailto:[email protected]"&gt;&lt;img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"&gt;&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;

<i> </i> &lt;div class="image2right"&gt;
<i> </i> &lt;div&gt;&lt;img src="http://www.jerizjoolz.com/Jewelry/B12-florenzacameo.jpg" width="250" height="87" alt="Florenza Cameo"&gt;&lt;/div&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;Native American style cuff by COPPER BELL&lt;/li&gt;
<i> </i> &lt;li&gt;Item B09&lt;/li&gt;
<i> </i> &lt;li&gt;Price: $38&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;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!"&gt;
<i> </i> OR &lt;a href="mailto:[email protected]"&gt;&lt;img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"&gt;&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;

<i> </i> &lt;div class="image2left"&gt;
<i> </i> &lt;div&gt;&lt;a href="http://www.jerizjoolz.com/Jewelry/B17-whiteglassbeads.jpg"&gt;&lt;img src="Jewelry/B17-whiteglassbeads.jpg" width="290" height="55" alt="White Glass Beads"&gt;&lt;br&gt;Click to enlarge&lt;/a&gt;&lt;/div&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;Native American style cuff by COPPER BELL&lt;/li&gt;
<i> </i> &lt;li&gt;Item B09&lt;/li&gt;
<i> </i> &lt;li&gt;Price: $38&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;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!"&gt;
<i> </i> OR &lt;a href="mailto:[email protected]"&gt;&lt;img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"&gt;&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;

<i> </i> &lt;div class="image2right"&gt;
<i> </i> &lt;div&gt;&lt;img src="http://www.jerizjoolz.com/Jewelry/B14-diamondvermeil.jpg" width="284" height="49" alt="diamond vermeil"&gt;&lt;/div&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;Native American style cuff by COPPER BELL&lt;/li&gt;
<i> </i> &lt;li&gt;Item B09&lt;/li&gt;
<i> </i> &lt;li&gt;Price: $38&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;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!"&gt;
<i> </i> OR &lt;a href="mailto:[email protected]"&gt;&lt;img src="http://www.jerizjoolz.com/images/email.gif" width="64" height="33" alt="Order by Email"&gt;&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;
&lt;/form&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
Copy linkTweet thisAlerts:
@nkaisareFeb 28.2003 — What I did is to remove the individual forms and use a "global" form for Paypal. You do not need to repeat the hidden inputs.

Basically, ul is a block level element. Irrespective of height of the image, things will not get displayed below the image (unless you have a lot of text).

However, form is block level too. So if you have a form, the "block" rules applicalble for ul are no longer applicable and the things will be displayed whereever there is space to be displayed. So if the height of the image is small, things start getting displayed below it.

To get click to enlarge below the image, what i did is that instead of floating the image, i floated a div that contains image and "Click to enlarge" text.

Finally for you bottom links, don't use table. You can use <div id="footerlinks"> with width of your choice. The images within that div could be floated left. So that they will appear besides one another until the length of the div is full, after which they will "wrap" below. For unequal size images, put them in individual divs... ALL divs floated, ALL with SAME width.
Copy linkTweet thisAlerts:
@WisbinMar 01.2003 — good for you.

FIRST

you need a wrapper. A container above the BODY which holds the bg image and controls the padding.


[CODE]
div#wrapper {
padding: 50px 10px 10px 120px;
background: #7E5E61
url('http://www.jerizjoolz.com/images/bggoldtonedkmauve.jpg') repeat-y;
color: #c4a19f;
}
[/CODE]


As we think in boxes now, we define some other containers for the obvious parts:

[CODE]
div.header, div.header p {
margin:0px 0px 25px 0px;
text-align: center;
}

div.entry { /* the middle container holding IMG and UL
border-top: 2px dotted #c4a19f;
clear: both
}

div#footer {
padding: 50px 0px;
clear:both;
}
[/CODE]

ok, now we need to get in to the middle thing. The alternating floating IMG and UL (shrunk).

We want an image to the left and the UL left aligned to that. We want the next container to hold an image which is right floated where the UL will be aligned right.

to make the list items without style image, we use the li definition "list-style:none;"

[CODE]

img.right {
float:right;
margin-left:10px;
}

ul.left {
text-align: right;
}

li {
list-style: none;
}

img.left {
float:left;
margin-right:10px;
}

ul.right {
text-align: left;
}


[/CODE]


If you use this on the following document tree it will look much the same as you want it.


[CODE]
<body>
<div id="wrapper">

<div class="header">
<img>
<img>
<p></p>
</div>

<div class="entry">
<ul class="right">
<img class="left">
/* this is not a good idea, to put the image
in the UL tag, but I wanted a quick fix
YOU better put them out of it and give some room
on top with the padding or margin */

<li></li>
</ul>
</div>

.. etc .. alternating the class from left to right on the above UL and img.

[/CODE]

Putting the footer out of his table-missery and upgrading the a elements, and here you have it: [URL=http://www.ict-id.nl/temp/sitepoint/html/webdeveloper/skolya.html]tableless jeriz[/URL]


PS if you like it, you could paypall me also ?

good luck with it.
Copy linkTweet thisAlerts:
@skolyaauthorMar 01.2003 — Will do--as soon as a few people Paypal ME!?

Anyway, I hadn't even seen Wisbin's code when I redid my page, which (after much trial and error) came out great, EXCEPT .... Well, a picture's worth a thousand words. Here it is:

www.jerizjoolz.com/braceletsCSS2.html

I've been banging my head against the proverbial wall all morning and tried every fix I could think of but can't figure out how the h**** this happened.

?

Tnx!
Copy linkTweet thisAlerts:
@WisbinMar 08.2003 — maybe this can help, it is the same principal. I didnt checked it out but maybe you can make some out of it.

http://users.rraz.net/mc_on_the_rocks/pg_index.html

cheers.
×

Success!

Help @skolya spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...