4ppletree.me – about:code

Separator line with text

von Moritur am 25. July 2012

There are many snippets for separator lines out there but I didn’t find a single one with a text in the middle. Here you got one:

.separator {
    width: 100%;
    border-bottom: 1px solid #60636a;
    text-align: center;
    height: 18px;
    margin-bottom: 15px;
}
.separator span {
    line-height: 15px;
    padding: 0 10px;
    background: white; /* Color of the element below */
    display: inline-block;
    margin-top: 10px;
    color: #60636a;
}

.separator {

width: 100%;

border-bottom: 1px solid #60636a;

text-align: center;

height: 18px;

margin-bottom: 15px;

}

.separator span {

line-height: 15px;

padding: 0 10px;

background: white; /* Color of the element below */

display: inline-block;

margin-top: 10px;

color: #60636a;

}

This is the neccessary html:

<div class="separator">
    <span>or</span>
</div>

</div>

That’s how I needed the separator line:

Create a new account

Order as guest

Do you know a better method to do this? Maybe without a fixed background color?

2 Kommentare
Teile diesen Beitrag auf: Twitter, Facebook, Delicious, Digg, Reddit

Whoo! CSS3 only arc (circular progress)

von Moritur am 28. March 2012

I always loved these arcs to display progress, but the only way to create them is using JavaScript and a canvas or simply images.
But with the new awesome CSS3 techniques it is finally possible to create them with pure CSS.

So this is how a pure CSS3 arc looks like (try a hover)

35%

This works best in Chrome, but also in Firefox and Opera
IE is not supported – Who would have thought?

Chrome has this great feature to use gradients as a mask. Thats how the inset around the circle is created (FF and Opera only show a white border)

Of course I will try to explain how it’s done.

Lese den ganzen Artikel »

Was meinst du dazu?
Teile diesen Beitrag auf: Twitter, Facebook, Delicious, Digg, Reddit

Google Maps and Array.prototype.indexOf

von Moritur am 16. January 2012

Google Maps together with an own implementation of Array.prototype.indexOf (IE<9 needs it) may result in some problems. The solution is a short:

delete Array.prototype.indexOf;

1	delete Array.prototype.indexOf;

After including Google Maps, Array.prototype.indexOf can be defined again.

Was meinst du dazu?
Teile diesen Beitrag auf: Twitter, Facebook, Delicious, Digg, Reddit

Tables?

von Moritur am 2. January 2012

<table width="746">
    <tbody>
        <tr>
            <td style="padding-top:2px;">
                <h1>Heading</h1>
            </td>
        </tr>
    </tbody>
</table>

<tbody>

<tr>

<h1>Heading</h1>

</td>

</tr>

</tbody>

</table>

Not. This is about 70% more code than necessary.

Was meinst du dazu?
Teile diesen Beitrag auf: Twitter, Facebook, Delicious, Digg, Reddit

jQuery KUSearch

von Moritur am 20. December 2011

jQuery KUSearch enables the user to filter a set of elements (mainly lists) with a simple input field.
Lese den ganzen Artikel »

Was meinst du dazu?
Teile diesen Beitrag auf: Twitter, Facebook, Delicious, Digg, Reddit

Inline conditional comments for IE?

von Moritur am 19. December 2011

<div class="itemDetails clear"><!--[if IE 7]>

<style type="text/css">
.productItemMicro .itemDetails { padding-top:10px; padding-left:0px;}
</style><![endif]-->
<!--[if IE 8]>

<style type="text/css">
.productItemMicro .itemDetails { padding-top:10px; padding-left:100px;}
</style><![endif]-->
<div class="productTitle"><a href="/zensierter/link/">Link</a></div>
&nbsp;
<div class="priceDetail" style="line-height: 1.3;"><span>Preis:
<strong>
299 Euro</strong></span></div>
&nbsp;

</div>

.productItemMicro .itemDetails { padding-top:10px; padding-left:0px;}

</style><![endif]-->

<!--[if IE 8]>

.productItemMicro .itemDetails { padding-top:10px; padding-left:100px;}

</style><![endif]-->

<div class="priceDetail" style="line-height: 1.3;"><span>Preis:

299 Euro</strong></span></div>