Currently, I'm working with on http://rccsite.wpengine.com/rcc-remediate/. The page has a slider that has text "Building across Auckland" and a "Read more" button.
I've spent more than an hour already trying to figure out why the nested div that has a class "slide-text" is not bringing the text and the link on the front. Currently the image with class "graphic-square" is on the front that has z-index of 1 it is needed to be on top on the image but not on the pieces of text of the slider.
I tried to add:
.slide-text {
z-index: 200;
position: absolute;
top: 30px;
right: 100px;
max-width: 190px;
}
Already made the z-index on 200 its not getting the desired output.
However, I successfully made the div tag on front, on the right that says "Building better".
Is there anyway to achieve this?
Why is the pager is working when z-index is applied but not on the slide text? I think, I'm missing something here.
Any help would be greatly appreciated.
The issue is just because of the below code:
<img src="http://rccsite.wpengine.com/wp-content/themes/genesis-child-jed/images/graphics-square.png" class="graphics-square">
.graphics-square {
display: block; /* Make it display: none; */
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
z-index: 1; /* Make it z-index: 0; */
}
Just hide the .graphics-square class and things will work OR you can set it's z-index: 0;
Try it at your end and let us know.
I already figured it out! I have to split the the graphics-square image in two parts. Removed the middle part of the image, allowing the text to be on front. And it worked.
Thanks for the idea Matt.
Related
I have position fixed menu element which is hiding whenever you click/touch on darken area. And the problem is that whenever you are scrolling website this blank space appears under menu before it hides
screenshot with issue:
.
I tried to add more height to menu element and setting overflow: hidden to disable scrolling when menu is active but it didn't help. Also i tried to search about this but it's really hard for me to formulate accurate question with words to find some related answers or tips.
I figured out how actually position: fixed is working, and came up with idea how can i solve my issue. So basically, on touch devices position fixed is working only in one way(for example: if you set top: 0 and bottom: auto(or top: 0 and bottom: 0), there will be an empty space at bottom before menu hides, and if you set bottom: 0 and top: auto there will be opposite effect). So i came up with idea to create another layer with same bg-color and same animation effects but with bottom: 0 and top: auto for preventing this blank space on top/bottom side of the menu. So basically, yea, it did solve my issue. Maybe someone is facing same, so i decided to write down this answer.
thanks to #eisbehr for teaching me how to use this and a well learned lesson, I removed my previous answer.
body {
margin: 0;
}
.forceHeight {
position: relative;
height: 200vh;
background-color: lightgrey;
}
.menu {
position: fixed;
right: 0;
top: 0;
bottom: 0;
background-color: blue;
}
<div class="forceHeight">
<div class="menu">
this is your fixed menu
</div>
asdf this has a lot of content
</div>
I am faced with a situation where I am struggling to find a solution. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place.
I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it. Ideally, you should not be able to see any of this image within section 2. This JSFiddle demonstrates my problem.
So I have found a way to overcome this. I essentially gave each section a relative position and then set a z-index.
#sectionTwo {
position: relative;
z-index: -1000;
}
#sectionThree {
position: relative;
z-index:1000;
background: #ccc;
}
This seemed to fix the problem, but one thing I do not like is that when I try to inspect element, it seems to always focus on the body element rather than the section I select.
Anyways, with that fix in place, I was faced with another problem. The section also needed a box at the top, that would overlap into the section above it. I made a quick sketch to demonstrate what I am after
I have noticed however that setting the z-index is now causing me problems. I can't get the box to overlap section one.
Here is my latest JSFiddle which demonstrates where I am at.
So really I am after advice on whether I am handling the z-index correctly, and how I can get the box overlapping section one.
Thanks
Going into positive zindex values seem to fix your problems:
#sectionOne {
position: relative;
z-index: 10;
}
#sectionTwo {
position: relative;
z-index: 20;
}
#sectionThree {
position: relative;
z-index: 30;
}
Is this what you are after? If you are wanting the elements in section 2 to be on top of section 1, you will need to give section 2 a higher 7 index than section 1.
#sectionOne {
background: #ccc;
z-index: 2;
}
#sectionTwo {
position: relative;
z-index: 3;
}
#sectionThree {
position: relative;
z-index:1;
background: #ccc;
}
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.