CSS Forum

**carlosrapa** · 06-29-2008, 03:06 PM

First of all I want to say thanks to all of you who helped point me in the right direction and squash my previous way of thinking in this post.

http://www.webmaster-talk.com/css-forum/149662-nav-bar-works-firefox-but-not.html

I have now devoted myself to learning CSS and as much as I can about getting rid of tables. Since the previous post I have dived in and started one of my websites over. And am attempting to go pure CSS without tables.

And wow not only did I recreate the site in record time; it runs soooo clean. But like I thought I would, I have came into a snag and need help again.

I have the whole site Pure CSS except for the home page and the footer section. Can anyone lend a helping hand and show me how to make a section with multiple sections enclosed that do not resize and are fixed like a table would be?

This the current site... Home is full of tables, all other pages are pure CSS minus the footers...
http://www.carlosrapa.com/stljewelco/

Thanks,
Carlos

Here is the HTML of everything below the menu bar.

HTML Code:

</div>
<div id="indexpage">
  <table class="table0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td id="welcome" class="welcome"><h1 class="welcome"> Welcome to St. Louis Jewelry Company</h1>
        <p>The St. Louis Jewelry Company is a complete manufacturer   of fine gold, silver and platinum jewelry consisting of Masonic Rings and other   Fraternal Rings as well as a complete line of wedding rings, bridal jewelry,   anniversary bands, ladies diamond rings, diamond right hand rings, 3 stone   rings, both ladies and mens cameo rings, onyx diamond rings, pendants and much   more. We are also the largest brick &amp; mortar retailer of Gothic Fraternal   Rings including Gothic Masonic Rings, Gothic Past Master Rings, Gothic Scottich   Rite Rings, Gothic Shriners Rings, Gothic Knights Templar Rings, Gothic Knights   of Columbus Rings, Gothic Elk or BPOE Rings and Gothic Eastern Star Rings. </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p></td>
      <td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td id="box1_top"></td>
          </tr>
          <tr>
            <td id="box1" valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td id="box1_pole" class="special"><h1> Special Offer </h1>
                    <h2>Fraternals Past Master Ring</h2>
                    <p> now only <br />
                      <b style="font-size:16px;"> $465 </b> </p></td>
                  <td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td colspan="3" id="box1_hl1"></td>
                      </tr>
                      <tr>
                        <td colspan="3" id="box1_r_top"></td>
                      </tr>
                      <tr>
                        <td id="box1_l"></td>
                        <td id="box1_foto"></td>
                        <td id="box1_r"></td>
                      </tr>
                      <tr>
                        <td colspan="3" id="box1_r_bottom"></td>
                      </tr>
                    </table></td>
                  <td id="box1_rb"></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td id="box1_middle"></td>
          </tr>
          <tr>
            <td id="box2" valign="top"><table align="center" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td id="box2_pole" class="products"><h1> New Products </h1>
                    <h2> Diamond Pendant </h2>
                    <p> 14KT tutone love-knot diamond pendant with a 5 pt total diamond weight </p></td>
                  <td id="box2_foto"></td>
                  <td id="box2_rb"></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td id="box2_bottom"></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
<div id="gray_bar"> </div>
<div id="footer">
  <table align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="382" class="footer_l" id="footer"><p>Phone:  (877) 539 - 9586</p></td>
      <td width="382" class="footer_r" id="footer"><p>Email:  info@stljewelco.com</p></td>
    </tr>
  </table>
</div>

Here is all of my css... some of it looks like a mess but the mess is mainly from getting the homepage to work...

Code:

@charset "utf-8";
/* CSS Document */
 
body {
 margin-top: 17px;
 margin-bottom: 15px;
 padding: 0;
 text-align: center;
 background-color: #858B9B;
}
div#container1 {
 margin:0 auto;
 width: 764px;
 height: 137px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 background-image:  url("images/foto1.jpg");
 background-position:center;
 background-repeat: no-repeat;
}
div#menu_container {
 margin:0 auto;
 width: 764px;
 height: 37px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 background-color: #003D59;
}
div#mainbody {
 margin:0 auto;
 background-color: #FFFFFF;
 background-image:  url("images/foto33.jpg");
 background-repeat: no-repeat;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 width: 764px;
 height: 500px;
}
div#mainbody {
 margin:0 auto;
 background-color: #FFFFFF;
 background-image:  url("images/foto33.jpg");
 background-repeat: no-repeat;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 width: 764px;
 height: 500px;
}
div#mainbodysub {
 padding-top: 16px;
 padding-left: 66px;
 padding-right: 90px;
 padding-bottom: 10px;
 width: 607px;
 height: 236px;
}
.mainbodytext {
 text-align: left;
 color: #000000;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.mainbodytext h1 {
 color: #003D59;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 margin-top: 28px;
 margin-bottom: 28px;
}
.mainbodytext p {
 margin-top: 2px;
 margin-bottom: 2px;
 line-height: 16px;
}
#gray_bar {
 margin:0 auto;
 width: 764px;
 height: 10px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 background-image:  url("images/gray_line.gif");
 background-position:center;
 background-repeat: no-repeat;
}
div#footer {
 margin:0 auto;
 width: 764px;
 height: 30px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 border-bottom:1px solid #FFF;
 background-color: #003D59;
}
.footer_r {
 color: #FFFFFF;
 text-align: right;
 padding-right: 10px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
}
.footer_l {
 color: #FFFFFF;
 text-align: left;
 padding-left: 10px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
}
.footer P {
 text-align: right;
 margin-top: 0px;
 margin-bottom: 0px;
}
/*below could be messy stuff but it works for its purpose*/
div#indexpage {
 height:500px;
}

.table0 {
 background-color: #FFFFFF;
 width: 766px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
}
.table1 {
 background-color: #003D59;
 height: 23px;
 width: 763px;
}
div#mainbodyhomesub {
 text-align:left;
 padding-top: 16px;
 padding-left: 66px;
 padding-right: 90px;
 padding-bottom: 10px;
 width: 380px;
 height: 400px;
}
.mainbodyhome {
 text-align: left;
 color: #000000;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.mainbodyhome h1 {
 color: #003D59;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 margin-top: 28px;
 margin-bottom: 28px;
}
.mainbodyhome p {
 margin-top: 2px;
 margin-bottom: 2px;
 line-height: 16px;
}
#welcome {
 background-image:  url("images/foto33.jpg");
 background-repeat: no-repeat;
 vertical-align: top;
 padding-top: 0px;
 padding-left: 66px;
 padding-right: 90px;
 padding-bottom: 10px;
 width: 338px;
 height: 236px;
}
.welcome {
 text-align: left;
 color: #000000;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.welcome H1 {
 color: #003D59;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 margin-top: 28px;
 margin-bottom: 28px;
}
.welcome P {
 margin-top: 2px;
 margin-bottom: 2px;
 line-height: 16px;
}
#box1_top {
 background-image:  url("images/box1_top.gif");
 background-repeat: no-repeat;
 vertical-align: top;
 width: 269px;
 height: 4px;
}
#box1 {
 background-color: #ECEFF6;
 width: 269px;
}
#box1_pole {
 background-image:  url("images/box1_vl.gif");
 background-repeat: repeat-y;
 vertical-align: top;
 padding-top: 0px;
 padding-left: 18px;
 padding-right: 18px;
 padding-bottom: 10px;
 width: 101px;
}
.special {
 text-align: left;
 color: #B61C1C;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.special H1 {
 color: #003D59;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 margin-top: 12px;
 margin-bottom: 15px;
}
.special H2 {
 color: #003D59;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 margin-top: 0px;
 margin-bottom: 15px;
}
.special P {
 margin-top: 0px;
 margin-bottom: 2px;
 line-height: 16px;
}
#box1_hl1 {
 vertical-align: top;
 width: 129px;
 height: 8px;
}
#box1_r_top {
 background-image:  url("images/box1_r_top.gif");
 background-repeat: no-repeat;
 width: 129px;
 height: 2px;
}
#box1_l {
 background-image:  url("images/box1_l.gif");
 background-repeat: repeat-y;
 width: 2px;
 height: 109px;
}
#box1_foto {
 background-image:  url("images/foto4.jpg");
 background-repeat: no-repeat;
 vertical-align: top;
 width: 119px;
 height: 109px;
}
#box1_r {
 background-image:  url("images/box1_r.gif");
 background-repeat: repeat-y;
 vertical-align: top;
 width: 8px;
 height: 109px;
}
#box1_r_bottom {
 background-image:  url("images/box1_r_bottom.gif");
 background-repeat: no-repeat;
 vertical-align: top;
 width: 129px;
}
#box1_rb {
 background-image:  url("images/box1_rb.gif");
 background-repeat: repeat-y;
 vertical-align: top;
 width: 3px;
}
#box1_middle {
 background-image:  url("images/box1_middle.gif");
 background-repeat: no-repeat;
 vertical-align: top;
 width: 269px;
 height: 4px;
}
#box2 {
 background-color: #F3F6FD;
 width: 269px;
}
#box2_pole {
 background-image:  url("images/box2_vl.gif");
 background-repeat: repeat-y;
 vertical-align: top;
 padding-top: 0px;
 padding-left: 18px;
 padding-right: 1px;
 padding-bottom: 10px;
 width: 118px;
}
.products {
 text-align: left;
 color: #000000;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
}
.products H1 {
 color: #003D59;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 margin-top: 10px;
 margin-bottom: 22px;
}
.products H2 {
 color: #003D59;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 margin-top: 0px;
 margin-bottom: 2px;
}
.products P {
 margin-top: 0px;
 margin-bottom: 2px;
 line-height: 16px;
}
#box2_foto {
 background-image:  url("images/foto5.jpg");
 background-repeat: no-repeat;
 vertical-align: top;
 width: 129px;
}
#box2_rb {
 background-image:  url("images/box2_rb.gif");
 background-repeat: repeat-y;
 vertical-align: top;
 width: 3px;
}
#box2_bottom {
 background-image:  url("images/box2_bottom.gif");
 background-repeat: no-repeat;
 vertical-align: top;
 width: 269px;
 height: 2px;
}

**nyef** · 06-29-2008, 05:57 PM

Code:

<div style="float:left;clear:left;width:200px;">first cell</div>
<div style="float:left;width:200px;">second cell</div>
<div style="float:left;width:200px;">third cell</div>
<div style="clear:both;"></div>

**LadynRed** · 06-29-2008, 06:07 PM

I wouldn't even necessarily do it that way. If all you're doing there is showing images, there's no reason to stick in additional divs just to contain them, I'd just float the images inside a containing div and define the margins between them.

So, you'd have something like this:
<div id="pageBottom">
<img class="floatLeft" src="images/image1.jpg" />
<img class="floatLeft" src="images/image2.jpg" />
<img class="floatLeft" src="images/image3.jpg" />
<br class="brclear" />
</div>
Or, you could just add clear:both to the #footer, that would also clear the floats above.

In the css you'd then have the class "floatLeft"
.floatLeft{
float: left;
margin: 3px; (puts 3px of margin on all sides)
}