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?
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Please how to do this chart in HTML and CSS ??
Where the circles are buttons ..
Use the following:
Your basic circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50px; /*Make it a circle (border-radius = 1/2*width & height)*/
background-color: hotPink;
border: none;
}
<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->
Then use position: absolute; with the left and right properties to position the circles.
Have a `Live positioned in the middle of your page with:
<style>
#text {
font-family: MyFont, sans-serif;
color: white;
}
<style>
For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit
Use the above to help you create what you want, but as has already been said,
This is not a code generating service, try yourself and ask questions about the code you're having trouble with.
In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck
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 designed a website. Everything works on desktop but on mobile, it is not scrolling right or left. When I open the browser on my mobile, it is showing one-third of the website and won't let me scroll to the right. What is the problem and how do I fix this?
CSS
#container {
background-color: #f9cbdf;
width: 100%;
overflow: hidden;
background-image: url(images/webtreats_baby_pink_pattern_21.jpg);
background-repeat: repeat;
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
Remove
overflow: hidden;
from #container.
When overflow: hidden; is used the overflow is clipped, and the rest of the content will be invisible
The default value for overflow is visible.In this case, the content is not clipped
If overflow is set to auto, the browser decides whether to clip or not.
See more about overflow here
You need to use `overflow:scroll , check the example
.overflow{
width:200px;
overflow:scroll;
}
<div class='overflow'>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
if you want to let the users scroll all sides and if you want only x axis useoverflow-x:auto;and for yaxis overflow-y:auto;`
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.
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.
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.