www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: CSS Newbie--Converting HTML Tables

  1. #1
    Join Date
    Feb 2003
    Posts
    17

    Question CSS Newbie--Converting HTML Tables

    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

  2. #2
    Join Date
    Nov 2002
    Location
    Dartmoor [Holiday]
    Posts
    2,382
    You'd probably best look at a CSS tutorial, such as the one at W3Schools:
    http://www.w3schools.com/css/default.asp

    Adam

  3. #3
    Join Date
    Feb 2003
    Posts
    17

    Thumbs up CSS Tutorial

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

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    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

  5. #5
    Join Date
    Nov 2002
    Location
    Dartmoor [Holiday]
    Posts
    2,382
    From what I've seen of the site, it seems quite useful - may I ask why you aren't impressed with it?

    Adam

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    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.
    “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

  7. #7
    Join Date
    Nov 2002
    Posts
    2,632
    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.

  8. #8
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    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.
    “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

  9. #9
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571

    Re: CSS Newbie--Converting HTML Tables

    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.

  10. #10
    Join Date
    Feb 2003
    Posts
    17
    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

  11. #11
    Join Date
    Feb 2003
    Posts
    17

    PS

    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.

  12. #12
    Join Date
    Nov 2002
    Posts
    2,632
    <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.

  13. #13
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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
    |         |
    -----------

  14. #14
    Join Date
    Feb 2003
    Posts
    17

    Unhappy OK, so far so good, but ...

    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!

  15. #15
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles