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
Can't set the border property at the bottom of my html window/viewport...
It's just after the last html element. e.g. div.
Is there a way, so it will be displayed really at the bottom of the window?
Here is my css:
html {
border-bottom:5px solid rgb(17,17,17);
border-top:5px solid rgb(17,17,17);
}
Thanks very much!
In your html add
html {
width:100%;
/*height:99%; Fallback for older browsers*/
height:calc(100% - 10px);
border-bottom:5px solid rgb(17,17,17);
border-top:5px solid rgb(17,17,17);
}
I think this will fix your problem.
Here is the Demo
Try setting your body tags margin and padding to 0px.
You need to specify width and height.
html{
border-bottom:5px;
border-bottom-color:rgb(17, 17, 17);
border-bottom-style:solid;
border-top:5px;
border-top-color:rgb(17, 17, 17);
border-top-style:solid;
width:100%;
height:100%;
}
(here's an imgur album to compare the difference: http://imgur.com/a/Uneo5 notice how in the first image, there's a whitespace under it, which appears to be your issue, whereas with height and width, it reaches the bottom of the document)
Edit: And if you have issues with a scrollbar, try 99%, or 99.5%, etc.
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 8 years ago.
Improve this question
Hi there,
This is in regards to the image I posted above. I feel like it's something that should be easy, but I just can't figure it out. I basically have a DIV that is the container with the darker see through BG and inside it I have some text that's centered. To the left and right of the text I have these horizontal lines of equal width.
Now the trick is that those horizontal lines, change their width based on how much text I have in the middle so there's always the same "padding" around the sides of the text. It's important to note that the background is not a flat color, but an image and the container with the darker BG is see through. If it was a flat color I could just add a thick shadow to the text of the same color as the BG and just have that line be the background of that DIV all the way through in which case the shadow of the text would make it look as its interrupted behind the text. The container also has a dynamic width, something like 80% for example.
Anyone have any idea how I could get this done? Thank you very much in advance!
You can use pseudo element and rgba() colors, this is a common way to do it : DEMO
HTML test
<header>
<h1> MY CENTERED TEXT</h1>
</header>
CSS test
header {
padding:3em;
background:url(http://lorempixel.com/600/50/nightlife) ;
background-size: cover;
}
h1 {
background:rgba(0,0,0,0.5);
color:white;
padding:1em 0;
text-align:center;
overflow:hidden;
}
h1:before, h1:after {
content:'';
width:100%;
border-bottom:lightgray solid;
display:inline-block;
vertical-align:middle;
}
h1:before {
margin-left:-100%;}
h1:after {
margin-right:-100%;}
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 am trying to have my image appear on top of a 300px border, as if the border is a background color for the image. This is my code:
.containerpagecontent { border-left: 300px solid #fff; } img { float:left; }
But it is still not working. What am I doing wrong?
NOTE: I cannot simply use background-color for the image, because the end of the image has to extend off the color.
There is no such thing as:
margin-left: 300px solid #fff;
you probably meant:
border-left: 300px solid #fff;
Also, see if something like this might work for you: http://jsfiddle.net/Lb6Rz/. It's using the padding and background properties on a single element to create a border.
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.