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
I am using this piece of code in order to have a "Sale" ribbon on top of an image. The problem is, every time I refresh the page the ribbon appears, as it should, however, after half a second the ribbon disappears, no where to be found.
Here is my code:
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
Is it the position that is the problem? Or could it be something else?
Your div with id="wrap" has a z-index of 9999 while the ribbon has a z-index of 1.
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 7 years ago.
Improve this question
Okay so i have this website: lendenapp.com, and the theme is using triangle images to give a slant to each section, if you take a look you will understand.
The Issue is that the Top 2 Triangle images are not displaying over the section, the others lower though are.
I am not sure what i am missing, perhaps its a very simple css issue?
Here is the code:
.triangleTop {
position: absolute;
top: 0px;
width: 100%;
height: 80px;
display: block;
z-index: 99;
border: 1px solid black;
}
<img class="triangleTop" src="http://lendenapp.com/wp-content/themes/delicious/img/tri-white-top.png" alt="">
If you seen more code you can please ask and i can provide it.
Thanks
Alex
It's the overflow-x: hidden; on the #contentWrapper that causes the problem. If you remove it it works as intended, and it doesn't seem to be needed anyway?
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
This issue has had me scratching my head for a few days now. I have a website with a set CSS background with no scrolling - works well. However, on pages that are fairly long there appears an exact duplicate of the background, seemingly scrolling in FRONT of the other background.
You can see it illustrated on this page:
http://www.joyrocks.com/corporate/
I've scoured through the CSS and I'm sure I'm missing something simple, but I was hoping some fresh eyes could point me in the right direction. Cheers!
Edit: Got it solved! Sorry this may have been off-topic. Will keep that in mind in the future!
It took me a second to realize what was happening here. Now I'm not sure why it appears to be duplicated like that. Could have something to do with the background being fixed. I think your main issue here though is the body/html height.
body,html{
height: 100%;
}
That only sets the height of the viewport meaning there is still a lot of overflow that's not being covered by that.
I changed height to min-height and it seemed to have fixed the problem :)
body,html {
min-height: 100%;
}
You have a body:after rule that is applying the same style as your body.
There are two offending rules causing this:
body, body:after {
background: url('/wp-content/uploads/2014/05/background-new-2.jpg') top left fixed repeat;
}
body:after, ul.tabs li a.active:after {
content: "";
background: #FFF;
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
Remove the body:after definitions from those and you will be fine.
You must delete body, from this css line:
body, #section-tophat, #section-footer, #section-sub-footer
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
in my top menu for some reason appeared a height size that shouldn´t appear, the size of my top menu is the same of the hoover link menu (hoover) and it appears some height that i cant find from where it came. Here is the link:
http://codepen.io/anon/pen/JsCGE/
You need to remove the margin on the left and right classes.
#menu ul.right{
float: right;
margin: 0; /* Add this */
}
#menu ul.left{
float: left;
margin: 0; /* Add this */
}
Is this what you're looking for?
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
I've looked at every similar question I can find here. I have a div for my right column, and then a div for my footer. But if my right column gets too long, it covers up the footer. What is wrong?
Site: http://www.powerhousestudios.tv/2013/
On your DIV
<div id="rightcolumn">
CSS READS
#rightcolumn {
width: 300px;
float: right;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ffffff;
height: 410px;
Remove the Height Parameter to fix your problem.
The rightcolumn div has a fixed height of 410px, which it seems it's not enough. Just remove the height property.
Your using relative positioning on the upcoming div. That with a z-index of 999 is making it cover your footer div.
Try:
upcoming { z-index: 0;}
and remove the spacing paragraphs in that div to get the effect you want.
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
I have responsive menu in middle of div.
After I resize screen menu moves to right of screen.
Preview example: >>> CODE here <<< (all html/css/js are accessible via web)
it looks like this >
Question:
How to align it to right as in picture ...
Thank you in advance.
PS: code is in example link (html file)
div.content-menu {
position: relative;
}
ul.nav {
position: absolute;
right: 0px;
}
Add position: relative; to .content-menu, and position: absolute; right: 0; to .nav (both in the mobile-size media query).
EDIT And also maybe remove the width on .nav, and .nav > li and change them to max-width: 280px; min-width: 200px; so that it won't break on screens smaller than 300px.
Hope that helps.