Layering Divs
-
-
- miquael
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
I did a bunch of research, and now I still am not able to find a way to layer some DIVS in the gantry framework. I am doing some fancy border styling on the rt-top and rt-header area, and grouping them as a single object by including a new rt-screen div in the index.php:
<!- Begin Screen --> <div id="rt-screen"> <div class="rt-container"> <?php /** Begin Top **/ if ($gantry->countModules('top')) : ?> <div id="rt-top" <?php echo $gantry->displayClassesByTag('rt-top'); ?>> <div class="rt-container"> <?php echo $gantry->displayModules('top','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Top **/ endif; ?> <?php /** Begin Header **/ if ($gantry->countModules('header')) : ?> <div id="rt-header"> <div class="rt-container"> <?php echo $gantry->displayModules('header','standard','standard'); ?> <div class="clear"></div> </div> </div> <?php /** End Header **/ endif; ?> </div> </div>
This works great for applying my fancy border to rt-screen, but the elements of the rt-top and rt-header are overlapping the rounded edges of the rt-screen border (I assume because they are in default in front on the z-index).
I tried doing a bunch of variations of applying z-index values in my custom css, tho it never seemed to work:
#rt-screen .rt-container { z-index: 12;} #rt-header { z-index: 1;} #rt-top { z-index: 2;}
How do I go about doing this?
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Please provide your website's URL so we can assist you better.
Thank you. - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- miquael
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
Here it is (STILL IN DEVELOPMENT):
mythicsystems.com/home/
See the very top of the page. The entire area above the menu is the rt-top and rt-header, which is now embedded in rt-screen. See how the curved left and right boundary on rt-screen is being overlapped by both the logo widget and graphic element in the rt-top and by the slideshow widget in the rt-header?
I found some ways to possibly work around this, tho the optimal way would be to just have the borders on rt-screen be at a higher z-index than the rest. How to do this?
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
This is because of border-radius applied on the container element. Applying the same border-radius on slider images should fix this:
.meteor-slides .mslide img { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
Time to create page: 0.062 seconds