CODEWITHSUNDEEP
htmlcss
Minuwan Deshapriya
Minuwan Deshapriya

Reputation: 127

Any idea how to do this in css?

Any idea how to do this using css ?

Any idea how to do this using css

I'm looking for a good and clear way to do this.

Upvotes: 2

Views: 139

Answers (7)

Ayman Safadi
Ayman Safadi

Reputation: 11552

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/

Upvotes: 0

3dgoo
3dgoo

Reputation: 15794

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

Upvotes: 4

Pranav
Pranav

Reputation: 8871

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

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

​

Upvotes: 0

kleinohad
kleinohad

Reputation: 5912

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>

Upvotes: 0

RAS
RAS

Reputation: 3385

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/

Upvotes: 1

Priyank Patel
Priyank Patel

Reputation: 6996

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

​

Upvotes: 6

Related Questions