Change Attribute Position With CSS?

[enchantedone]

hi i have been having a huge problem trying to get my attributes positioned right.
on my product info page i have sideboxes in the right and left columns and the picture and description are in the center column. but the attributes ran together. i wanted a break between the color and the size attributes, but for the life of me i could not figure out how to do this.have a look here to see what i mean

http://enchantedlingerie.com/index.p...roducts_id=886

i posted in another thread i though something had to be changed in
tpl_product_info_display but after hours of nothing working i posted again and was told that this is controlled by css, i just cannot figure out what needs to be changed, im not good with css this cart is the first time i have used it. i plan on learning and mastering it, im just kind of clueless at the moment.

if someone can just take a look and maybe clue me into what i need to do it would be so appreciated.

thanks alot

[enchantedone]

never mind this isnt a css problem. i figured it out

[Ajeh]

What was the magic ... enquiring minds want to know?

[spottedhaggis]

Given there was no reply from this user, I have something of a similar issue, but first, let me say that I used OSC for a while, upon installing Zen v1.2 I loked at the backend and went yuk.

I am now converted from OSC to Zen. Modifying it is something I have learned over the past week, and its actually really easy, and man have I learned alot about css and what it can do for you.

My only remaining problems are as follows.

I have attributs, 5 per product. Using CSS I have managed to place these individual attirbuts into a box, orange background with a border, looks nice.

I have tried and tried and for the life of me cannot find a way to have all 5 boxes (which have a slight gap between them) centered on the page.

Secondly, the entire site has a light grey background, the content for the links is in the center on a white background, however where there is not alot of info to display, the white box auto shrinks, leaving it stuck on its own. I would like help in either making the white box fill the center area at all times no matter how much content, or if that cant be done, change the background of the table that white box sits in to white so at least that blends.

Site is (still some work to dp) www.macropackaging.co.uk/shop

Best views in IE since FF has issues with the header.

[kobra]

You could try adding this and adjusting as needed:

#productAttributes {
           padding-left: 2em;
           }

You also have 2 instances of .attribImg without checking I think that these fight each other might combine

[seethrou]

Given there was no reply from this user, I have something of a similar issue, but first, let me say that I used OSC for a while, upon installing Zen v1.2 I loked at the backend and went yuk.

I am now converted from OSC to Zen. Modifying it is something I have learned over the past week, and its actually really easy, and man have I learned alot about css and what it can do for you.

Can you share your experience with us?
And it will help others with similar needs.

My only remaining problems are as follows.

I have attributs, 5 per product. Using CSS I have managed to place these individual attirbuts into a box, orange background with a border, looks nice.

I have tried and tried and for the life of me cannot find a way to have all 5 boxes (which have a slight gap between them) centered on the page.

It look like you are using sort of the classic template and with tables. And your sytlesheet.css is mixed with new and old versions of css.

Please consider convert the template to new version as many advised in the forum.


Since your attribute position is controlled by: (around line 135 of your stylesheet.css)

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

It float all the attributes to left for display them in line, then centering them and it will be a problem.
Add padding may help a bit.

#productAttributes {
margin-left: 2em /* adjust to what you prefer */
}

.

[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>