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;
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
Facebook page like button(not box) ruins the responsiveness of my website in mobile. Below is the code for the Facebook like button:
<div class="fb-like" data-href="https://www.facebook.com/myamazingfbpage" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
While the responsive structure is intact, there is a huge white space/block/section towards the right side of the viewport. Nothing is protruding from the website layout to force that white space/block/section. The buttons are in a left sidebar.
I have tried displaying it as inline-block, floated it to extreme left, reduced it's margin and padding to 0. Moreover, it also makes the twitter follow button next to it unclickable. I have also tried to <span> the <div>.
All to no avail.
Thanks my friends in advance. :)
It looks like you're using a WordPress plugin and that plugin's custom CSS is causing the issue. Not sure if you've set it up properly or just a bug with the plugin's CSS.
The culprit is this CSS selector:
.fb-like span {
overflow: visible!important;
width: 450px!important;
margin-right: -375px;
}
The selector above is targeting a <span> that is the immediate child of the <span> you posted in your question.
You'll notice in Dev Tools that your span is 75px wide even though the button has been given a specific width of 49px. That is due to the selector above. The selector above tells it to be 450px wide then essentially subtracts 375px via a negative margin, leaving you with 75px which creates the extra space on the right side as the button is only 49px.
To fix the issue you'll either need to:
Reference any docs that might be available for that WordPress plugin to ensure that you have configured it properly.
Remove the selector if possible.
Override the selector if you cannot remove it.
WordPress Plugin in question: Easy Social Share Buttons
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 7 years ago.
Improve this question
I have two questions, in the NAV I´m making with CSS I use a div box as a sub-menu which comes up when hovering the menu. But I use also a CSS made triangle which is right underneath the menu. Here is the sample I use:
http://jsfiddle.net/f0t20sej/
Here are the two problems.
<div class="arrow-up"></div>
This is the div with the arrow
One: How could I center the triangle depending on the with of the list item? Cause the width is variable and I was looking to center that but haven’t found out how.
The div that displays after hover is the next
<div class="dropdown"> </div>
Two: When you hover over the menu the submenu comes up, BUT when you try to go to the submenu it closes cause of the margin I put so the triangle can be seen. Only if you hover through the triangle will the submenu stay open, but its kind of hard to figure that out and not really helpful at all. I need for the margin space to be hover also so the submenu wont disappear before getting to it.
Any ideas are welcome on both of them :D Thanks in advance for the help.
For the margin space and triangle issue, maybe you could put a transparent div (with padding) behind the triangle & menu.
background-color:transparent;
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.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a quick question about CSS positioning. I have already looked up all about absolute, relative, static etc but am still having problems. So, for example, on one of my webpages, I am using four different div's for the four seperate sections I have on the page. I can manage to position them so they look perfect, but the top left section expands as the user adds entrys. When it expands, it then overlaps the section below it. Same with the other side, the section expands a little if it needs to display error messages and overlaps the section below it. Any suggestions as to how I would overcome this?
Thank you !!
If you want divs to flow normally on a page, you don't have to use positioning. Generally, if you are using positioning, you use it for a div that you want to have in a specific place that would in a normal situation, be somewhere else. For example: you would position something relatively if you wanted it to actually escape the container it is in. You would position something absolutely if you want it to be in exactly the same place, no matter what (this includes scrolling) OR if you want to overlap divs using a z-index.
Usually, if you just want divs to line up side by side, you can display: inline or use float.