The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Screen Resolution Issues
HTMLidiot
post Nov 22 2006, 11:00 PM
Post #1





Group: Members
Posts: 7
Joined: 22-November 06
Member No.: 1,045



Hi everyone. I hope someone can lead me in the right direction here.

Although I catch on very quickly, I am a newbie at best regarding html and css, so please bear with me!

I'm putting together an e-commerce website that is hosted by ProStores. They have an online tool to develop, or more accurately, tweak, their existing designs. There are a number of various templates contained within a design, but it looks to me that they pretty much build the page by combining a Header page, a Storefront (Homepage) and a Footer page. Then there are numerous other pages that utilize this basic layout for "Store Policies", "Customer Service", etcetera (or so I gather that's how it works). The one I'm having a problem with screen resolution is the catalog list (The page that lists the product after selecting from the drop down menu).

Here is the problem:

I've added a background image to a table on the "Homepage" that displays correctly in any resolution. I added the width="100%" to accomplish this. I've used the same image (image size identical) in the catalog list template, but when I select a product category from the catalog list on the left, the same image is displayed, but extended beyond the right border. It looks clean at 1024x768, but when I go to 800x600, it extends beyond the right border causing the horizontal scroll to show. This does not happen with the homepage...same image, same apparent layout.

I've changed/added the same width="100%" to <TD>'s that look like they would have something to do with the appropriate table in the catlist source, but nothing has worked. I also tried what I believed to be the correct similar attribute to the image statement that displays the image itself, but no go.

This is a portion of the catlist code:
<ss:set name="viewedcategory" value="$request.getParameter('category')"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="mainlinks">
</tr>
<tr>
<td align="center" valign="top" class="mainlinks" background-color="#cc0000"> <ss:set name="NOsubcat" value="1"/>
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:if test="$viewedcategory">
<ss:if test="$category.parentchaindisplay == $viewedcategory">
<ss:if test="$category.childCategories">
<ss:image source="$category.photoimage" width="100%"/><br>
<ss:value source="$category.description"/><br><br>
</ss:if>
<ss:foreach item="subcat" within="$category.childrenToDepth(1)">

<ss:set name="NOsubcat" value="$subcat"/>
</ss:foreach>
</ss:if>
<ss:else/>
</ss:if>
</ss:foreach>
<ss:if test="$NOsubcat == '1'">
<!-- Start Listing Products -->

<tr valign="top">
<ss:foreach item="listing" within="$catalog.results">
<ss:sortby item="category"/>
<td colspan="6">
<!--<ss:font source="$font.paragraph">
<b><ss:value source="$listing.name"/></b></ss:font><br><br>-->
</td>
<tr>
<!-- start count at zero for columns -->
<ss:set name="ColumnCount" value="$system.getMath(0)"/>
<!-- for each product in this category -->
<ss:foreach item="product" within="$listing.products">
<ss:sortby item="price"/>
<td align="center" valign="top">
<ss:link source="$product"><ss:image source="$product.thumbnailImage" alt="$product.name" border="0"/></ss:link>
</td>
<ss:eval source="$ColumnCount.set($ColumnCount.add(1))"/>
<ss:if test="$ColumnCount.get() == 3">
<!-- 3rd column -->
<td width="50%" valign="top" align="left">
<ss:else/>
<td width="33%" valign="top" align="left">
</ss:if>
<ss:font source="$font.paragraph">
<ss:link source="$product"><b><ss:value source="$product.name"/></b></ss:link>
<br>
<ss:value source="$product.brief"/> <br>
<b>PRICE: <ss:include macro="productprice"/></b>
<br><ss:link shortcut="BuyIt"/>
<ss:if test="$cart.isLastProductAdded($product)">
<a name="itemadded">
<ss:link source="$templateSet.cart"><ss:image source="$templateSet.images['cart-confirm-small.gif']" border="0"/></ss:link>
</a>
</ss:if>
<br>
</ss:font>
</td>

<!-- 3rd product in row, end row and add a blank one, start another row -->
<ss:if test="$ColumnCount.get() == 3">
</tr>
<tr><td colspan="6"> </td></tr>
<tr>
<ss:eval source="$ColumnCount.set(0)"/>
</ss:if>

</ss:foreach>

<ss:if test="$ColumnCount.get() == 1">
<!-- One product in row for this category, add 4 more columns to equal 6 columns, end row and add a blank one, start another row -->
<td colspan="4" width="50%"> </td></tr>
<tr><td colspan="6"> </td></tr>
<tr>
</ss:if>
<ss:if test="$ColumnCount.get() == 2">
<!-- Two products in row for this category, add 2 more columns to equal 6 columns, end row and add a blank one, start another row -->
<td colspan="2" width="50%"> </td></tr>
<tr><td colspan="6"> </td></tr>
<tr>
</ss:if>

</ss:foreach>
<!-- end the last row -->
<td colspan="6"> </td></tr>

</table>
<ss:font source="$font.paragraph">
<ss:if test="$catalog.isMultiPageResult"><p><b>Result Pages:</b> <ss:link shortcut="ListMediumText"/></p></ss:if>
</ss:font>
<ss:else>

</table>

</ss:if>



The code in red is what I've tried applying the width="100%" info to at one time or another, and I see some are still that way.

Is it possible the "table" that's actually diplaying the <ss:image source="$category.photoimage" width="100%"/> is not initiated in the catlist page code and coming from some other source?

Thanks in advance. Your help is greatly appreciated!

HTMLidiot

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 22 2006, 11:07 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



Hi, have you found your way here too now? smile.gif

It would be easier if we could see the output when it goes wrong. If you for some reason can't post the URL, go to the page that displays wrong, View Source and copy it here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HTMLidiot
post Nov 22 2006, 11:42 PM
Post #3





Group: Members
Posts: 7
Joined: 22-November 06
Member No.: 1,045



Hi Pandy.

You know me, or am I just one of a throng of people from ProStores?? Jeeez...hope I'm not bugging too many people about this issue! smile.gif

Here's the url:

www.cablestockroom.com

I did't post it before 'cause I've been making a lot of changes... basically attempts at fixing this issue on the fly. Never know when it'll go belly up and I'll have to copy and paste the code back in from one of the 10 million text files I have currently residing on my desktop thanks to this endeavor.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 22 2006, 11:50 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE(HTMLidiot @ Nov 23 2006, 05:42 AM) *

You know me, or am I just one of a throng of people from ProStores?? Jeeez...hope I'm not bugging too many people about this issue! smile.gif

I recognize your name and thought it was from the old WDG board. Maybe it's from somewhere else or I think of another HTMLidiot altogether. smile.gif

http://www.cablestockroom.com

I don't see any background image at all on the product pages. unsure.gif
http://www.cablestockroom.com/servlet/the-...tors/Categories
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HTMLidiot
post Nov 23 2006, 12:03 AM
Post #5





Group: Members
Posts: 7
Joined: 22-November 06
Member No.: 1,045



Thats correct. Sorry. The problem is most noticable at the top level category, or second level when there are multiple subcats of the second level. The idea was to not blast product at the viewer, which is the ProStores default methodology.

Go here for an example:

http://www.cablestockroom.com/servlet/the-...ideo/Categories

Then here to see that it also happens when the product IS displayed:
http://www.cablestockroom.com/servlet/the-...able/Categories


The image is the exact image as is one the homepage/storefront but with added text from Photoshop. I'll be doing something like this for each cat with no product if I can find an answer.


And trust me...I AM the real htmlidiot!!! Don't know who that other imposter was. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HTMLidiot
post Nov 23 2006, 12:15 AM
Post #6





Group: Members
Posts: 7
Joined: 22-November 06
Member No.: 1,045



Just noticed this....you can see the exact same effect if you use the "restore/maximize" button in the upper rt corner of your web browser. Or, just continuously resize the browser window with the mouse cursor. You'll see the homepage maintains aspect ration, the other two I listed do not!


BTW- Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2006, 12:19 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE


Then here to see that it also happens when the product IS displayed:
http://www.cablestockroom.com/servlet/the-...able/Categories

Still see no background. tongue.gif

The image is 756 pixels wide so there wouldn't be room for it on 800x600, given the browser chrome and the menu. But if used as background it should be cropped off.

QUOTE

And trust me...I AM the real htmlidiot!!! Don't know who that other imposter was. wink.gif

OK. Someone is using the same name as you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HTMLidiot
post Nov 23 2006, 12:53 AM
Post #8





Group: Members
Posts: 7
Joined: 22-November 06
Member No.: 1,045



That's true, it is 756 pixels wide, but why is the same 756 pixel wide image working on the homepage!? I'm with the understanding that the width="100%" is what's supposed to dynamically adjust the "viewport" (for lack of a better word).


I've attached the image you should be seeing as background at http://www.cablestockroom.com/servlet/the-...ideo/Categories
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2006, 01:29 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE(HTMLidiot @ Nov 23 2006, 06:53 AM) *

That's true, it is 756 pixels wide, but why is the same 756 pixel wide image working on the homepage!?

I don't know because I can't see the non working background. If it worked it would get cropped in a smaller window, just as it does on the front page. The difference is that the other image contains text so the text would be cropped too.

QUOTE
I'm with the understanding that the width="100%" is what's supposed to dynamically adjust the "viewport" (for lack of a better word).

It will make the table, in this case, take up all available width. If the window is smaller, the table will be smaller and vice versa. Maybe what you want is to make the table, or the td, as wide as the backgound image?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2006, 01:39 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE

I've attached the image you should be seeing as background at http://www.cablestockroom.com/servlet/the-...ideo/Categories


OK, I looked at the source. You don't use it as a background. You try to stretch an inline imgage.
QUOTE
CODE
<img src="/images/background-av.jpg" width="100%" height="100%">

If you try to do that, use only width="100%" and the browser will scale the image. I'm not sure this is a good idea in this case though.

FYI now I only see a big white square on those pages. No image, no merchandise, no nothing except the menu and the header. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HTMLidiot
post Nov 23 2006, 03:17 AM
Post #11





Group: Members
Posts: 7
Joined: 22-November 06
Member No.: 1,045



First off, thank you so much for all your help. biggrin.gif I'm sure I'll get it there but it's really frustrating. You're not employed by ProStores by any chance are you? wacko.gif


You wrote: OK, I looked at the source. You don't use it as a background. You try to stretch an inline imgage.

You are correct. The way I have to do this is, PS, in their "admin tools" allows one to assign an image to top level categories. It looks like they assign it this variable: "$category.photoimage".
This is the original line in the code: <img src="$category.photoimage" width="100%"> actually, I added the width= statement...which doesn't work. What you're seeing (<img src="/images/background-av.jpg") is the result of the previous few lines of code that tells it which specific $category photo it needs to reference. The image must change based on which top-level cat is selected.

Since it's not technically a background, is there a way that's syntactically correct to use the <img src="$category.photoimage" width="100%">, but assign it as a background??? I've looked, but to no avail and what I've attempted just bombed.

I did try this in place of the aforementioned line (I know it's probably ridiculous!):
<TD background=img src "$category.photoimage" width="100%" height=500></TD>

This actually works for the image. It was displaying the image OK and within the boundaries, but when I drilled down to a sub-cat with product to display, the three column product listing still overlapped. This tells me there's still some mysterious table or something like that hiding somewhere. your comment about "not being a background" leads me to believe that's likely the issue there and if I could actually assign it as a background, it'd be probably a more sound approach than the <TD>.


Again, thanks SOOO MUCH for your help and have a terrific Thanksgiving!!! smile.gif


The HTMLidiot excl.gif





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2006, 04:29 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE(HTMLidiot @ Nov 23 2006, 09:17 AM) *

First off, thank you so much for all your help. biggrin.gif

But I can't help really, because I can't see the stuff. Are you looking at cached pages maybe?

QUOTE
I'm sure I'll get it there but it's really frustrating. You're not employed by ProStores by any chance are you?[/color] wacko.gif

Yes. I'm their code detective. ninja.gif


QUOTE
You are correct. The way I have to do this is, PS, in their "admin tools" allows one to assign an image to top level categories.

So ditch PS and look at the code.


QUOTE
Since it's not technically a background, is there a way that's syntactically correct to use the <img src="$category.photoimage" width="100%">, but assign it as a background??? I've looked, but to no avail and what I've attempted just bombed.


I assume you position the image behind the text to get it in the "background"?

QUOTE
I did try this in place of the aforementioned line (I know it's probably ridiculous!):
<TD background=img src "$category.photoimage" width="100%" height=500></TD>

I wonder why you don't just use it as a background image? tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 23 2006, 06:29 PM
Post #13


WDG Member
********

Group: Root Admin
Posts: 8,289
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



CSS3 may offer the ability to stretch background images, but browser support is years (if not decades) away. In the meantime, your best bet is to use a background color that blends with the appropriate edges of the background image, and to specify a non-repeating background image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th February 2019 - 06:27 PM