Einzelnen Beitrag anzeigen
  #7 (permalink)  
Alt 18.11.2016, 13:34
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.093
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Ich habe mal eine Grundlagenseite mit deinen mageren Informationen erstellt.

Die Rahmen und Abstände dienen nur der Erkennbarkeit der Container. Im endgültigen Layout können sie angepasst oder auf Null gesetzt werden, je nachdem was gewünscht ist.

Die Seite nimmt mindestens die Seitenhöhe an. Falls der endgültige Inhalt mehr Platz beansprucht wächst die Seite einfach in der Höhe ohne das irgendwelche Anpassungen erforderlich sind.

Ein Fallback für ältere Browser und ein einfaches Responsive Design sind auch bereits eingebaut.

Einige CSS-Angaben haben sich aus der Erfahrung heraus bewährt oder sind bereits für spätere Anpassungen aufgeführt, die mit dem wachsenden Inhalt meist erforderlich sind.

Den HTML-Teil habe ich den Regeln vom aktuellen HTML5 gemäß angepasst sowie einige inhaltliche Korrekturen vorgenommen, damit sie seriöser beim Besucher ankommen.

Du kannst dir den gesamten Quelltext ja einfach sichern und Kopien machen, mit denen du dann rumspielst:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grundlagenseite 01</title>
   <title>Daniel Belleflammes Personal Homepage</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /* mindestens 100% Höhe - Wichtig zum Beispiel für Sticky Footer mit Flexbox */
   /* Flexbox-Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      body {
         min-height: calc(100vh - 1rem);
         height: calc(100% - 1rem);
      }
   }
   @media only screen and (min-width: 100px) {
      body {
         min-height: calc(100vh - 0.5rem);
      }
   }

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         margin: 0;
      }
   }

   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0.5rem 0 0 0;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Grundlayout*/
   @media all {
   }
   @media only screen and (min-width: 100px) {
      body {
         display: flex;
         flex-direction: column;
      }
      .stickycontainer {
         flex-grow: 1;
         flex-shrink: 0;
         flex-basis: auto;
      }
   }
   @media only screen and (min-width: 800px) {
   }

   /*.stickycontainer*/
   @media all {
      .stickycontainer {
         padding: 0;
         margin: 0;
      }
      .hauptheader,
      .hauptnav {
         padding: 0 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      .stickycontainer {
         display: flex;
         flex-direction: column;
      }
      .hauptheader {
      }
      .hauptnav {
      }
      main {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
   }
   @media only screen and (min-width: 800px) {
   }

   /*main*/
   @media all {
      main {
      }
   }
   @media only screen and (min-width: 800px) {
      main {
         display: flex;
         flex-wrap: wrap;
      }
      main>aside {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(350px - 0rem - 0px - 0rem);
         order: 0;
      }
      main>article {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 350px - 1rem - 4px - 0.5rem);
         order: 1;
      }
   }

   /*main>article*/
   @media all {
      main>article {
         padding: 0 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
   }

   /*main>aside*/
   @media all {
      main>aside {
         padding: 0;
         border: 0;
         margin: 0;
      }
      main>aside>* {
         padding: 0 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem  0 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      main>aside {
         display: flex;
         flex-wrap: wrap;
      }
      main>aside>* {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(100% - 0.5rem - 4px - 0.5rem);
      }
   }
   @media only screen and (min-width: 800px) {
   }

   /*Spezielle Einstellungen*/
   @media all {
   }

   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <div class="stickycontainer">
      <header class="hauptheader">
         <h1>Grundlagenseite</h1>
      </header>
      <nav class="hauptnav">
         <h2>Navigation</h2>
      </nav>
      <main>
         <article>
            <h2>article</h2>
            <p>Originaldiskussion: <a href="http://xhtmlforum.de/73072-wiedereinstieg.html">http://xhtmlforum.de/</a></p>
            <p>Das gesamte CSS befindet sich im head-Bereich des Quelltextes in dem style-Element und kann komplett in eine externe CSS-Datei ausgelagert werden.</p>
         </article>
         <aside>
            <section>
               <h2>Steckbrief</h2>
               <p>Name: Daniel Belleflamme</p>
               <p>Geb.: 09.10.1983</p>
               <p>Wohnort: Köln / Nippes</p>
               <p>Tel.: 0449933550088</p>
               <p>Mail: daniel.belleflamme@ruru.ru</p>
            </section>
            <section>
               <h2>Originalseite</h2>
               <p><a href="http://dabe2k16.likesyou.org/">http://dabe2k16.likesyou.org/</a></p>
            </section>
            <section>
               <h2>section</h2>
            </section>
         </aside>
      </main>
   </div>
   <footer>
   </footer>
</body>
</html>
Und noch ein temporärer Link zu meinem Testbereich zum ausprobieren und rumspielen, den ich aber immer wieder mal aufräume:

Testseite

So kannst du sehen wie eine Webseite mit aktuellem HTML5 und CSS3 erstellt wird und mit deinen Kenntnissen vergleichen.

Zusatzinfo: Ich habe grade gesehen dass du auf deiner Seite neuen Inhalt aufgespielt hast. Beziehungsweise: Ich habe zunächst nur eine leere Seite gesehen. Das liegt daran, dass von deiner Seite bei blockiertem JavaScript nichts angezeigt wird. So ewas solltest du vemeiden, grade wenn du die Seite für konkrete Bewerbungen nutzen möchtest. Eine Grundregel: Auch bei blockiertem JavaScript muss eine Seite alle Informationen strukturiert anzeigen.

Gruss

MrMurphy

Geändert von MrMurphy (18.11.2016 um 14:14 Uhr)
Mit Zitat antworten