YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Wir starten mit einem einfachen Grundgerüst auf Basis eines Responsive Layouts.
Dazu bedienen wir uns trotzdem eines Wrappers, damit wir nicht die gesamte Breite des Browser ausfüllen. Wie man es später genau umsetzt bleibt natürlich jedem selbst überlassen.

Damit die Webseite allerdings als Grundgerüst für eine Responsive Webseite durchgehen kann, müssen noch einige besondere Kleinigkeiten beachtet werden. Welche? Schau rein.

Quellcode index.html

<!DOCTYPE html>
<html>
    <head>
        <title>TutCubeDE Responsive Website</title>
        <link rel="stylesheet" href="style.css" />
        
        <!--[if lt IE 9]>
            <script>
                document.createElement('header');
                document.createElement('nav');
                document.createElement('footer');
            </script>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <header>
                HEADER
            </header>
            <nav>
                SIDEBAR
            </nav>
            <div id="content">
                INHALT
            </div>
            <footer>
                FOOTER
            </footer>
        </div>
    </body>
</html>

Quellcode style.css

/* Block-Darstellung für HTML5-Elemente im IE8 */
header, 
nav, 
footer {
   display: block;
}
/***********************************************/
 
body {
    background-color: #FE9A2E;
}
 
#wrapper {
    max-width: 960px;
    margin: 0px auto;
    background-color: #FFFFFF;
    margin-top: 20px;
    padding: 20px;
}
 
header {
    width: 100%;
    height: 100px;
    background-color: #DF7401;
    margin-bottom: 20px;
}
 
#content {
    width: 80%;
    height: 520px;
    background-color: #A4A4A4;
    float: right;
    margin-bottom: 20px;
}
 
nav {
   width: 17%;
   height: 520px;
   float: left;
   background-color: #FACC2E;
   margin-bottom: 20px;
}
 
footer {
    clear: both;
    width: 100%;
    height: 50px;
    background-color: #FA5858;
}