Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is fiddle <a href="http://jsfiddle.net/56Y3h/1/" rel="nofollow">http://jsfiddle.net/56Y3h/1/</a> <br /> html5-reset.css included: <a href="http://jsfiddle.net/56Y3h/2/" rel="nofollow">http://jsfiddle.net/56Y3h/2/</a></p> <p>But I've also used html5 reset css, you can grab it from <a href="http://html5doctor.com/html-5-reset-stylesheet/" rel="nofollow">http://html5doctor.com/html-5-reset-stylesheet/</a></p> <p>Using <code>position:absolute;</code> makes things hard and static.</p> <p>I've rewritten html and css (but this is not 1 in 1 version, but well-enough to make things work). you can make changes for your own, for styling, etc... Depending on your needs.</p> <p><strong>HTML:</strong></p> <pre><code> &lt;div class="login"&gt; &lt;h3 class="marg-left title"&gt;Account Administration&lt;/h3&gt; &lt;hr /&gt; &lt;form class="marg-left"&gt; &lt;h4 class="title"&gt;Logga in&lt;/h4&gt; &lt;label&gt; &lt;span&gt;Anvardarnamn&lt;/span&gt; &lt;input type="text" /&gt; &lt;/label&gt; &lt;label&gt; &lt;span&gt;Losenord&lt;/span&gt; &lt;input type="text" /&gt; &lt;/label&gt; &lt;div class="buttons"&gt; &lt;button&gt;Logga In&lt;/button&gt; &lt;button&gt;Avbryt&lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p><strong>style.css</strong></p> <pre><code>.login { width: 500px; } .login * { font-family:"Futura"; } .login .marg-left { margin-left: 30px; } .title { font-weight: normal; font-size: 23px; color: rgb(0, 114, 198); line-height: 1.429; z-index: 70; } .login hr { height:0; border: 1px solid rgb(0, 114, 198); } .login form { width: 445px; overflow: hidden; } .login label { padding: 2px; display: block; line-height: 22px; background: #ebebeb; font-size: 13px; margin-top: 10px; overflow: hidden; } .login label span { display: inline-block; padding-left: 10px; } .login label input { display: inline-block; width: 270px; height: 20px; float: right; border: none; outline: none; } .login .buttons { margin-top: 7px; float: right; } .login .buttons button { display: inline-block; height: 33px; line-height:30px; background: rgb(0, 114, 198); color: white; font-size: 17px; border: none; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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