...

View Full Version : javascript/css help



disbsymin
01-23-2012, 06:05 AM
Hi,

Can anyone please help me with my website http://syminadive.com/test9.html ?
I have a horizontal scrolling site and I can't seem to get the last section/image in the container no matter what.
the css is here http://syminadive.com/testcss2.css
the section i'm referring to is "epic8" or section 8
The problem will be clear if you visit the page and scroll all the way to the left.

Please help! Thanks.

riptide
01-23-2012, 06:45 AM
is it the black space on the end?

Arbitrator
01-23-2012, 08:47 AM
I have a horizontal scrolling site and I can't seem to get the last section/image in the container no matter what.After some quick messing around, I found that you can get the div#epic8 element in the desired position by moving it in the HTML so that it is the first child element of the div#epic7 element. Then apply the following CSS to the div#epic8 element: position: relative; left: 106px /* width of element */; float: right;.

A better way to do this layout would be to unify the images into a single image and only use that one image as a background image on one element. You will have less HTML and CSS and make fewer HTTP requests to the server.

If for some reason, you need to slice the background image anyway, it makes more sense to set background images on a nested group of div elements (essentially creating a multi-element container) than to create a bunch of empty div elements laid out side-by-side. You could also use the CSS3 Backgrounds and Borders version of the background property which allows you to declare multiple background images on one element.


The problem will be clear if you visit the page and scroll all the way to the left.I think you meant "to the right."


is it the black space on the end?"epic8" is the ID of the div element containing the hanging image on the right side of the document (which is under the form).

JackieBolinsky
01-23-2012, 11:19 AM
Hello...
How about trying jquery? Just paste my edited version of the answer above into your page right before the closing </body> tag. And remove the inline styles you have on your
<div class="content" style=""... and <div class="container" style="". I have a solution, composed of the CSS visibility attribute and JavaScript. Also pay attention to the last note: Account for the users who have disabled JavaScript. You can try setting .a to display: inline-block and setting white-space: nowrap on #main or your container instead.

riptide
01-23-2012, 03:18 PM
After some quick messing around, I found that you can get the div#epic8 element in the desired position by moving it in the HTML so that it is the first child element of the div#epic7 element. Then apply the following CSS to the div#epic8 element: position: relative; left: 106px /* width of element */; float: right;.

A better way to do this layout would be to unify the images into a single image and only use that one image as a background image on one element. You will have less HTML and CSS and make fewer HTTP requests to the server.

If for some reason, you need to slice the background image anyway, it makes more sense to set background images on a nested group of div elements (essentially creating a multi-element container) than to create a bunch of empty div elements laid out side-by-side. You could also use the CSS3 Backgrounds and Borders version of the background property which allows you to declare multiple background images on one element.

I think you meant "to the right."

"epic8" is the ID of the div element containing the hanging image on the right side of the document (which is under the form).

oh the right side, no wonder I didn't find the problem.

disbsymin
01-24-2012, 04:23 AM
Hey,

Thanks for your answer. I actually was just missing a </div> under epic7. once i put that in, the last section showed up. see http://syminadive.com/test9.html it's fine now

I did try to use one large image with different html/js but it didn't quite work. I'll try to figure that out. Do you think I can use similar code (as test 9) to achieve this?

Arbitrator
01-25-2012, 05:59 AM
Do you think I can use similar code (as test 9) to achieve this?There will probably not be many changes required in the HTML aside from eliminating a lot of empty div elements.

Substantive CSS changes will be needed though since most of your content seems to rely on the position of content to the left of it.

And, obviously, you will need a stitched-together image if you don't have one already.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum