I'm trying to create rounded corners with a header and a footer. I was able to force the header to be on top, but I don't understand why I can't force to footer to be at the bottom.
In fact, position absolute; bottom:0; does that but my footer in only the lenght of the text. When I add width:100%;, the footer becomes larger then the ???
Here you can see my code: http://jsfiddle.net/fleduc/GN9q5/
You set left: 0 and right: 0, not width: 100%; - see test http://jsfiddle.net/thebabydino/GN9q5/3/
You might also want to read this http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
It's true that you have absolute positioning here and width: auto won't do the trick in this case, but you have to understand that width: 100% means the width of the container without paddings and borders (unless you use box-sizing: border-box)
You have specified the div's width in px, so can you just specify the footer's width in px? Example: http://jsfiddle.net/GN9q5/4/
Only change this css and it is gonna work ;-)
.rcs .ftr {
margin:110px 0 0 0;
font-size:1.2em;
padding:5px 0px 5px 10px;
border-bottom-left-radius: 0.35em;
border-bottom-right-radius: 0.35em;
border-top:1px solid #AAAAAA;
}
See the test http://jsfiddle.net/GN9q5/5/
Absolutely-positioned elements are no longer part of the layout. They have no idea how big the parent element is, so you have to set the width to a static value.
You must set your width with a absolute value and calculate the padding.
For exemple:
If you have a width of 960px and a padding of "5px", your with must be 950px.
You SHOULD remove it for reason that I don't exactly know.
/*footer*/
.rcs .ftr {
margin:0;
font-size:1.2em;
padding:5px 5px 5px 10px;
position: absolute;
bottom: 0px;
width: 385px;
border-bottom-left-radius: 0.35em;
border-bottom-right-radius: 0.35em;
border-top:1px solid #AAAAAA;
}
You have the container width set to 400px. Left & right padding = 15px, so subtract that and set your width at 385px.
More info: absolute vs relative position width & height
Also, make sure to close all of your declarations.
Related
Here is my example code:
body {
margin: 0;
padding: 0;
border: 0;
background: #444;
}
#container {
width: 25px;
margin: auto;
margin-top: 2px;
padding-top: 1%;
border-bottom: 3px solid #58e;
background: #fff;
}
<div id="#container">text</div>
When I run it in chrome and inspect element the computed style of the div, the width is coming as 25px as defined above but the padding-top is coming as 13.65px.
I know that the padding-top is calculated based on % of the width of the element. So it should be 1% of 25px or 2.5px.
Why is it coming as 13.65px?
On MDN for padding :
Percentages refer to the width of the containing block [source]
This means percentage padding is calculated according to the width of the parent element, not the element itself.
In your case padding top for #container is calculated according to the width of <body>.
I have some strange behaviour in using padding.
I have a div as a wrapper. This wrapper has a padding of 25px to both sides:
.wrapper #header #navline #log form .small {
height: 25px;
width: 180px;
padding: 5px 25px;
}
in that wrapper I have an input field with the following css:
input[type="text"],[type="password"] {
font-size: 10px;
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
padding-right: 5px;
outline:none;
}
and as error class:
input.error {
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 160px 50%;
width: 165px;
padding-left: 5px;
padding-right: 20px;
position: absolute;
z-index: 3;
}
so I'm getting crazy through setting it up the right way. The problem is that chrome/safari and Firefox seems to be different in handling padding properties. For example when leaving height property in chrome/safari there is something like padding top/bottom automatically added to the input field. in firefox there is a different height of the input field. to show an image:
firefox:
chrome:
the main problem is that I would like to center the input field in the wrapper div. the width of the input should be 180px. this means there is 25px to each side left. the text padding is also 5px to each side. so when using padding properties the new the width of the input field is the width minus the padding. so this will be the first question. when using pading-left and padding-rightof 5px is this equal to 180px(width input field) minus 10px (padding) or is the padding 0px because of the left hand side +5px and right hand side -5px? so what will be the correct width of the input field?
Second question is regarding to the error class. In that I will add a picture and would like to increase the right hand padding from 5px to 20px. even here the question whats the width of the input field? I thought the logic behind would be 180px minus +5px left, -20px would be 165px?
Third question: I tried all method but the result was different to each browser. Is there a failure behind my logic because padding should be padding or not?
Add css3 box sizing to every element that has padding. It will fix the issue.
.text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Like this
With only this code
<span>1</span>
http://jsfiddle.net/MafjT/
You can use this css
span {
display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px; /* or 50% */
border-radius: 30px; /* or 50% */
background-color: black;
color: white;
text-align: center;
font-size: 2em;
}
Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.
This solution always renders a circle, regardless of content length.
But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/
Resize with content - Improvement
In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.
Using CSS3:
span
{-moz-border-radius: 20px;
border-radius: 20px;
border-color:black;
background-color:black;
color:white;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:1.3em;
}
http://jsfiddle.net/NXZnq/
You have many answers now but I try tell you the basics.
First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.
Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.
Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.
Practical Example.
The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
The Syntax:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Examples:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
I your case
span {
border-radius: 100px;
background: #000;
color : white;
padding : 10px 15px;
}
Check this Demo http://jsfiddle.net/daWcc/
In addition to the other solutions, http://css3pie.com/ does a great job as a polyfill for old internet explorer versions
EDIT: not necessary as of 2016
If you do:
<div style="width: auto; background: red; color: white">test</div>
You get a div that is stretched to fill the entire screen width (100%). That is what I need to happen.
However, I also need the starting position to be set. So, I need position: absolute.
When I add position:absolute, the width of the div is only as wide as the content within (similar to floats). Is there any way around this?
I cannot simply specify width: 100% since this does not take in to account border sizes, etc.
When I add position:absolute, the width of the div is only as wide as
the content within.. (Similar to floats). Is there any way around
this?
I cannot simply specify width:100% since this does not take in to
account border sizes, etc..
You could use position:absolute; left:0; right:0; top:0.
Like this: http://jsfiddle.net/thirtydot/yQWGV/
You can use width:100% and the css attribute box-sizing, to get the box model working like IE 5.5, i.e. padding and border counted into the width.
div.absolute {
width: 100%;
border: 5px solid #000;
background-color: #F00;
position: absolute; top: 100px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 50px;
}
Here's a fiddle: http://jsfiddle.net/dJtm2/
Be wary though, as it's a relatively new CSS3 attribute and will only work in newer browsers, and as you can see from my example requires the dreadful counter-productive measure that is vendor prefixes.
simply write like this:
div.absolute {
border: 5px solid #000;
background-color: #F00;
position: absolute;
top: 100px;
padding: 50px;
left:0;
right:0;
}
http://jsfiddle.net/dJtm2/1/
in this padding & border not increase the width of the element.
I think I might already know the answer to this one but I need a sanity check!
Say I have
#gridtest{
width:590px;
}
I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:
#gridtestpercent{
width:59%; /*590/1000*/
}
If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do
#gridtest{
width:570px;
border:10px solid red;
}
I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.
#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}
I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.
If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?
Cheers!
You could use CSS3 calc() function,
.selector{
border: 5px solid black;
width: -moz-calc(50% - 10px);
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
}
SASS mixin
#mixin calc($property, $expression) {
#{$property}: -moz-calc(#{$expression});
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
article {
border: 1px solid red;
#include calc( width, '100% - 2px')
}
You could use an inset box-shadow instead of a border:
box-shadow: 0px 0px 0px 10px red inset;
Just pad the inside of the container to compensate.
Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.
The accepted answer is not correct. You actually have 2 options:
Use the box-sizing property, so all the paddings and borders are considered part of the size:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
border: 2px solid black;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Or, use the outline property instead of the border property. You will still have problems with the paddings, but it's easier to add. Example:
.column {
width: 16%;
float: left;
margin: 0 2% 0 2%;
background: #03a8d2;
outline: 2px solid black;
}
Full explanation: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).
If you want to stay semantic you can use div { box-sizing:border-box; } or some absolutely positioned :after elements. See the post How do I add 1px border to a div whose width is a percentage?
In CSS3 you can also use the new box-sizing property to include the pixel and padding count into the width of the element:
box-sizing: border-box;
If possible, depending on your design, what I like to do is put the border as an absolute div with a width of 3px ( for example ) and a height higher than its parent div. I then set overflow hidden on the parent div.