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/
Related
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>
I am trying to vertically align my text in a drop down menu. I have been following the suggestion in Stackoverflow and used display: table-cell and vertical-align: middle but it does not appear to work. It just sticks each text at the top of each drop down cell.
My drop down menu is #results.
The code and CSS is as below.
<div class="container">
<div id="jumbo" class="jumbotron">
<input type="text" value="" placeholder="Search" id="keyword">
<input type="button" id="myBtn" value="Go">
<div id="results">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="col-md-12" id="trainstation" style="background-color:blue;width:100%;margin:auto;height:100px;">
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</div>
CSS
#results {
width:94%;
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color:white;
border:1px solid #c0c0c0;
display:none;
text-align:left;
z-index:10000;
}
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:table-cell;
vertical-align:middle;
border-bottom:1px solid #c0c0c0;
}
EDIT
Sorry the code above is actually centering everything on ONE line..ie ONE drop down with all the suggestions in that one drop down
Just add display: block and use line-height for horizontal center
CSS
#results {
width:94%;
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color:white;
border:1px solid #c0c0c0;
text-align:left;
z-index:10000;
}
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:block;
vertical-align:bottom;
border-bottom:1px solid #c0c0c0;
line-height: 50px;
}
DEMO HERE
Set the line-height: of your item class to be equal to the height of the div, so something like
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:table-cell;
vertical-align:middle;
line-height:50px;
border-bottom:1px solid #c0c0c0;
}
I got the following HTML:
HTML:
<div class="header">
<div class="col col1">1st</div>
<div class="col col2">2nd</div>
<div class="col col3">3rd</div>
<div class="col col4">4th</div>
</div>
CSS:
.header {
text-decoration: underline;
}
.col {
width:200px;
float:left;
}
What I want do achieve is that
1st..............................2nd..................3rd...........4th
is completely underlined. (the complete row)
Demo
use CSS border-style [border-bottom][1] dashed
.col and margin together
.col {
width:200px;
border-bottom:2px dashed black;
margin-bottom:10px;
margin-left:5px;
}
DEMO full or DEMO small
full code
.header {
text-decoration: underline;
}
.col {
width:200px;
border-bottom:2px dashed black;
margin-bottom:10px;
margin-left:5px;
}
div{
float:left;
}
alternative
.header {
text-decoration: underline;
border-bottom:2px dashed black;
}
Demo
full code
<div class="header">
<div class="col col1">1st</div>
<div class="col col2">2nd</div>
<div class="col col3">3rd</div>
<div class="col col4">4th</div>
</div>
style
.header {
text-decoration: underline;
border-bottom:2px dashed black;
}
.col {
width:200px;
}
div{
float:left;
}
you can use this CSS for desire effect. Check the DEMO.
.col{display:inline-block; border-bottom:1px dashed #333333;width:100px;}
You can use border-bottom: solid 1px; instead of underline.
fiddle
are you want this
.col { width:200px;
display:inline;
float:left;
border-bottom:1px #000 solid
}
What you have in your example is text-decoration: underline on your div - this will underline the text content of that div. What we need to do is set each div to be inline-block so they sit next to each other, and add a border to the container.
Here's an example
I am trying to have my child elements be vertically centered on their parent elements. Something is wrong with my css code but I can't tell what it is:
css:
#parent_div_1, #parent_div_2, #parent_div_3{
width:90%;
height:20%;
margin-right:10px;
border:2px solid #a1a1a1;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
background:#dddddd;
border-radius:25px;
vertical-align:middle;
margin:4px;
}
.child_div_1{
float:left;
margin-right:5px;
border-radius: 2px;
border:2px solid #a1a1a1;
background:#dddddd;
vertical-align:middle;
}
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<div id='parent_div_1'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
<div id='parent_div_2'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
<div id='parent_div_3'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
link to my JSFiddle: http://jsfiddle.net/wasingej/Y4FA5/
A quick solution is to set
display: table; for #parent_div_1, #parent_div_2, #parent_div_3
and
display: table-cell; for .child_div_1
Add display: inline-block to the parent div style.
#parent_div_1, #parent_div_2, #parent_div_3{
...
vertical-align:middle;
display: inline-block;
...
}
JSFiddle: http://jsfiddle.net/9Y7Cm/5/
Add Display:inline-block; to your css on #parent_div_1, #parent_div_2, #parent_div_3:
CSS
#parent_div_1, #parent_div_2, #parent_div_3{
width:90%;
height:20%;
margin-right:10px;
border:2px solid #a1a1a1;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
background:#dddddd;
border-radius:25px;
vertical-align:middle;
margin:4px;
display:inline-block; /* ADDED CSS */
}
.child_div_1{
float:left;
margin-right:5px;
border-radius: 2px;
border:2px solid #a1a1a1;
background:#dddddd;
vertical-align:middle;
}
DEMO HERE: http://jsfiddle.net/Y4FA5/21/
<style>
body{
padding: 0;
margin: 0;
margin:0px auto;
}
#main{
position: relative;
width:500px;
height:500px;
}
#abc{
text-align:center;
background-color:#0F0;
height:250px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
</style>
<div id="main">
<div id="abc">
<span>asdfasdfafasdfasdf<br/> sdfjdsl flkjdsflk sjdflkjdsf </span>
</div>
</div>
Please find below fiddle what i tried
http://jsfiddle.net/9LdEc/
code:
html:
<div id="CorpDealerSearch">
<div class="row">
<div class="left">
Quarter To Date
</div>
<div class="left">
914
</div>
<div class="left">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8BxPh6MWMQ86cY/pXO/0or0qcGh0OW3F8AAAAASUVORK5CYII=">
</div>
<div class="left">
<span>OFF TIER2</span>
</div>
</div>
</div>
css:
#CorpDealerSearch{
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:3px;
}
.row{
display:table-row;
}
.left {
display:table-cell;
display:inline-block;
padding:5px;
}
But I want the design like the screenshot below. How can I modify the fiddle to get the design like this?
I need to do changes only for the last cell.
I have updated your fiddle:
http://jsfiddle.net/9LdEc/4/
I have added some of classes to your html and used the following css:
body {
font-family: Arial;
}
#CorpDealerSearch {
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:5px;
vertical-align: middle;
line-height: 25px;
}
#CorpDealerSearch a,
#CorpDealerSearch a:hover,
#CorpDealerSearch a:visited {
color: red;
font-weight: bold;
}
.row {
display:table-cell;
vertical-align: middle;
}
.left {
display:table-cell;
display:inline-block;
padding-left:5px;
padding-right: 5px;
}
.tier {
border-left: 2px dotted black;
background-color: lightgreen;
}
Is this what you wanted?