Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Hello I would like to know how I can make 2 div's one hovering another in this case the left is hovering the right one but the elements like button's etc to be active on the both div's the left one to have priority. Bellow is my code where the left div is overtaking the right div.
I have 2 problems. the right div 1. all his buttons are becoming inactive on the right div. I want them to be active and the height of it to be complete because now since it is on the back the footer is overlapping it.And at the same time the left div to be over the right one but only it's area to be active like buttons and etc.
<div class="left"></div>
<div class="right overlap"></div>
<footer>footer</footer>
CSS:
.overlap {z-index: -1; position: absolute;};
if i understand correctly you are looking for something like this:
[https://jsfiddle.net/9mwb8gx2/][1]
[1]: https://jsfiddle.net/9mwb8gx2/
If i understand correctly, you want the right div to partially overlap the left div. but you are trying to put the z-index for the entire div. you just need to put multiple div inside the left or right div and then put the z-index accordingly.
If you are trying to achieve pop-up with z-index, i recommend you put more code in your question so that we get what you are trying to do, a fiddle will also be helpful.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am facing problem with overlapping div.
Please refer site my site : http://ayurved-infertility.in/index.html
As you can see in the site, top menu and left menu is inside div which is in absolute position and moving with the screen. And content is just behind the absolute div. Also I given background as transparent. so, we can see the behind text easily.
Now, my problem is if I put any hyperlink to the text that is just behind the absolute div, no-one can be able to click on the link because absolute div is overlapping.
So, how can I overcome from this problem ? If it is not possible then please suggest me a better way so, that my website look and functionality doesn't change and I can be able to click on hyperlink in the text.
First of all you could remove the height:500px of the element shown in the screenshot. Now you can click part of the text (green area).
After that you can either remove the left nav and be done with it.
Or place it outside of the table element and give it a fixed position. This is the quickest and easiest solution I can come up with.
In general you shouldn't be using this table method of positioning stuff on a website at all.
Your floating/absolute divs should only be as wide as your left menu item
The DIV surrounding your DL (the menu) should be
width:140px;
position:absolute;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
On my website I have 2 col-xs-6 inside a row. Both columns have an image in each and I want to add text over the top that will move when they do due to img-responsive, however the text doesn't seem to sit in the div but instead on top of it, heres a snip of the code http://www.bootply.com/zVc28CKWFW
Edit: this is not my website but a small snippet of it hence the single col-xs-6
Edit 2: I want my text to stay centered on top of the image when the image is resized, see http://www.triplagent.com/ for a working example, when the browser is resized the images resize as well as the image stays centered on the image and moves with it, this is what I want to achieve.
Your h2 tag is fine, the reason it's not sitting flush with the top of the container is because it's inheriting the browser default margin/padding. If you override these it will sit flush:
http://www.bootply.com/tBlXOzGBde
UPDATE:
http://www.bootply.com/wgihndvcP1
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've been trying several solutions, but the clickable areas for links in my navigation sidebar aren't where they should be. I'm just looking to get the entire div or even just the text inside to be a link.
http://prelude2cinematestsite.weebly.com/
If you hover at the very top of "home" you'll finally locate one of the links. One of the solutions I attempted very early seemed to finally fix the problem, but then caused the entire sidebar to have scroll for width and push the social media icons down passed the bottom of the screen where they refused to budge. Unfortunately I can't seem to find this solution anymore since it's the only one that actually did what I wanted even if it broke a lot of other things.
There was originally supposed to be drop down menus, but even taking them out didn't seem to help.
And this isn't a problem with Weebly, I've checked that.
You do not need to apply position:absolute to the .sidebar-nav div and the #social div. Make them position: relative. They will automatically fall one below the other just as you need them. Then, remove the excessive padding that you've used on the divs to re-position them.
Currently, since the two are positioned absolutely, the social div is overlapping on top of the .sidebar-nav div and inadvertently preventing you from clicking on the buttons.
Adding a negative z-index to #social in your css file will solve your immediate problem but it looks like you may still have to work on the mobile version of your navigation.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Basically I am wanting to mimic this effect using css.
Here is a picture:
Requirements:
Must be semi transparent to allow image below to show slightly
Text within must not be blurred
I have tried using the css filter property but it blurs any content within the element it is applied on. The hard part is getting the image below to show through without using a background image on the overlaying div.
Any help is much appreciated.
If the text is inside the div that is being blurred you cannot restrict that because the text starts at the same blur as that div. What you should consider doing is doubling the div and positioning it absolutely inside a relative container div which is positioned in the right place. Then blur the top div and keep the other div none blurred, because they are both positioned absolutely they will be on top of each other, you may need to user top:0px, example of the div setup.
<div> - relative div, this keeps the other divs in the right position.
<div>Absolute and blurred</div>
<div>Absolute and not blurred - contains text</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
What's the easiest way to put a div just underneath another div that occupies the full height of the browser?
I'm trying to setup the navigation so that when an anchor link is clicked (let's say "About Us", "Contact Us", etc), it just scrolls down to that anchor's position in the page.
So, essentially, the default page occupies 100% of the screen, the About Us occupies the second 100%, and so on.
Here's a jsfiddle first.
You basically make all the divs absolute positioned, taking up the whole screen
div {
position:absolute;
width:100%;
height:100%;
}
Then, you can just make each div a full screen from the top with
#div1 {
top:100%;
}
And you can use 200%, 300%, and so on for the rest
Looks like you are looking for this http://jalxob.com/cool-kitten/
Here is complete list,
http://blog.teamtreehouse.com/open-source-jquery-plugins-for-building-single-page-website-layouts
Try this: http://jsfiddle.net/r8XqV/1/
display block
means don't put anything else on the same row.
On top of that,
clear:both
means make sure you clear both the div on the left and the div on the right. Not needed for this case, but in case you start floating divs left and right this will make sure your bottom div always stays underneath them