my code stock.com

Tobias Hopp

3 Spalten Layout mit Header und Footer
von Tobias Hopp

Klassisches 3-Spalten Layout

Snippet-Optionen

Download: Snippet als 3-spalten-layout-mit-header-und-footer.html herunterladen.
Snippet kopieren: Für diese Aktion benötigst du einen kostenlosen my code stock.com Account
Embed-Code : Du findest den Embed-Code für dieses Snippet am Ende der Seite, wenn du es in eine Webseite oder einen Blog einbinden möchtest!

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3 Spalten Layout</title>
<body>
<!-- Komplette Box für die ganze Seite -->
<div id="wrapper">
    <!-- Der Header mit der ID "masthead" -->
    <header id="masthead">
        <h1><a href="#">OceanSky</a></h1>
        <h2>Der Himmel muss warten &hellip;</h2>
    </header>
    <div id="menu-bar">
        <ul id="main-menu">
            <li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item">
                <a href="#">Gallery</a>
                <ul class="dropdown">
                    <li><a href="#">Kanada</a></li>
                    <li><a href="#">Malediven</a></li>
                    <li><a href="#">Spanien</a></li>
                    <li><a href="#">Nordpol</a></li>
                </ul>    
            </li>
            <li class="menu-item"><a href="#">Unterwegs</a></li>
            <li class="menu-item"><a href="#">Kontakt</a></li>
            <li class="menu-item"><a href="#">Impressum</a></li>
        </ul>
        
    </div>
    <div class="sidebars" id="left-sidebar">
        <h2>Sidebar Links</h2>
        <ul>
            <li><a href="#">Punk 1</a></li>
            <li><a href="#">Punk 2</a></li>
            <li><a href="#">Punk 3</a></li>
            <li><a href="#">Punk 4</a></li>
            <li><a href="#">Punk 5</a></li>
        </ul>
        <h2>Javascript</h2>
        <p>A simple Pop-Up</p>
        <button onclick="showAlert()">sag' Hallo</button>
    </div>
    <div class="sidebars" id="right-sidebar">
        <h2>Sidebar Rechts</h2>
        <ul>
            <li><a href="#">Punk 1</a></li>
            <li><a href="#">Punk 2</a></li>
            <li><a href="#">Punk 3</a></li>
            <li><a href="#">Punk 4</a></li>
            <li><a href="#">Punk 5</a></li>
        </ul>
    </div>
    <div class="content" id="page-body">
        <h1>Inhalt von Ocean Sky</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eaque officiis id quo iste laudantium fuga molestias illo, cupiditate expedita accusamus, minima unde. Doloremque voluptate non corporis ad soluta id sint obcaecati qui, animi reprehenderit eum optio vero, architecto repellendus rem et eligendi! Saepe earum maxime porro adipisci, officia laudantium accusamus fugiat officiis quis labore quia omnis ad aperiam quaerat sed possimus deserunt sit voluptate quas voluptatum voluptatibus. In corporis veniam maxime repellendus unde molestias. Accusamus quisquam, reiciendis aperiam. Minus aut numquam saepe rerum, est labore! Reiciendis quis, officia ipsa ipsam sequi culpa incidunt commodi laboriosam, at aspernatur. Veniam, aut! Unde repudiandae sapiente quia, tenetur dolorem quo magnam saepe dolor eligendi atque aperiam incidunt dolorum provident neque id eius culpa. Cupiditate ut dicta fugiat odio quos commodi illo, voluptatum placeat officiis? Dolore neque error quia distinctio cum maiores officia hic veritatis placeat optio quam magnam consequatur, alias suscipit minus vel amet sit debitis omnis enim et quis nulla vitae! Accusantium temporibus vitae voluptas voluptatem ad, harum, at esse, excepturi sint consectetur unde atque aspernatur! Non saepe repellat itaque voluptatum sint dicta tenetur! Sit corporis, sequi dicta. Dicta repudiandae animi enim necessitatibus laudantium eius ea culpa!</p>
    </div>
    <div id="footer">
        OceanSky &copy; 2015
    </div>
</div>
</body>
</head>
</html>

Jetzt kostenlosen my code stock.com Account anlegen

my code stok.com ist ein kostenloser Dienst zum Speichern und Verwalten von Code-Snippets jeglicher Art und Programmiersprache. Wir bieten dir viele Vorteile für die tägliche Arbeit mit Code-Snippets und der gemeinsamen Arbeit im Team, probier es aus!

Jetzt informieren und registrieren

Du kannst die Höhe des iFrame-Codes beliebig anpassen! Mehr Infos findest du in unserer Embed-Code API Referenz.