How To Reposition Attributes?

[niccol]

New css in file that is attached. Also a screen shot of where that takes us. Getting there I think. I am sure that you can fiddle with it and make it look better!

You need to add an option comment for lettering location (done in admin) that will make the column headings. All the headings will be in the comment. Then we will get rid of the existing word 'location' via the css which is just there as a placeholder at the moment.

let me know...

[youshine]

Thanks Nick for the codes.
Thanks to your help, my page looks like the following now.



Now the job left is

to move down the input boxes to align with option names (input boxes appear to show a bit higher than option names),
to make the "how many person"'s box smaller,
to move up the input boxes of lettering text, lettering font type and font colors to be at the same level (or line),
and then bring the "Tell a freiend" box closer to the "Write a review." box.

Thanks for coaching me and others who will learn by reading these posts of yours...

richardyim

[youshine]

As you can see by clicking here below link:
http://phoup.com/zencart1/index.php?...products_id=17

I was able to solve last two items in my "job to do", by removing <br> in the tpl_module_attributes.php.
=========
div class="wrapperAttribsOptions" id="attributeBox-<?php echo $new4 ?>">

<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
< ! br>
</div>
======
and by removing {clear:both"} and entering {float:left} at the Stylesheet.css as shown below.
==
/*Shopping Cart Display*/
#productTellFriendLink{float: left;}
#cartAdd {
======

So I had two what you called; "Aha" moments... he he he... all thanks to your prodding...

[niccol]

Hey that's great - those moments are great,eh?

So, where does that leave us?

Point two fist. Just add the following in to the stylesheet:

#attributeBox-howmanypersons input{width:50px;}

About point one. One of those browser things - it looks fine in Firefox. Let me see if I can come up with a more stable cross browser thing. You will have to help me because I can't really test in IE here at the moment!

[niccol]

Try this at the bottom of the stylesheet:

#attributeBox-photo1{border: 1px solid green;height:22px;}
#attributeBox-photo2{border: 1px solid green;height:22px;}
#attributeBox-photo3{border: 1px solid green;height:22px;}
#attributeBox-backgroundphoto4{border: 1px solid green;height:22px;}
#attributeBox-photo5{border: 1px solid green;height:22px;}

#attributeBox-photo1 h4{margin:0;}
#attributeBox-photo2 h4{margin:0;}
#attributeBox-photo3 h4{margin:0;}
#attributeBox-backgroundphoto4 h4{margin:0;}
#attributeBox-photo5 h4{margin:0;}

I have put some borders in to see what is going on more clearly and then I have taken the margins out of the h4s.

Tell me how you get on.....

[youshine]

Just saw the finished page with your last codes and my face beams with joy..... YOU MADE MY DAY, NICK!
Thank you, thank you!

This world is much nicer place to sojourn because of people like you willing to help others.

In appreciation, let me play a song which I enjoy.....
<embed src=http://www.youshineblog.com/mp3/karas2.mp3 width=300 height=50></embed>


It's from one of my old LP records.

http://www.youshineblog.com/mp3/g.m.-a.w..asf

[youshine]

hey, Nick,

may I ask one more thing? How can I add a hiperlink beside the atrtribute input box as shown on the following photo?
On which file where should I add the hiperlink:
<a href="http://www.phoup.com/... target="_blank">Click here to veiw BackGround samples</a>