How To Reposition Attributes?

[niccol]

As far as the stylesheets go your plan of keeping a back up is a good one!

Except that you need to name it something that does not begin with 'style'. Or does not end with .css.

How about backup_stylesheet.txt ? However you do it remember that zen will load any stylesheets that begin with the letters 'style'

[youshine]

Dear Niccol,

I did not know that the thread that you asked me to look at has 2 more pages.

I did take out the <br...> thing and I see now the photo1, photo2, etc line up without any space between.

I tried in vain to create some space between photo5 and "$5 per person" for now they are almost merged together.

And tried to make the how many person input box smaller by changing the size to 32 but nothing happens... maybe somewhere I have css code overriding it?

Please notice that I added all the attribute names at the end of my stylesheet.css as follows.


#attributeBox-photolocation{height:1em;}
#attributeBox-photolocation .optionName{width:14em;}
##attributeBox-photoenhancement{height:1em;}
#attributeBox-photoenhancement .optionName{width:14em;}
attributeBox-photo1{height:1em;}
#attributeBox-photo1 .optionName{width:14em;}
#attributeBox-photo2{height:1em;}
#attributeBox-photo2 .optionName{width:14em;}
#attributeBox-photo3{height:1em;}
#attributeBox-photo3 .optionName{width:14em;}
#attributeBox-backgroundphoto4{height:1em;}
#attributeBox-backgroundphoto4 .optionName{width:14em;}
#attributeBox-photo5{height:5em;}
#attributeBox-photo5 .optionName{width:14em;}
#attributeBox-howmanyperson{height:5em;}
#attributeBox-howmanyperson .optionName{width:14em;}
#attributeBox-selectbackground{height:1em;}
#attributeBox-selectbackground.optionName{width:14em;}
#attributeBox-size{height:1em;}
#attributeBox-size .optionName{width:14em;}
#attributeBox-letteringlocation{height:1em;}
#attributeBox-letteringlocation .optionName{width:14em;}
#attributeBox-letteringtext{height:1em;}
#attributeBox-letteringtext .optionName{width:14em;}
#attributeBox-fonttype{height:1em;}
#attributeBox-fonttype .optionName{width:14em;}
#attributeBox-fontcolor{height:1em;}
#attributeBox-fontcolor .optionName{width:14em;}

I tried also " input{width:5px;}" with no success...

Waiting for your further coaching...

P.S. I do use Firefox and installed Web Developer per your advice...

[niccol]

OK. Put this at the bottom instead of the other stuff from before:

#attributeBox-photo1{height:1em;}
#attributeBox-photo1 .optionName{width:14em;}
#attributeBox-photo2{height:1em; clear:both}
#attributeBox-photo2 .optionName{width:14em;}
#attributeBox-photo3{height:1em;clear:both}
#attributeBox-photo3 .optionName{width:14em;}
#attributeBox-backgroundphoto4{height:1em;clear:both}
#attributeBox-backgroundphoto4 .optionName{width:14em;}
#attributeBox-photo5{height:1em;clear:both}
#attributeBox-photo5 .optionName{width:14em;}

#attributeBox-photoenhancement .optionName{width:20em;}
.attributesComments{clear:both;}

You will see that I am slowly working my way down the page.

Unfortunately it is late and I must sleep so the rest will wait for tomorrow I am afraid!

[youshine]

May you have a good and sound sleep...

I changed my Stylesheet.css with the codes you gave last..., and see nothing much changed ... on the screen...

[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