Beispiel:HTML-Universalattribute-contenteditable-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Contenteditable - 3</title>
    <style>
      body {
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }
[contenteditable] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable]:hover { outline: 2px dashed #0090D2; }	  

      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 1px solid;
        padding: 10px;
        margin: 10px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }

      header {
        background: #F1F3F4;
        border-color: #d5d5d5;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      header * {
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
      }
      header img {
        -webkit-flex: 0 0 150px;
        flex: 0 0 150px;
        margin-right: 20px;
      }
      header nav {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }
      nav ul {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        display: flex;
        flex-direction: column;
      }
      nav li {
        list-style-type:none;
        margin: 1.3em 0;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav a {
        display:inline-block;
        width:95%;
        background: #fffbf0;
        border: 1px solid #dfac20;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:hover {
        background-color: #dfac20;
      }
      section {
        background: #F1F3F4;
        border-color: slateblue;
      }
      article {
        background: #ffede0;
        border-color: #df6c20;
      }
      aside {
        background: #ebf5d7;
        border-color: #8db243;
      }
      footer {
        background: #e4ebf2;
        border-color: #8a9da8;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
      }
      footer * {
        -webkit-flex: 1 1 0%;
        -webkit-justify-content: space-between;
        flex: 1 1 0%;
        justify-content: space-between;
      }
      footer p {
        text-align: right;
      }
      /* Smart Phones und Tablets mit mittlerer Auflösung */
      @media all and (min-width: 35em) {
      header img {
        margin-right: 50px;
      }
      nav ul {
        -webkit-flex-direction: row;
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
      }
      article {
        webkit-order: 2;
        order: 2;
      }
      #news {
        -webkit-flex: 1 auto;
        -webkit-order: 3;
        flex: 1 auto;
        order: 3;
      }
      aside {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        -webkit-flex: 1 auto;
        -webikit-order: 4;
        flex: 1 auto;
        order: 4;
      }
      footer {
        webkit-order: 5;
        order: 5;
      }
      }

     /* Large screens */
     @media all and (min-width: 50em) {
     article {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        -webkit-flex: 5 1 0%;
        -webkit-order: 3;
        order: 3;
        flex: 5 1 0%;
      }
      aside {
        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
      }
      #news {
        -webkit-flex: 2 1 0%;
        -webkit-order: 2;
        -webkit-align-self: center;
        flex: 2 1 0%;
        order: 2;
        align-self: center;
        height: 120px;
      }
      }
    </style>
</head>
<body>

<div contenteditable>

		<header>
			<h1>HTML-Spielwiese</h1>
			<nav>
				<ul>
					<li><a href="#link_1.html">Startseite</a></li>
					<li><a href="#link_2.html">Unterseite 1</a></li>
					<li><a href="#link_3.html">Unterseite 2</a></li>
					<li><a href="#link_4.html">Kontakt</a></li>
				</ul>
			</nav>
		</header>
		<aside id="news">
			<h2>Editierbar!</h2>
			<p>Sie können die gesamte Seite beliebig ändern!</p>
		</aside>
		<article>
			<h2>Ein Layout mit Flexbox</h2>
			<p>Flexbox ist eine sehr moderne und einfache Möglichkeit,
				responsive und flexible Layouts zu erstellen. Dabei
				kommen Sie ohne feste Größenangaben aus und können
				auf weitere CSS-Einstellungen wie position, float
				oder clear verzichten.
			</p>
			<p>
				Weiterhin kann nicht nur die Größendarstellung,
				sondern auch die Reihenfolge der Elemente unabhängig
				vom HTML-Code durch CSS festgelegt werden.
			</p>
			<h3>eine Bitte:</h3>
			<p>Wenn Sie mit uns zufrieden sind, sagen Sie's weiter!
				<br>
				Wenn nicht, sagen Sie's
				<a href="mailto:projekt@selfhtml.org ">uns</a>!
			</p>
		</article>
		<aside>
			<h2>Links</h2>
			<ul>
				<li><a href="#link_1.html">Blog</a></li>
				<li><a href="#link_2.html">Doku</a></li>
				<li><a href="#link_3.html">Forum</a></li>
			</ul>
		</aside>
		<footer>
			<a href="#kontakt.html">Kontakt</a>
			<p>© 2014 by SELFHTML</p>
		</footer>
</div>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-Universalattribute-contenteditable-2.html&oldid=59103“