I've got an aissue with 2 divs - both rendered as blocks both have margins of 15px (top div has bottom margin, bottom has top), therefore I expect the gap between to be 30px rather than 15px, is this a correct assumption or am I going mad!?
Cheers
Paul
The CSS box model defines the behavior for collapsing margins, and it is expected behavior among all browsers.
You might also find my answer to this related question to be of use.
Both margins will have 15px, and not sum them. If you want to add them use padding instead.
have had the same issue and couldn't use padding as a fix.
I have managed to fix this with this little hack:
.btn {
/* hack for a 2px margin */
border-top: 2px #fff solid !important;
/* this is important if you have a background-color
and don't want to see it underneath the transparent border*/
background-clip: padding-box;
}
Please launch this snippet for demo:
div {
margin: 10px;
background: rgb(48, 158, 140);
padding: 5px 15px;
font-weight: bold;
color: #fff;
}
.fake-margin {
border-top: 10px solid transparent;
background-clip: padding-box;
}
<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>
Correct - but if it's not working out you could try 'padding' instead of 'margin' - that will probably have the desired effect.
Related
I just want to know how can I add a border to the bottom of my container like this:
http://awesomescreenshot.com/0a551tq923
Assuming the border is white there and the container is above that.
I know it requires some minor CSS but can not figure that out.
Thank you.
I created a JSFiddle to show an example of what you could do. All using CSS.
I could see multiple ways of accomplishing this using the basic example I provided.
The css used for the bottom slant:
#bottom {
width: 0;
height: 0;
border-top: 20px solid black;
border-left: 500px solid transparent;
}
Edit:
Here is another example. More close to the website.
Also the website is using parallax. So it's going to be a little different then what I threw together.
you can do like :
#container {
background:url('path to image which needed as border') no-repeat center bottom;
}
With CSS3 you can do the same of the image that you like, try with:
#container {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
And if you want even the shadow try with:
-webkit-box-shadow: 0 5px 10px #303030;
I've searched and found many questions and answers here but I just can't get this thing to work.
You can view my HTML and CSS here: http://jsfiddle.net/PqjqF/2/
HTML
<div id="SearchBox">
<div id="SearchFieldContainer">
<input class="SearchField" type="text" name="search" placeholder="Search..."/>
</div>
<div id="SearchButtonContainer">
Search
</div>
</div>
CSS
#SearchBox {
width: *;
background-color: #fff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d2d2d2;
height: 40px;
padding: 14px 8px 8px 8px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(92%,#f3f3f3));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 92%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 92%); /* W3C */
}
#SearchFieldContainer {
float: left;
width: 100%;
}
#SearchButtonContainer{
float:left;
}
.SearchField {
border: 1px solid #bdbdbd;
background: #f5f5f5;
-webkit-border-radius: 60px;
border-radius: 60px;
color: #0a0705;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
padding:8px;
margin-bottom:20px;
width:100%;
}
.SearchField:focus {
background: #fff;
color: #000000;
}
.SearchButton {
-webkit-box-shadow: 0px 2px 2px 0px #8a8a8a;
box-shadow: 0px 2px 2px 0px #8a8a8a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2f3c47), color-stop(1, #0f1011) );
background-color:#2f3c47;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #0d060d;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
padding:5px 18px;
text-decoration:none;
}
What I want to have is that the input field will take all the space it has and the search button to be next to it, on the same line.
I tried so many things like hidden overflow and other but it refuses to work :-/
Any help here?
Thanks,
- Shai
Change your HTML a bit to let div#SearchButtonContainer appears before div#SearchFieldContainer.
Add margin-right to div#SearchFieldContainer make enough room for the button. Remove its float: left; style, then it will spread 100% width by default (with some margin at right);
Add float: right; to div#SearchButtonContainer.
View the modified example at jsFiddle
Hm, just try:
#SearchFieldContainer {
float: left;
width: 50%;
}
#SearchButtonContainer{
float:left;
width: 50%;
}
So both divs take each 50% of the width = 100% width. Some more work is need for perfect fit, but basically it should work. Remember to "clear" (If you don't know, look for clear:both).
You're issue is that certain things aren't adding up to 100%. For example the text field itself is set to 100% width but has padding which makes it larger than 100%. If you wrap the text-field in a border you can see it extends past it's containing div. There are a few ways to fix this... Either remove the paddings, calculate the paddings into your total 100% widths, or use the CSS: box-sizing: border-box; Which tells the browser to calculate the width including padding and borders.
The same is true for both of your containers.
I will use the box-sizing method I mentioned above first...
See the following fiddle: http://jsfiddle.net/PqjqF/4/
Here I have added box-sizing: border-box; to both of your containers, the text field and button. I left the borders in place so you can see the edges of your containers. (this is a great technique for debugging your layouts to see where your boxes are)
I have changed width of the containers to 80% and 20% respectively and set the width of the text-field to be 100%. You could also apply a 100% width to the button to make it fill it's container.
See the Can I Use It? for box-sizing for browser compatibility.
Now a solution without box-sizing: border-box;...
See the following fiddle: http://jsfiddle.net/PqjqF/5/
Here, I have calculated the padding's as a percentage, in this case 1% into the width of the element itself. So, 1% to padding left and right (top and bottom doesnt matter), and 98% width = 100%.
Guys I do have two very simple CSS doing same thing(creating a triangle), i Need your suggestion which one is better.
Example 1
.leftArrow {
border-right: 5px solid #000;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
height:0px;
width: 0px;
}
In example above, i am trying to define border for right, bottom, and top separately. Now the problem is if i do need to change border from 5px to 10px. I need to make changes in 3 declaration.
So it's not good to make change every time in 3 declaration for a single change. Suppose i do have arrow for all(four) direction. In that case i do need to make change in 4 X 3 = 12 declaration.
It's very time consuming :(
Example 2
.leftArrow {
border: 5px solid transparent;
border-left-width: 0px;
border-right-color: #000;
height:0px;
width: 0px;
}
In second example I'm defining border or all sides in first declaration "border: 5px solid transparent;". In second declaration i am replacing left border width from 5px to 0px. and in third declaration replacing right border color from transparent to black.
Now in my opening it's also not a good idea to define border width in first declaration and then change it in second.
Same situation for third declaration. I'm changing border color from transparent to black.
Please give me your opinion for this type of situation or if you do have any better idea :)
Use http://sass-lang.com/ with variables.
If I understood you right, you're problem is, that you don't wanna change the same things over and over again?
Then Less CSS could be something for you, it also allows you to e.g. nest your CSS, the best thing is, you can either compile the Less CSS to "real" CSS or include the less.js and you don't have to compile it (but I recommend the first, so it will also work with browsers, which have JS disabled).
I'd do it like this:
border: 5px solid #000; /* Set base style */
border-width: 5px 5px 5px 0px; /* All 5px except left */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
The first line sets a "base" style that is overridden by the next two border- properties. You can use border-width and border-color to set different colours and widths for each of the four sides of the element.
The border-color property above sets the left colour to transparent, but because the left border-width is 0, it doesn't have any effect.
To make things even easier to change, do this:
border: 5px solid #000; /* Set base style */
border-left: none; /* Get rid of left border */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
Now all you need to change is the first border property. The border-left: none takes care of making sure the left border never shows. You don't have to change
This is pretty much as simple as LESS or alternatives, and sticks to pure CSS.
I'm having trouble visualizing what your are trying to do, but if I understood you correctly, you could do something like this to reduce code rewriting:
Define common arrow properties
.arrow {
border: 5px solid;
color: #000;
height: 0px;
width: 0px;
}
And then turn off the borders where needed
Show the left and bottom border only on the left arrow
.arrow.left {
border-right-color: transparent;
border-top-color: transparent;
}
That way you keep the basic styling in the .arrow block.
I would do it like this:
<div class="arrow arrow-left"></div>
.arrow {
border:5px solid #000;
width:0;
height:0;
}
.arrow-left {
border-left:0;
border-bottom-color:transparent;
border-top-color:transparent;
}
http://jsfiddle.net/pdRYE/15/
In this case you have only one border-width declaration and you are using the second class only to hide the border you don't need.
This question already has answers here:
Placing border inside of div and not on its edge
(15 answers)
Closed 1 year ago.
On click I am adding, 1px border to div, so Div size increases by 2px X 2px.
I dont want to get div size increased. Is there any simple way to do so?
Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.
EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..
This is also helpful in this scenario. It allows you to set borders without changing div width
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Taken from http://css-tricks.com/box-sizing/
If you don't have a border-radius change border to outline:
outline: 1px solid black;
Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:
.some-element {
border: solid 1px transparent;
}
.some-element-selected {
border: solid 1px black;
}
Why it's better:
No need to to hard-code the element's width
Great cross-browser support (only IE6 missed)
Unlike with outline, you can still specify, e.g., top and bottom borders separately
Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.
Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.
For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.
Eg:
div.navitem
{
width: 15px;
height: 15px;
/* padding: 5px; */
}
div.navitem .selected
{
border: 1px solid;
width: 13px;
height: 13px;
/* padding: 4px */
}
set a border on it before you click to be the same color as the background.
Then when you click just change the background color and the width will not change.
Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.
(https://stackoverflow.com/a/8319190/2105930)
I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:
.good-border {
padding: 1px;
}
.good-border:hover {
padding: 0px;
border: 1px solid blue;
}
See my code here: https://jsfiddle.net/3t7vyebt/4/
Try this
box-sizing: border-box;
Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.
.border-me {
position: relative;
}
.border-me::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: solid 1px black;
}
You can also do a lot more with the pseudo element so this is a pretty powerful pattern.
Just decrease the width and height by double of border-width
You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:
.bottom-border {
box-shadow:inset 0px -3px 0px #000;
}
Try decreasing the margin size when you increase the border
I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.
Values separated by comma. Here's a simple example:
.add_border {
box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}
jsfiddle
Adjust for your preferred look and you're good to go!
We can also use css calc() function
width: calc(100% - 2px);
subtracting 2px for borders
You can try a box-shadow inset
something like this:
box-shadow:inset 0px -5px 0px 0px #fff
adds a white 5px border to the bottom of the element without increasing the size
.filter_list_button_remove {
border: 1px solid transparent;
background-color: transparent;
}
.filter_list_button_remove:hover {
border: 1px solid;
}
You can create the element with border with the same color of your background,
then when you want the border to show, just change its color.
In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:
button {
padding: 10px;
border: 4px solid blue;
border-radius: 4px;
outline: 2px solid white;
outline-offset: -4px;
}
button:hover {
outline-color: transparent;
}
Example here: https://codepen.io/Happysk/pen/zeQzaZ
This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 25 days ago.
I have an li styled as follows:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?
You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
Many of you must be landing here to find a solution for opaque border instead of a transparent one. In that case you can use rgba, where a stands for alpha.
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}
Demo
Here, you can change the opacity of the border from 0-1
If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;
You could remove the border and increase the padding:
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}
<ul>
<li>Hovering is great</li>
</ul>
hey this is the best solution I ever experienced.. this is CSS3
use following property to your div or anywhere you wanna put border trasparent
e.g.
div_class {
border: 10px solid #999;
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}
this will work..
Yep, you can use border: 1px solid transparent
Another solution is to use outline on hover (and set the border to 0) which doesn't affect the document flow:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.
Since you said in a comment that the more options you have, the better, here's another one.
In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.
This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:
/* transparent border */
.testDiv {
width: 200px;
height: 200px;
border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
zoom: 1;
border-color: #FEFEFE;
filter: chroma(color=#FEFEFE);
}
Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.
Use transparent property
border-color : transparent;
The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.