Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 11.09.2015, 21:54
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

ich habe mal ein dreispaltiges Layout erstellt. Außer den Farben ich habe ich alles weggelassen, was für das Layout unwichtig ist. Die Farben sind auch nur Beispielfarben zur Unterscheidung der einzelnen Elemente.

Bilder konnte ich nicht berücksichtigen, da du die nicht zur Verfügung gestellt hast und ich deshalb deren Größe nicht kenne.

Die Art des Layouts mit floats ist zwar veraltet, aber mit moderneren Lösungen wie dem Flexsbox-Modell bist du wahrscheinlich überfordert.

Dafür ist das Layout ausbaufähig, falls du zukünftig doch auf eine modernere Lösung umsteigen möchtest.

Den Hauptinhalt habe ich im Quelltext wie in deiner Vorlage vor die beiden seitlichen Container gestellt.

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Drei-Spalten-Layout 01</title>
   <style>
      * {
         box-sizing: border-box;
      }
      html {
         background-color: white;
         font-size: 100%;
      }
      body {
         background-color: yellow;
         width: 90%;
         min-width: 1000px;
         padding: 0;
         border: 1px solid black;
         margin: 0 auto;
      }
      a {
         text-decoration: none;
         color: black;
         outline: none;
      }
      header {
         width: 100%;
         border-top: 1px solid yellow;
      }
      header h2 {
         background-color: white;
         text-align: center;
         padding-top: 50px;
         margin: 32px 32px 0 32px;
      }
      nav {
         background-color: blue;
         text-align: right;
         width: 100%;
         padding: 0 32px;
      }
      nav a {
         color: white;
         display: inline-block;
         margin: 0 8px;
      }
      nav a:first-child {
         margin-right: 32px;
      }
      main {
         background-color: green;
         display: block;
         width: 50%;
         float: left;
         padding: 8px;
         margin-left: 25%;
         margin-right: -75%;
      }
      section {
         background-color: brown;
         width: 25%;
         float: left;
         padding: 8px;
      }
      aside {
         background-color: orange;
         width: 25%;
         float: right;
         padding: 8px;
      }
      footer {
         color: white;
         background-color: blue;
         width: 100%;
         clear: both;
      }
      footer h2 {
         margin: 0;
      }
   </style>
</head>

<body>
   <header>
      <h2>Schöpfer deiner Welt</h2>
   </header>
   <nav>
      <a href="#">Blog</a>
      <a href="#">Home</a>
      <a href="#">Buch kaufen</a>
      <a href="#">Lesung</a>
      <a href="#">Kontakt</a>
      <a href="#">Autorin</a>
   </nav>
   <main>
      <h2>Buch bestellen</h2>
      <a href="#">Zur Buchbestellung</a>
   </main>
   <section>
      <h2>Buchbestellung</h2>
      <p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen.</p>
   </section>
   <aside>
      <p>Nebeninformationen</p>
      <p>Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.</p>
   </aside>
   <footer>
      <h2>footer</h2>
   </footer>
</body>

</html>
Gruss

MrMurphy

Geändert von MrMurphy (11.09.2015 um 23:40 Uhr)
Mit Zitat antworten