Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I know an answer has been accepted, but really? Using jQuery or javascript for such a simple task is way overkill when it can be done easily and <strong>IS</strong> generally done with CSS. </p> <p>First off, the <code>align=""</code> property in html is deprecated. Also, why adding <code>top, left, margin, &amp; margin-left</code> properties? It's pretty useless to redefine properties that aim to achieve the same thing (especially when some of them don't work because the <code>position</code> isn't relative).</p> <p>Don't use images when you want to display text over it. Instead, use a div with <code>background-image: url('yourimg.png');</code> </p> <p>I made a fiddle here with the correct code, removing any need for javascript, let alone jQuery: <a href="http://jsfiddle.net/M4UYx/" rel="nofollow">http://jsfiddle.net/M4UYx/</a></p> <p>Why is this solution way way better?</p> <ol> <li>You don't need an image, if your background is just a color (as in your case)</li> <li>You don't need javascript (and so it is more cross-browser)</li> <li>You certainly don't need jQuery</li> <li>You can position your text or w/e else without worrying about it disappearing on <code>:hover</code></li> </ol> <p><strong>EDIT:</strong> Although not part of your original question; to center the position of your div, give it these properties:</p> <pre class="lang-css prettyprint-override"><code>.vierkant { position: absolute; left: 50%; margin: 0px -58px; /* -58px = width divided by 2 in negative */ } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload