[ARCHIVED] HTML/CSS fun

[hensonj]

I would like to share some simple html snips that can add a bit of dimension to your pages. Everything I post will be verified to be working with the current default tinymce valid elements.I will add more as time goes on, if there is interest.

Enjoy!

HTML:

<div style="margin: 50px 15% 50px 15%; background-color: #ccc;">

<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec rutrum neque. Suspendisse pretium turpis leo, nec fermentum tortor egestas at. Duis aliquet, ante ac faucibus interdum, felis tortor rutrum ante, aliquet vestibulum metus ipsum eu lectus. Vestibulum interdum quis tortor non vulputate. Donec consequat facilisis ante at condimentum. Morbi tincidunt tincidunt ligula. Nulla semper nec felis vitae imperdiet. Suspendisse non blandit dolor.</p>

<p> </p>

<p>Quisque consectetur erat nec posuere facilisis. Donec ut tristique sapien, id pulvinar risus. Sed a odio lectus. Proin mollis lorem purus, vel porttitor turpis malesuada feugiat. Proin vehicula risus a diam tincidunt molestie. Mauris enim velit, semper in pharetra et, sodales eget nulla. Phasellus vulputate lectus at sem tempus, id pellentesque turpis tempus. Nam ornare purus a ligula posuere tempus. Integer ut tempus mauris. Mauris non ipsum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in ex sem. Ut tincidunt leo et tellus gravida, eu interdum metus dignissim. Phasellus scelerisque aliquam justo ac egestas.</p>

<p> </p>

</div>

</div>

RESULT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec rutrum neque. Suspendisse pretium turpis leo, nec fermentum tortor egestas at. Duis aliquet, ante ac faucibus interdum, felis tortor rutrum ante, aliquet vestibulum metus ipsum eu lectus. Vestibulum interdum quis tortor non vulputate. Donec consequat facilisis ante at condimentum. Morbi tincidunt tincidunt ligula. Nulla semper nec felis vitae imperdiet. Suspendisse non blandit dolor.

Quisque consectetur erat nec posuere facilisis. Donec ut tristique sapien, id pulvinar risus. Sed a odio lectus. Proin mollis lorem purus, vel porttitor turpis malesuada feugiat. Proin vehicula risus a diam tincidunt molestie. Mauris enim velit, semper in pharetra et, sodales eget nulla. Phasellus vulputate lectus at sem tempus, id pellentesque turpis tempus. Nam ornare purus a ligula posuere tempus. Integer ut tempus mauris. Mauris non ipsum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in ex sem. Ut tincidunt leo et tellus gravida, eu interdum metus dignissim. Phasellus scelerisque aliquam justo ac egestas.

[G_Petruzella]

hensonj​, very spiffy - thanks for sharing! There are some similar html and css contributions in this Group that've been tagged "code-snippets" - if you tag yours that way, we might be able to build up a crowdsourced handbook of 'em. 🙂

[kmeeusen]

James:

Have you considered joining our Canvas hacks Demo Course? There are now 85 of us in there sharing our tricks!

Shoot me your email if you want to come play!

[hensonj]

"responsive" navigation bar

HTML:

  <div style="width: 610; font-family: Arial, Helvetica, sans-serif;">

    <div style=

    "background-color: #444; margin: 1px; width: 200px; float: left;">

      <div style="padding-top: 30px; padding-bottom: 30px;">

        <table style="margin: auto;">

          <tbody>

            <tr>

              <td>

                <a href="https://www.your_URL_here.com" style=

                "vertical-align: middle; color: #fff !important; text-decoration: none !important;"

                target="_blank" title="link title">Modules</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

    <div style=

    "background-color: #444; margin: 1px; width: 200px; float: left;">

      <div style="padding-top: 30px; padding-bottom: 30px;">

        <table style="margin: auto;">

          <tbody>

            <tr>

              <td>

                <a href="https://www.your_URL_here.com" style=

                "vertical-align: middle; color: #fff !important; text-decoration: none !important;"

                target="_blank" title="link title">Discussions</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

    <div style=

    "background-color: #444; margin: 1px; width: 200px; float: left;">

      <div style="padding-top: 30px; padding-bottom: 30px;">

        <table style="margin: auto;">

          <tbody>

            <tr>

              <td>

                <a href="https://www.your_URL_here.com" style=

                "vertical-align: middle; color: #fff !important; text-decoration: none !important;"

                target="_blank" title="link title">Quizzes</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

    <div style=

    "background-color: #444; margin: 1px; width: 200px; float: left;">

      <div style="padding-top: 30px; padding-bottom: 30px;">

        <table style="margin: auto;">

          <tbody>

            <tr>

              <td>

                <a href="https://www.your_URL_here.com" style=

                "vertical-align: middle; color: #fff !important; text-decoration: none !important;"

                target="_blank" title="link title">Assignments</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

    <div style=

    "background-color: #444; margin: 1px; width: 200px; float: left;">

      <div style="padding-top: 30px; padding-bottom: 30px;">

        <table style="margin: auto;">

          <tbody>

            <tr>

              <td>

                <a href="https://www.your_URL_here.com" style=

                "vertical-align: middle; color: #fff !important; text-decoration: none !important;"

                target="_blank" title="link title">Collaborations</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

    <div style=

    "background-color: #444; margin: 1px; width: 200px; float: left;">

      <div style="padding-top: 30px; padding-bottom: 30px;">

        <table style="margin: auto;">

          <tbody>

            <tr>

              <td>

                <a href="https://www.your_URL_here.com" style=

                "vertical-align: middle; color: #fff !important; text-decoration: none !important;"

                target="_blank" title="link title">Conferences</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

  </div>

RESULT:

does not render in jive platform.