Change Attribute Position With CSS?

[spottedhaggis]

Im actually using the default template that came with the Zencart itself.

Everything seems to work ok, other than attributes, and the main white window where the content appears, I cant seem to get the white bx to fill the entire top to bottom, it simply adjusts itself accrding the its content.

The only issue I see with padding is that this simply creates space on the left, pushing the attributes to the right a little, but for different displays on different monitors it would be better to have them all centered to keep it flowing nice?

[kobra]

As each box is a unique image, applying centering is difficult.

I agree that for different displays it would be better to center but even then if the space is not available some rendering snafu will happen.

[spottedhaggis]

ok for those interested, my css for the attributes are as follows, and can be viewed here http://www.macropackaging.co.uk/shop...products_id=16

.attribImg {
border: 1px solid black;
background-color:#FF9933;
align: center;
width: 30px;
height: 55px;
left: auto;
right: auto;

As you can see I tried everything to have all the boxes center but nothing worked, and I also noticed that the text is not inside a table or anything, add more text and the text flows outside the boxes.


It would be ar easier if there were sme way to have each attribute sit inside its own table, then formatting each table would be real easy, anyone know if this is possible at all.

[kobra]

Im actually using the default template that came with the Zencart itself.

I also noticed that the text is not inside a table or anything

If this is true...you have taken a tabless design and added not only tables but nested them inside each other. So that almost each item exists within a table. As you seem to know your way around tables, place what you want centered in a table and position it using tables. Couple of examples:

rc="images/Movie3.swf" wmode="transparent quality="high"...></embed></object></td>
                </tr>
              </table>
          </div></td>
        </tr>
      </table>

      <table width="96%" height="45" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF9933" class="headershipping">
        <tr>
          <td align="center" valign="middle">  <script language="JavaScript1.2" type="text/javascript">

            </script>
              <table border="0" cellpadding="0" cellspacing="0" width="800">
                <!-- fwtable fwsrc="Untitled" fwbase="Untitled-28.gif" fwstyle="Dreamweaver" fwdocid = "539025190" fwnested="0" -->
                <tr>
                  <td><img src="images/spacer.gif" width="739" height="1" border="0" alt="" /></td>
                  <td><img src="images/spacer.gif" width="54" height="1" border="0" alt="" /></td>

                  <td><img src="images/spacer.gif" width="7" height="1" border="0" alt="" /></td>
                  <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
                </tr>
                <tr>
                  <td colspan="3"><img name="Untitled28_r1_c1" src="images/Untitled-28_r1_c1.gif" width="800" height="11" border="0" id="Untitled28_r1_c1" alt="" /></td>
                  <td><img src="images/spacer.gif" width="1" height="11" border="0" alt="" /></td>
                </tr>
                <tr>
                  <td rowspan="2"><img name="Untitled28_r2_c1" src="images/Untitled-28_r2_c1.gif" width="739" height="34" border="0" id="Untitled28_r2_c1" alt="" /></td>

                  <td><a href="http://www.macropackaging.co.uk/shop/index.php?main_page=shippinginfo" target="_self" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Untitled28_r2_c2','','images/Untitled-28_r2_c2_f2.gif',1);"><img name="Untitled28_r2_c2" src="images/Untitled-28_r2_c2.gif" width="54" height="23" border="0" id="Untitled28_r2_c2" alt="Click here to read the conditions of our Free shipping." /></a></td>
                  <td rowspan="2"><img name="Untitled28_r2_c3" src="images/Untitled-28_r2_c3.gif" width="7" height="34" border="0" id="Untitled28_r2_c3" alt="" /></td>
                  <td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
                </tr>
                <tr>
                  <td><img name="Untitled28_r3_c2" src="images/Untitled-28_r3_c2.gif" width="54" height="11" border="0" id="Untitled28_r3_c2" alt="" /></td>
                  <td><img src="images/spacer.gif" width="1" height="11" border="0" alt="" /></td>
                </tr>
              </table>

            </td>
        </tr>
      </table>
      <table width="96%"  border="0" align="center" cellpadding="0" cellspacing="0" class="headernavigation" bordercolor="#999999">
          <tr>
            <td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#C4C5CC" class="headerNavigation">
              <tr>
                <td width="13" height="26" align="left" valign="middle">&nbsp;</td>
                <td width="48%" align="left" valign="bottom"><a href="http://www.macropackaging.co.uk/shop/index.php?main_page=index">Home</a>&nbsp;<span class="style4">▫▪▫</span>&nbsp;

                                    <a href="http://www.macropackaging.co.uk/shop/index.php?main_page=login">Log In</a>
                </td>
                <td width="48%" align="right" valign="bottom">
                                    </td>
                <td width="13" align="right" valign="middle">&nbsp;</td>
              </tr>
            </table></td>
          </tr>

      </table>

And specifically your orange boxes are in tables:

           <td width="180" align="center" valign="middle"><table width="88%"  border="1" align="center" cellpadding="3" cellspacing="0">
              <tr>
                <td><div align="left" class="style4"><span class="style5">1 Box = Standard</span></div></td>
              </tr>
              <tr>
                <td><span class="style8">2 Boxes = 10% Discount</span></td>

              </tr>
              <tr>
                <td><span class="style8">3 Boxes = 15% Discount </span></td>
              </tr>
              <tr>
                <td><span class="style8">5 Boxes = 20% Discount </span></td>
              </tr>
              <tr>

                <td><span class="style8">10 Boxes = 30% Discount </span></td>
              </tr>
            </table></td>
          </tr>
        </table>          </td>

[spottedhaggis]

Ah I think you may be a little confused over what part Im talking about, no offense, on the site the orange bosxes are the attributes, where as the table son the right I placed inside the product info display page manualy and they are indeed tables.

The attributes are setup through admin, so since there is not any specific code to place them into tables, I was not able to locate where these are. Hence al I could do was CSS them to change the way they lok, but from what I can tell they are not inside tables at all.

The code that displays any attributes is inside a table but even centering that table makes no difference.

The orange boxes will never exceed 5, and are setup to fit a 1024/768 display without altering their position, since most people (according to the stats I have looked at on other sites) use that resolution instead of the older and less popular 800/600.

I would like to try and have all 5 boxes as they are now centered in the display.

I did notice when I view the source with fireworks, they do seem to be a table within a table within a table, but I cant see how this is created from the php codes.

[DrByte]

I think if I read what you're asking, you want to center the "orange" boxes, right?

Try this:
/includes/templates/YOURTEMPLATE/templates/tpl_modules_attributes.php
around line 42 you have:

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />

change that to:

<div class="attribWrapperForMyBoxes">
<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
</div>
<br class="clearBoth" />

and then set a new class in your stylesheet for:

.attribWrapperForMyBoxes {text-align: center; }

[spottedhaggis]

I have added this but am not sure it changed anything, lol.

The text I think I had centered ok, but I want the boxes that the text sit in that have the orange inside them centered at the bottom of the page?

[kuroi]

Ironically, your boxes very much want to go to the center. Change

.attribWrapperForMyBoxes {text-align: center; }

to

.attribWrapperForMyBoxes {width:425px}

and they won't be able to get there fast enough.