help position a sidebox using position:absolute; Zencart

Please LogIn to Reply!

Post By: guest | 01-11-2013 07:57 Reply

Question




Hi,



I have positioned a new sidebox using the following code in my stylesheet:


PHP Code:


#absolutelinksContent {

position:absoluteleft:1420pxtop:76px;






The trouble I'm having is that it displays too far right on smaller screens.



Position relative is no use to me as the contents move as the side menus become longer.



Does anyone know how I can get position:absolute; to work on all screens?



As I'm using this in my stylesheet.css I cannot wrap it in a <div> tag which would normally be the solution...



Anyone got any ideas?






Answers




1420px?????

Which site....

What coulmn do you have this in?

Why 1420px?

What column do you want this is?









Hi Kobra,



www.dystynction.com



It's the languages flag widget which on my screen is directly above the Customer Services menu button.... but on my laptop is way off screen to the right...



My problem is getting the widget to appear in the same position on all screens.



The inherent position of the widget is inside a custom left sidebox. I had to put it in a sidebox so that it does not appear in SSL pages and cause the dreaded NON SECURE message in IE



I use 1420px from the left so it appears on the right (I don't use the right sidebox)









I can get this to position perfectly on all screens by setting the position of the NOSSL sidebox to the very top from admin, then using position relative as opposed to position absolute.



This only causes one very small annoyance, the white space where the box contents would be (before position relative) is still there and it pushes the categories down the page a little too far.



I've tried setting the height of the contents and the height of the header bar to 0px like this:


PHP Code:


#absolutelinksContent {

height0px;

position:relativeleft:1020pxtop:-98px;

}



#absolutelinksHeading {

height0px;

displaynone;






but there's still a large gap..









OK, solved it eventually buy setting top and bottom padding plus top and bottom margins, all to 0px.



Now I think I have a pretty nifty widget, right above customer services button on all screen sizes.



If anyone else would like this NOSSL widget installed on their site, PM message me or post back and I'll try uploading full instructions.









For anyone who would be interested in having this Google languages widget on their site, I have created a mod and uploaded it to the Zen Cart Downloads area. It can take a few days to appear, but meantime, here is a link to the mod.



http://www.dystynction.com/NOSSL_GOO...ION_WIDGET.rar






Reply Or Comment!
Please LogIn to Reply!