I have 4 float: left div containers like so...
I want to display a border when a div is hovered over. However, when I hover over the first or second div, it pushes the bottom div to the left...
I tried adding margin and padding to the div's, but nothing seemed to work.
.div
{
width: 33%;
}
.div:hover
{
boder: solid 1px #EEE;
}
Use a backround coloured or transparent border on the initial state and the size of the box won't change.
.div {
width: 32%; // (33% + 1px border) * 3 = likely more than the width of the container
border: solid 1px transparent;
}
.div:hover {
boder: solid 1px #EEE;
}
One solution is to have a border all of the time, but make it the same color as the background when not hovered.
For example:
.div
{
width: 33%;
border: solid 1px #FFF;
}
.div:hover
{
border: solid 1px #EEE;
}
EDIT: Alternatively if an invisible border won't work (gradient background, etc.) you can add 1px padding when not hovered and make it 0px padding when hovered.
For example:
.div
{
width: 33%;
padding: 1px;
}
.div:hover
{
border: solid 1px #EEE;
padding: 0;
}
Related
I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?
The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp
Are you looking to create a trapezoid?
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div class="trapezoid">
</div>
I have 2 div's here,using css pseudo elements am drawing shapes.
both are having same proprties except position property of the pseudo elements , how can the shapes are differing in both the cases.
#withpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
position: absolute;
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
}
#withoutpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
}
#withoutpos{
margin-left:250px;
margin-top:100px;
}|
<div id="withpos"></div>
<div id="withoutpos"></div>
That additional form in the #withoutpos square is due an empty line of text, brought by content:"".
This is visible when inspecting the element:
The after element isn't absolutely positioned so it's push by the flow (this "square" is taller than the other).
As #talya-s says, font-size: 0 will fix it, and strangely height: 0 don't, except if you actually put some text (which makes no sense, of course).
I'm on Chrome (38.0.2125.101) and have something that looks like this:
The css is:
.if-container{
border: 1px solid black;
border-radius: 12px;
width: 400px;
}
.social-row{
background-color: yellow;
padding: 5px 20px 10px 10px;
}
How would I make the css of the embedded element be clipped to the container (or fix it)?
The .social-row <div> is overflowing outside of its parent container. Simply add this to your stylesheet:
.if-container {
overflow: hidden;
}
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
I'm having a 'blonde moment' here - I'm sure this is easy but I can't seem to figure it out.
I have a grid of DIVs (10 rows which are CLEAR:BOTH - each with 10 FLOAT:LEFT DIVs of a fixed size).
What I want to do is assign a border to a group of these and this works (with the non-bordered sides/cells having a transparent border to keep everything aligned) BUT the way individual borders work, the 'corners' leave an ugly effect.
See this for an example
Am I missing an obvious trick to just make that a solid box rather than the 'dotted line' effect the corners are creating??
To clarify my CSS - the rows have this class
.row {
clear: both;
}
and the cells have this class
.cell {
float: left;
border: 5px solid transparent;
}
as well as between 0 and 4 classes like this one
.top { // repeated for bottom, left and right ofc.
border-top: 5px solid black;
}
Compare this:
div {
border: 3px solid white;
border-right: 3px solid black;
}
To this:
div {
border: none;
border-right: 3px solid black;
}
EDIT
The accepted solution was to make the padding take the place of the border, which would make the borders squared off. See:
http://jsfiddle.net/kCd7s/2/
If you put a border on the entire square, this is how border behaves. If you want to avoid this you should give the boxes with a black border dimensions on the sides not having a border equal to the width of the border, so add border: none first, then add dimensions, like if normal height is 20 and border is 5, and you want a border on the right, you would set: height: 30; width: 25; border-right: 5px solid;
Or try this way:
.top::before,
.bottom::before,
.left::after,
.right::after {
content: ".";
width: 100%;
height: 100%;
background: black;
display: block;
font-size: 0;
position: absolute;
}
.top::before {
height: 5px;
}
.bottom::before {
height: 5px;
top: 35px;
}
.left::after {
width: 5px;
}
.right::after {
width: 5px;
left: 35px;
}