Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Attribute Alignment in Product Listing

Attribute Alignment in Product Listing

Locked

Views: 2,990

Results 1 to 17 of 17
This thread is locked. New replies are disabled.
26 Nov 2007, 9:59 PM
#1
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Attribute Alignment in Product Listing

On the following item:

http://nboriginals.com/index.php?main_page=product_info&cPath=1&products_id=1

I have two textfield attributes. I know that I have to make them the same size (that I can do) so they will match, but I'm curious how to get both of them to align to the left, so they appear one right after the other.

27 Nov 2007, 7:25 PM
#2
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Fixed the layout with the button but I'm still having a problem: How do I make it so that instead of:

( text box ) Attribute name
(larger text box) Attribute name

I get this:

Attribute Name
(text box)
Attribute Name
(larger text box)

Basically I want to left align everything, switch the postions of the attribute 'box' / name and set the 'name' on top of the 'box'

I hope that makes sense.

27 Nov 2007, 7:41 PM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

Add to your stylesheet:```
.wrapperAttribsOptions {position: relative;}
h4.optionName {
float: left;
margin-bottom: 1em;
}
.wrapperAttribsOptions select, .wrapperAttribsOptions input {
position: absolute;
top: 2.3em;
left: 0.3em;
}

27 Nov 2007, 7:45 PM
#4
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Thank you! That gets them where I need them to be but it's doing a funky stair-step deal.

27 Nov 2007, 7:48 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

Are you looking at it in IE? It looks perfect in Firefox.
I'll have to check IE.

Well that's really annoying! Position: absolute is supposed to make the element independent of other elements, but IE is hanging it up on something anyway.

27 Nov 2007, 7:49 PM
#6
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Yep. IE 6.

Personally I prefer Firefox, but more people use IE than it, so I have to make sure that the design works across all browers.

Thank you for your help, by the way. I've been thread-surfing all day and my head is starting to throb over this.

27 Nov 2007, 7:59 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

Increasing the margin-bottom and the top: 2.3em a bit might allow the elements to fit better.

27 Nov 2007, 8:07 PM
#8
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Hrm.

No matter how wide I make the top and bottom margins it doesn't seem to snap the inputs to the left.

27 Nov 2007, 8:28 PM
#9
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

Weird... Perhaps if you removed that margin-bottom and put a height on .wrapperAttribsOptions, that would clear the way.

27 Nov 2007, 8:36 PM
#10
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Ah ha!

.wrapperAttribsOptions {position: relative; height: 5px;}

That did the trick! Thank you very much!

I had to keep the margin-bottom: 1em; in, because it crushed the elements together in FireFox.

Thank you again! You've saved me a goodly amount of mony in asprin!

28 Nov 2007, 7:06 AM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

Good to know that that tweak makes it work correctly!
What I actually had in mind was giving .wrapperAttribsOptions a height of 2.5em or so, so that h4.optionName wouldn't need the margin to keep space below it; but it seems that IE simply needed a dimension specified in order to use the positioning.

29 Nov 2007, 7:29 PM
#12
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

I have another question along the same lines:

If you look at the product page the buttons at the bottom (Add to cart, review, etc) are arranged in a left-handed L. I've been dinking around with some of the files and I can't figure out how to get them to go straight down the page. I'm redoing the buttons (and I'll probalby have a question on that too, but I'll get to it when I get stumped) and I want them to align vertically instead of in that backwards L.

How do I do that?

Thanks again!

30 Nov 2007, 1:57 AM
#13
tig avatar

tig

Zen Follower

Join Date:
Apr 2006
Location:
Lansing, MI
Posts:
123
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Update: I've got them in a vertical line, but for some if I declare a margin for IE it makes Firefox / Mozilla look out of line but if I make it look good in firefox it gets all funked in IE.

That and there seems to be more space between 'tell a friend' and 'write a review' than between 'tell a friend' and 'add to cart'

I don't want to disable those two features on the product page but I can't think of how to unstick the situation. Here is the relevant tpl_product_info_display.php file:

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div align="right" id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

<!--bof Tell a Friend button -->
<div align="right">
<?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow back"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
  }
?>
</div>
<!--eof Tell a Friend button -->
<br class="clearBoth" />
<!--bof Reviews button and count-->
<?php
  if ($flag_show_product_info_reviews == 1) {
    // if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
    if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<?php
  }
}
?>
<!--eof Reviews button and count -->

And the relevant css:

#navCategoryIcon, [b].buttonRow[/b], #indexProductListCatDescription {
	margin: 0.5em;
	}

#cartAdd {
	text-align: right;
	margin-right: 1em;
	/* border: 1px solid #000000; */
	/*padding: 1em;*/
	}
30 Jan 2008, 6:32 PM
#14
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

I have this working beautifully in Firefox, but it looks terrible in IE, everything is crammed together. This is the CSS:

.wrapperAttribsOptions {position: relative; height: 5px;}
h4.optionName {
float: left;
margin-bottom: 1em;
}

.wrapperAttribsOptions select, .wrapperAttribsOptions input {
position: absolute;
top: 2.3em;
left: 0.3em;
}

Here's an example of how it looks: http://www.bellaraine.com/ballerinaprincesspersonalizedbook-p-4.html

I've tried changing various things in the CSS but I can't figure out how to fix the spacing in IE. Can anyone help?

Thank you!

30 Jan 2008, 7:00 PM
#15
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

I'm not sure what could be causing the problem you see - when I looked in IE6, the attributes actually appeared a bit more spaced out than in FF.

30 Jan 2008, 7:10 PM
#16
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Attribute Alignment in Product Listing

Well that is bizarre. I am using IE7 though, so maybe that is why. I've attached a screenshot of what I'm seeing. It was actually someone else who told me about it, she is probably on IE7 as well.

30 Jan 2008, 7:18 PM
#17
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Attribute Alignment in Product Listing

Yep, that's not good. Unfortunately there's nothing more I can say about it.