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:
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.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
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?
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.
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.
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.
Text Text -----------
Text Text | |
Text Text | Image |
----------- Text Text
| | Text Text
| IMAGE | Text Text
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