JSFiddle

  • display - inline - block - 2

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>display: block || inline || inline-block</h1>
    <h2>p utan display satt</h2>
    <div id='p0'>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4 fyra</p>
      <p>5</p>
      <p>6</p>
      <p>7 sju sjösjuka sjömän</p>
    </div><h2>p ...</h2>
  • flex-demo-1 #34 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <p>
      ruta 1
    </p>
    <p>
      ruta 2
    </p>
    <p>
      ruta 3
    </p>
    <p>
      ruta 4
    </p>
    <p>
      ruta 5
    </p>
    <p>
      ruta 6
    </p>
    <p>
      ruta 7
    </p>
  • flex - menu - vertical

    No-Library (pure JS), HTML, CSS, JavaScript

    <nav class="left">
        <a href="">länk 1</a>
    
        <a href="">länk 2</a>
    
        <a href="">länk länk 3</a>
    
        <a href="">länk 4</a>
    </nav>
    <article>
    <p>Träutensilierna i ett tryckeri äro ingalunda en faktor där trevnadens ordningens ...</p></article>
  • flex-2 #13 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <nav>
      <a>länk 1</a>
      <a>länk 2</a>
      <a>länk 3</a>
    </nav>
  • flex-1

    No-Library (pure JS), HTML, CSS, JavaScript

    <nav>
      <a>länk 1</a>
      <a>länk 2</a>
      <a>länk 3</a>
    </nav>
  • bild med bildtext

    No-Library (pure JS), HTML, CSS, JavaScript

    <figure>
      <img src="https://i.ytimg.com/vi/Pmp8w4EgOZM/maxresdefault.jpg" width="400"/>
      <caption>
        <a href="https://www.youtube.com/watch?v=Pmp8w4EgOZM">Hänvisning till sidan som bilden kommer ifrån.
        </a>
        Text som motiverar varför du tycker att sidan är bra.
      </caption>
    </figure> 
    
    <figure>
      <img src="http://www.publicdomainpictures.net/pictures/190000/velka/website-design-build-and-service.jpg" width="400" />
      <caption>
        <a href="http://www.publicdomainpictures.net/view-image.php?image=184074&picture=&jazyk=SE">Bild från publicdomainpictures ...</a></caption></figure>
  • css sprite dice

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>CSS-Sprite</h1>
    
    <p>
    Bilden visas nedan.
    </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Dice-faces_32x32.jpg"/>
    <p>
    En tom oordnad lista där en bit av bilden ovan visas som en bakgrundsbild.
    </p>
    
    <ul class='dice'>
    <li class='dice-1'></li>
    <li class='dice-2'></li>
    <li class='dice-3'></li>
    <li class='dice-4'></li>
    <li class='dice-5'></li>
    <li class='dice-6'></li>
    </ul>
  • form label clickable #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label -->
    <h1>Stor klickbar yta med label.</h1>
    <p>
      <label for="username">Du kan klicka på mig eller i textrutan</label>
      <input type="text" id="username">
    </p>
    <h1>Mindre klickbar yta utan label.</h1>
    <p>
    Du måste ...</p></!-->
  • drop down menu - traxh #7 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu
    <ul id="menu">
          <li><a href="">Home</a></li>
          <li><a href="">About Us</a>
            <ul>
            <li><a href="">The Team</a></li>
            <li><a href="">History</a></li>
            <li><a href="">Vision</a></li>
            </ul>
          </li>
          <li><a href="">Products</a>
            <ul>
            <li><a href="">Cozy Couch</a></li>
            <li><a href="">Great Table</a></li>
            <li><a href="">Small Chair ...</a></li></ul></li></ul>
  • drop down menu - no list #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu
    <nav id="menu">
          <a href="">Home</a>
          <a href="">About Us</a>
            <div>
            <a href="">The Team</a>
            <a href="">History</a>
            <a href="">Vision</a>
            </div>
          </li>
          <li><a href="">Products</a>
            <ul>
            <li><a href="">Cozy Couch</a></li>
            <li><a href="">Great Table</a></li>
            <li><a href="">Small Chair ...</a></li></ul></li></nav>