CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 5724

How to overlap 2 charaters with CSS

I have 2 Unicode arrows, that I would like to have on top of one another ( eg as a column sorter ).

How can I do this? - a <br> tag in a span won't work, as it breaks the entire content flow.

I also cant set position:absolute and top 0, left 0, as it needs to be relatively positioned.

See fiddle: http://jsfiddle.net/YrJTN/1/

Upvotes: 1

Views: 116

Answers (6)

pawel
pawel

Reputation: 36975

A combination of vertical align and negative margins:

HTML:

Name<span class="arrows"><a class="up" href="#up">&#9650;</a><a class="down" href="#down">&#9660;</a></span>

CSS:

.arrows a { display:inline-block; text-decoration:none; width:1em;  }
.arrows a + a { margin-left:-1em; }
.up { vertical-align:0.4em;  }
.down { vertical-align:-0.4em; }

http://jsfiddle.net/YrJTN/6/

Upvotes: 0

daniel__
daniel__

Reputation: 11845

DEMO

.fl {
    color: #FCB80D;
    float: right;
}
.wrapper {
    width:60px;
    font-size:12px;
}

<div class="wrapper">text
    <div class="fl"> 
    <a href="#" id="scrollUp">▲</a> <!-- </br> if you want-->
    <a href="#" id="scrollDown">▼</a>
    </div>
</div>

Upvotes: 0

Avin Varghese
Avin Varghese

Reputation: 4370

Name<span class="up" style="text-size:50%"></span>

Css: 

.up:before{
    content: "▲";
    position:absolute;
    top:0;
}
.up:after{
    content: "▼";
    position:absolute;
    top: 0.8em;
    bottom:0;
}

Fiddle: http://jsfiddle.net/KqV6A/

Upvotes: 1

neel
neel

Reputation: 5293

 <body>Name<span style=" position: absolute;text-size:50% ">&#9660;</span><span style=" position: absolute;text-size:50% ">&#9650;</span></body>

Upvotes: 0

Red Taz
Red Taz

Reputation: 4179

HTML

<body>
    <span class="column">
        Name
        <span class="arrow top">&#9650;</span>
        <span class="arrow bottom">&#9660;</span>
    </span>
</body>

CSS

.column {
    position: relative;
}

.arrow {
    font-size: 10pt;
    position: absolute;    
}
.top {
    right: -10px;
    top: -5px;
}

.bottom {
    right: -10px;
    bottom: -5px;
}

Upvotes: 0

Eran H.
Eran H.

Reputation: 1239

You can still use position absolute, just add a container that has position relative like this:`

<span style="position:relative">
    <span style="position: absolute;">▼</span>
    <span style="position: absolute;">▲</span>
</span>

Upvotes: 3

Related Questions