Izzy-B Izzy-B - 4 months ago 11
CSS Question

Overriding global css for one-page design

I purchased an HTML5 one-page design web template but the author does not provide support. There is only an index.html file with the menu buttons linking to page anchors further down in the file. This template has a global portion of CSS that places a grouping of z-indexed images across the bottom of the page, to give the template its overall theme. When a menu button is clicked, the content of the corresponding page (i.e., page_ABOUT, page_SERVICES) slides smoothly into place from left to right, with the z-indexed images remaining unchanged. It works beautifully. A LIVE DEMO CAN BE SEEN HERE

My issue is that I need for one page anchor to be unique in that it does not have those images at the bottom. If I create a separate html file for that page, the effect is ruined because it doesn't slide into place as the others do; it causes a page refresh. My question: is it possible to override the global CSS for one page anchor within the index.html page, without having to create a separate html file for that page?

The HTML in the index file that places those images is:

<div class="add1"></div>
<div class="add2"></div>
<div class="add3"></div>
<div class="add4"></div>
<div class="add5"></div>
<div class="add6"></div>


Ideally, I would like one specific page anchor to not be affected by those div classes.

The unique page (page_PRODUCTS) is contained within these div tags:

<li id="page_PRODUCTS">

<div class="slogan"></div>

<div class="box">
<div class="relative">
<div class="scroll">
</div></div></div>


The direct link for the stylesheet is HERE

Answer

While it won't remove the images at the bottom of the page, these styles should make it so that the "page_PRODUCTS" page slide in front of those images

#content{z-index:auto;}
#page_PRODUCTS{z-index:50;}