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 3 years ago.
Improve this question
I have created a panel that is displayed only when triggered, and the content is determined dynamically.
I didn't want to mess with the page flow so I made it being displayed OVER the other divs.
In order to achieve this I have added z-index and display:absolute.
The problem is that cause of display: absolute my div's width is determines by the content, while I want to it be the same despite the content differences.
How to fix that?
Check my css/sass:
.panel-parent{
text-align: center;
display:none;
//display:block when triggered
position:absolute;
z-index:1;
.panel{
padding-top:50px;
padding-bottom:50px;
display:block;
width:95%;
height: auto;}}
you need to set the parent as position:relative and then the child to position:absolute; height:100%
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 1 year ago.
Improve this question
So I centered a div totally fine, but after adding border it's no longer centered. It's positioned just like before, but now there is a border, so it's longer and the content is moved to the right by a border width. How to fix this?
Add to your div :
box-sizing: border-box;
So the border is part of the total object's width and height.
Can you send your css code for applying in div?
Please add this code to your div.
.center { margin: auto; width: 50%; border: 3px solid #73AD21 }
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.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Here's the site:
http://cholakislaw.com/install/
I think it's a tweak I made to the CSS because the demo for the theme doesn't suffer from this issue:
http://www.mojo-themes.com/item/attorneys-lawyer-wordpress-theme/demo/
Best way to do is:
CSS
.slider ul li img {
display: none;
}
.slider ul li:first-child img{
display: block;
}
By doing this, you'll hide all slideshow images and then show only first-child on load. Later, js will do it's trick and overwrite it.
This is due to the fact that the images start to load before the slider component, easySlider in that case, has set height and overflow property of the #slider element. Thus, when the images start to load, #slider is high enough to see more than the first image.
To prevent this, you could add in slider.css the following rules :
#slider {
height: 100%; /* parent element with class .slider has his height already set */
overflow: hidden;
}
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 use a website builder, and there is a custom CSS box, but how do I make my navbar thin like Twitter's navbar? The navbar class is: container
This is pretty hard to provide an absolute answer for without any CSS and HTML, but you should be able to set (where 40px is a sample height)
.container{
height:40px;
}
If that fails, you likely have a rule with a higher level of specificity, so either alter that directly (dont), or extend the above to match or beat it (do).
If you want to play dirty, use !important (not recommended)
.container{
height:40px!important;
}
Depending on the other CSS rules you have in place, you may need to set other properties to get the desired effect, e.g.(and this is a bad example):
.container{
height:40px;
max-height:40px;
min-height:40px;
line-height:40px;
overflow:hidden;
}
Instead of twitter, lets take the example of stack overflow. Class would be container.
.container {
max-height: 100px;
min-height: 100px;
background-color: #000;
min-width: 100%;
max-width: 100%;
}
You are more likely to use max and min properties to make the navbar stay at the full of the top of page.
Other properties are just for styling nothing else. The height depends on the value you provide in the height attribute, you can use max- or even min- or height they would work.
Hey, edit your code:
.container {
height: 200px; // change this value..
}
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.