Image Position and Horizontal Scrollbar on Site

[DBB1]

Hello,

I read on the forum that it is better to use relative positioning of images instead of absolute, so as to accommodate various browser resolutions. I had a shopping cart image in my header that I had positioned with absolute:

#cart_img {
    position: absolute;
    right: 115px;
    top: 44px;
    }

I changed the position to relative, and adjusted my horizontal/vertical positions as necessary, on this and a couple other images I had positioned in this manner. Things looked fine - or so I thought...

I had a couple more tweaks I wanted to do before submitting my site for review. I installed Comodo Trust Logo Contribution, but then noticed that my site, which previously fit nicely within the browser, now had a horizontal scroll bar. The site still loads correctly, but bumps the empty site background out far to the right, enough so that the scroll bar kicks in.

I completely removed this contribution, but any subsequent attempts of positioning my cart image results in the scroll bar, whether I use relative or my old absolute positioning controls.

The Comodo Trust Logo Contribution contribution used the following javascript code in a php file, which was located in my template's jscript folder:

<script language="javascript">
//<![CDATA[
var cot_loc0=(window.location.protocol == "https:")? "https://secure.comodo.net/trustlogo/javascript/cot.js" :
"http://www.trustlogo.com/trustlogo/javascript/cot.js";
document.writeln('<scr' + 'ipt language="JavaScript" src="'+cot_loc0+'" type="text\/javascript">' + '<\/scr' + 'ipt>');
//]]>
</script>

Anything in the above code that could have fouled something up? The contribution does not seem to be supported any longer, or I would have posted it there.

More importantly, what can I do to get my image back to the right side of my header area, without invoking the horizontal scroll bar?

Thanks,
DBB1

[DBB1]

Well,

After I posted this, I continued to mess with it in my stylesheet. I'm not sure what I did differently, but I finally was able to get my 30x30px image placed back where I wanted it using the absolute position.

Maybe this was more a function of a sleepless night instead of the Comodo contribution; I saw some posts from the author on how this messed with Image Handler2, and so thought I had fouled something up. Still not totally convinced I didn't...

But still, why did using the relative positioning method invoke the browser's horizontal scroll bar?

I finally got the relative position to work using {float:right} in the cart image block, and so for now, that seems to have fixed it - no scroll bars!

#cart_img {
        position: relative;
        float: right;
        right: 115px;
        bottom: 40px;
        }

Of course I stumbled on this just minutes after making my post. I would have deleted it if I could have, so I thought I'd follow through with what I've since found...

-DBB1

[kobra]

Where is a link?

[limelites]

Yes, please post a link to your site. There are various reasons why you'd choose either relative or absolute positioning but relative positioning is likely to cause you problems with empty white spaces.

Post a link and I'll take a look.

[DBB1]

Where is a link?

Post a link and I'll take a look.

Like I said, I'm not quite ready for review, but my site is www.gadgetfancy.com.

I still have to figure out the sidebox banner situation; would like to get rid of the "Have you seen..." header, and just leave that space to rotate various banners in, but that's another post...

Thanks!

DBB1

[kobra]

Like I said, I'm not quite ready for review

We are not reviewing it just trying to provide answers to your querries

More importantly, what can I do to get my image back to the right side of my header area, without invoking the horizontal scroll bar?

Either you or the template has crapped up the default code for the logo by using tables meant for tabular data, not for design
#cart_img is not a standard tag so you might have to revert to standard files/code
Try using standard code and rename your image, GadgetFancyP4a2.png, to logo.png and follow the tutorial
https://www.zen-cart.com/tutorials/i...hp?article=125

I still have to figure out the sidebox banner situation; would like to get rid of the "Have you seen..." header, and just leave that space to rotate various banners in

For this and other alterations
https://www.zen-cart.com/tutorials/index.php?article=38
https://www.zen-cart.com/tutorials/index.php?article=39

[DBB1]

Either you or the template has crapped up the default code for the logo by using tables meant for tabular data, not for design. #cart_img is not a standard tag so you might have to revert to standard files/code
Try using standard code and rename your image, GadgetFancyP4a2.png, to logo.png and follow the tutorial
https://www.zen-cart.com/tutorials/i...hp?article=125

No, the logo is good the way it is... Either way, I would have had to change it from .gif to .png, so no diff, really, unless there is some other base ZC code that specifically acts on logo.gif. I also created the #cart_img ID as a means to make what was an otherwise non-interactve background image, clickable (previous post).

The issue I started with this thread was not about the logo or #cart_img ID, but rather the {position: relative;} tag's effect on the browser's invoking of the horizontal scroll bar. I got around it using {float: right;} in the same block.

DBB1

[kobra]

No, the logo is good the way it is...

I suggested you conform to standard code - - tables for design is out dated
You can choose not to but if it is "good the way it is", then you would not be posting about positioning...?

I would have had to change it from .gif to .png, so no diff, really, unless there is some other base ZC code that specifically acts on logo.gif.

If you read the tutorial then you would realize that the image type can be altered form gif, jpg, png, etc
And yes there is default code that interacts with it and why I am suggesting that you make it more inline with the base code

I also created the #cart_img ID as a means to make what was an otherwise non-interactve background image, clickable (previous post).

Again, in the tutorials there already exists a couple of standard div's for this so you did not need to create one

The issue I started with this thread was not about the logo or #cart_img ID, but rather the {position: relative;} tag's effect on the browser's invoking of the horizontal scroll bar.

See item #1

[DBB1]

I suggested you conform to standard code - - tables for design is out dated
You can choose not to but if it is "good the way it is", then you would not be posting about positioning...?

I guess I'm not following, then. I'm not having issues with my logo, nor did I add a table, so maybe you could point out where that is getting used. I simply changed 'logo.gif' to 'GadgetFancyP4a2.png' in a fresh install of the latest GF version and my template, so this must be a function of the template. My issue was with my little 30x30 cart image, which is not part of my logo.

And I've read many of the tutorials. You know, there are tons of stuff on this site, many of which seem to be outdated and may only apply to older ZC versions. I always try to do my due dilligence to find stuff on my own before firing out a post (quite frankly, I too get tired of recent posts asking how to remove 'Powered by Zen Cart,' etc...), so hats off to you core ZC folks. It's difficult for new comers to navigate through, and try to be as self sufficient as possible, without constantly pestering those who live and breath this stuff every day.

I frankly don't recall seeing anything regarding a standard div that I could have used for controlling the cart image, without affecting something else. Adding the div was what I had to do to get the cart background image on the template clickable. If you could direct me to the proper tutorial, I'll read it, though.

Thanks,
DBB1

[kobra]

nor did I add a table,

Someone did,,,,
From your source

<div id="headerWrapper">

<div id="dummydiv" style="height: 20px;"></div>

<div id="logotop">

<table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="tbllogotop">
    <tr>
        <td width="9px"><a href="http://www.gadgetfancy.com/gadgets/"><img src="includes/templates/premium4a/images/logobg-left.gif" alt="" width="9" height="84" /></a></td>
        <td valign="top">


<a href="http://www.gadgetfancy.com/gadgets/"><img src="includes/templates/premium4a/images/GadgetFancyP4a2.png" alt="" width="632" height="81" /></a>


            </td>
        <td width="9px"><img src="includes/templates/premium4a/images/logobg-right.gif" alt="" width="9" height="84" /></td>
    </tr>
</table>

I frankly don't recall seeing anything regarding a standard div that I could have used for controlling the cart image,

No tutorial for making clickable but this is standard html stuf
Depending upon image and how one wants it displayed could be added as background image to
#logoWrapper or #headerWrapper

But what ever works for you -- - it just makes it more difficult for the community to offer advice - - the more you deviate from standard practices