hover items and you'll see the wrap will resize hovering on second title.
How to prevent this?
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.wrap{
position:fixed;
min-width:140px;
}
.title{
padding:3px 25px 3px 9px;
background:gold;
}
.title:hover{
border-right:10px solid lightseagreen;
}
<div class='wrap'>
<div class='title'>lorem</div>
<div class='title'>loremxxxxxxxxxxx</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
</div>
best n easy solution will be just apply the border of title with color as transparent and then on hover change the color of border.
check the below
.title{
..
..
border-right:10px solid transparent;
..
}
.title:hover{
border-right-color: lightseagreen;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.wrap{
position:fixed;
min-width:140px;
}
.title{
padding:3px 25px 3px 9px;
min-width:30%;
background:gold;
margin-right:15px;
border-right:10px solid transparent;
}
.title:hover{
border-right-color: lightseagreen;
}
<div class='wrap'>
<div class='title'>lorem</div>
<div class='title'>loremxxxxxxxxxxx</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
</div>
You could set a transparent border, and then change the border-color on hover instead.
.title { border-right:10px solid transparent; }
.title:hover { border-color:lightseagreen; }
*{
margin:0;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.wrap{
position:fixed;
min-width:140px;
}
.title{
padding:3px 25px 3px 9px;
min-width:30%;
background:gold;
border-right:10px solid transparent;
}
.title:hover{
border-color:lightseagreen;
}
<div class='wrap'>
<div class='title'>lorem</div>
<div class='title'>loremxxxxxxxxxxx</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
</div>
Increase the minimum width of .wrap to be greater than the longest string inside.
For example, I set it to 250px.
.wrap{
position:fixed;
min-width:250px;
}
.title{
padding:3px 25px 3px 9px;
min-width:30%;
background:gold;
}
.title:hover{
border-right:10px solid lightseagreen;
}
<div class='wrap'>
<div class='title'>lorem</div>
<div class='title'>loremxxxxxxxxxxx</div>
<div class='title'>lorem</div>
<div class='title'>lorem</div>
</div>
Related
I've created the following UI components which serve as a legend:
http://codepen.io/ac123/pen/peKgjP
<div id="MapKeys">
<div id="RegionalSupply">
<div class="header">Regional supply</div>
<div class="circle"></div>
<div class="spacer"></div>
<div class="detail">Circles sized by the amount of change from the previous period</div>
</div>
<div id="CorridorNetFlowDirection">
<div class="header">Corridor net flow direction</div>
<div class="dottedLine1">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="spacer"></div>
<div class="detail">Lines sized by the amount of change in net flow from the previous period</div>
<div class="separator"></div>
<div class="dottedLine2">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="spacer"></div>
<div class="detail">Change in flow direction</div>
</div>
</div>
</div>
#MapKeys
{
text-align:left;
height:200px;
width:260px;
display:inline-block;
vertical-align:top;
.header{
font-size:16px;
padding-bottom:6px;
}
#RegionalSupply{
border:solid lightgrey 1px;
padding:10px;
display:inline-block;
& > .circle {
vertical-align:top;
width: 14px;
height: 14px;
background: lightgrey;
position:relative;
top:2px;
display:inline-block;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
& > .spacer {
width:5px;
display:inline-block;
}
& > .detail{
width:175px;
font-size:12px;
display:inline-block;
}
}
#CorridorNetFlowDirection{
border:solid lightgrey 1px;
padding:10px;
vertical-align:top;
display:inline-block;
& > .dottedLine1
{
font-size: 0px;
position:relative;
top:4px;
height:10px;
display:inline-block;
vertical-align:top;
& > .part1{
width: 14px;
background: lightgrey;
display:inline-block;
height:10px;
}
& > .part2{
width: 3px;
background: none;
display:inline-block;
height:10px;
}
& > .part3{
width: 14px;
background: lightgrey;
display:inline-block;
height:10px;
}
}
& > .separator
{
height:1px;
}
& > .dottedLine2
{
font-size: 0px;
position:relative;
/*top:4px;*/
display:inline-block;
& > .part1{
width: 14px;
background: #077CAB;
display: inline-block;
height:10px;
}
& > .part2{
width: 3px;
background: none;
display: inline-block;
height:10px;
}
& > .part3{
width: 14px;
background: #077CAB;
display: inline-block;
height:10px;
}
}
& > .spacer {
width:5px;
display:inline-block;
}
& > .detail{
width:150px;
font-size:12px;
display:inline-block;
}
}
}
I was expecting these divs to display side-by-side b/c the parent divs and child divs are all defined with display:inline-block. How could I update my code to make these UI components display with the same with and height similar to this?:
https://www.dropbox.com/s/dhhkcx4dvczyjgx/updated-map-key.png?dl=0
They child divs of MapKeys are display in inline-block..It is just that width you set on MapKeys (width:260px;)that is causing the second child element to break to another line
To illustrate adjust the width of MapKeys to 2600px codepen here
because the parent element has the same width as child items.
#MapKeys
{
text-align:left;
height:600px; /*Increase it so that div can be side by side.*/
width:260px;
}
I've made a "triangle" using CSS using the code outlined HERE
(jsFiddle example)
It works great, but I would like to have an inset shadow on the triangle and bar like this:
How?
HTML:
<div id="wrapper">
<div class="triLeft"></div>
<div class="triAngle"></div>
</div>
CSS:
.triLeft{
width:40px;
background:#fff;
margin:0;
float:left;
height:200px;
}
.triAngle{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px;
border-color: transparent transparent transparent #ffffff;
float:left;
margin-top:20px;
}
#wrapper{
height:200px;
background:brown;
}
you could try it another way, without borders but transform:rotate();
http://codepen.io/anon/pen/MymQMK
div.trgl {
position:relative;
margin:2em;
overflow:hidden;
}
div.trgl:after {
content:'';
position:absolute;
height:40px;
width:40px;
top:2em;
left:-20px;
background:white;
box-shadow: inset 0 0 5px black ;
transform:rotate(45deg);
}
div.trgl div{
position:relative;
min-height:200px;
padding:1em;
box-shadow: 0 0 5px black;
margin:3px;
background:lightgray;
}
<div class="trgl">
<div>
</div>
</div>
Is it possible to create a header div that is sheared/oblique like in the image below?
Its for a mobile website
Yes, this is possible: DEMO
.wrapper {
overflow:hidden;
height:300px;
width:100%;
background: url(http://placekitten.com/g/300/300);
position:relative;
}
.top {
background:gray;
height:60%;
width:130%;
position:absolute;
top:-30%;
left:-5%;
transform:rotate(5deg);
border-bottom:10px solid white;
}
.text{
position:absolute;
top:20px;
right:10%;
padding:10px;
border-radius:10px;
border:5px solid white;
transition:all 0.8s;
}
.text:hover{
box-shadow:0 0 10px white;
}
<div class="wrapper">
<div class="top"></div>
<div class="text">MENU</div>
</div>
I'm trying to play around with div to get the item layout that I need, but I can't achieve what I'm looking for
.skills-container
{
height:50px; /* something like 50px */
padding:5px;
}
.skill-pic
{
width:48px;
height:48px;
}
.skill-content
{
}
.skill-content p
{
}
.progress
{
}
HTML :
<div class="skills-container">
<div class="skill-pic">
<img src="img/ps.png" alt="Klematis" width="48" height="48">
</div>
<div class="skill-content">
<p>Photoshop</p>
<div class="progress">
<div class="progress-bar progress-success">
</div>
</div>
</div>
</div>
You need to add float: left; to the .skill-pic css.
EDIT: Someone also pointed out this doesn't get exactly what you need. You'll also need to add a border attribute to the css of the elements like so:
border: solid black 1px; and replace the 1px with the size of the border you need... You'll have to play with it.
Try this as your CSS: it should work and you can tweak it as such... Working JSfiddle here:
.skills-container
{
display:inline-block;
border: solid black 4px;
}
.skill-pic
{
margin:2px;
float:left;
width:45px;
height:45px;
}
img
{
border: solid black 3px;
height:45px;
}
.skill-content
{
height:45px;
width:200px;
border: solid black 3px;
float:left;
margin:2px 2px 2px 5px;
}
.skill-content > div
{
margin:2px;
border: solid black 1px;
}
.progress
{
margin:2px;
border: solid black 1px;
}
Any idea how to do this using css ?
I'm looking for a good and clear way to do this.
HTML
<div class="line"></div>
<span>OR</span>
<div class="line"></div>
CSS
div.line
{
width:1px;
background-color:Gray;
height:40px;
margin:10px;
}
span
{
font-weight:bold;
}
Live Sample
HTML
<div class="orWrapper">Or</div>
CSS
.orWrapper {
text-transform: uppercase;
}
.orWrapper:before,
.orWrapper:after {
content: "";
display: block;
height: 50px;
margin-left: 10px;
border-left: 1px solid #000000;
}
DEMO
The easiest way to do it is just use three divs and border property:
your html:
<div class="vertical">
</div>
<div>
OR
</div>
<div class="vertical">
</div>
your css :
.vertical{
border-left:thin solid black;
height:30px;
margin-left:10px;
}
fiddle for testing: http://jsfiddle.net/SURzN/
working example: http://jsfiddle.net/fTGuV/
css:
.line
{
height:30px;
float:left;
margin-left:10px;
border: solid 0px #000000;
width:1px;
border-left-width: 2px;
}
html:
<div class="line">
</div>
<div style="clear:both;"></div>
<div>OR</div>
<div class="line">
</div>
<div style="clear:both;"></div>
HTML
<div class="line"><div class="txt">Or</div> <span></span></div>
CSS
span{height:100%; display:block; margin:0 15px; border-left:1px solid black}
.line{width:30px; margin:10px; position:relative; height:200px; text-align:center}
.txt{position:absolute; top:45%; left:4px; width:20px; height:25px; background:white}
DEMO
Easiest thing i did :-
<div Class="myclass"></div>
<div>OR</div>
<div Class="myclass"></div>
CSS
.myclass{
width:1px;
height:30px;
background-color:black;
margin-left:10px;
}
DEMO
I would keep it all in the same box...
HTML
<span class="vertical-bar">
<span>Or</span>
</span>
CSS
.vertical-bar {
background: url(http://dl.dropbox.com/u/2179487/black_pixel.png) center top repeat-y;
float: left;
padding: 100px 0;
}
.vertical-bar span {
background-color: white;
text-transform: uppercase;
}
Demo: http://jsfiddle.net/PjPAU/