Designgala - CSS Templates & Vorlagen

Exzellenter Artikel
3 | 15971 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Designgala - CSS Templates & Vorlagen" mit Ihrem Wissen!

Anzeige Hier werben

Einleitung - CSS Vorlagen / Templates

In diesem Artikel sollen die wichtigsten und meist benutzten CSS-Layouts gezeigt werden. Für jedes Design gibt es ein Vorschaubild und den dazugehörigen Quelltext. Der Quelltext ist nicht bei jedem Design gleich. Jedoch wurden die IDs und Farben für die unterschiedlichen Boxen beibehalten. Die CSS-Templates helfen bei der schnellen und korrekten Erstellung von Webseiten.

Wer auf einzelne CSS-Vorlagen auf seiner Seite verweisen möchte, kann die einzelnen Designs zusätzlich direkt verlinken. Hierzu wurden Anker für einzelnen Überschriften gesetzt.
Beispiel eines Links: http://www.webmasterpro.de/coding/article/css-designgala.html#goto-design-06-navigation-links-footerelemente

Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 1</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 auto;
                background:     #3ba2c3;
                width:          800px;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin-left:        250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                height:         50px;
                float:          left;
                width:          50%;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                float:          left;
                width:          49.9%;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 1
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>

Design 02 - Navigation rechts / Footerelemente

Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 2</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 auto;
                background:     #3ba2c3;
                width:          800px;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          right;
                width:          100%;
            }
            div#site div#box2
            {
                margin-right:       250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          right;
                margin-right:       -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                height:         50px;
                float:          left;
                width:          50%;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                float:          left;
                width:          49.9%;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 2
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 3</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 auto;
                background:     #3ba2c3;
                width:          800px;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin-left:        250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                height:         50px;
                float:          left;
                width:          50%;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                float:          left;
                width:          49.9%;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 3
            </h1>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 4</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 auto;
                background:     #3ba2c3;
                width:          800px;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin:         0 250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                float:          left;
                width:          250px;
                margin-left:        -250px;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                clear:          left;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 4
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 5</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 auto;
                background:     #3ba2c3;
                width:          800px;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin:         0 250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                float:          left;
                width:          250px;
                margin-left:        -250px;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 5
            </h1>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 6</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin-left:        250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                height:         50px;
                float:          left;
                width:          50%;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                float:          left;
                width:          49.9%;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 6
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>

Design 07 - Navigation rechts / Footerelemente

Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 7</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          right;
                width:          100%;
            }
            div#site div#box2
            {
                margin-right:       250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          right;
                margin-right:       -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                height:         50px;
                float:          left;
                width:          50%;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                float:          left;
                width:          49.9%;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 7
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 3</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin-left:        250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                height:         50px;
                float:          left;
                width:          50%;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                float:          left;
                width:          49.9%;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 3
            </h1>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 4</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin:         0 250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                float:          left;
                width:          250px;
                margin-left:        -250px;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
                clear:          left;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 4
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 5</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
            }
            div#site div#box2
            {
                margin:         0 250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                margin-left:        -100%;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                float:          left;
                width:          250px;
                margin-left:        -250px;
            }
            div#site div#box4
            {
                background:     #615d5a;
                height:         50px;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 5
            </h1>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 11</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          right;
                width:          100%;
                margin-left:        -250px;
            }
            div#site div#box2
            {
                margin-left:        250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          left;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                float:          left;
                width:          250px;
                clear:          left;
            }
            div#site div#box4
            {
                background:     #615d5a;
                float:          left;
                width:          250px;
                clear:          left;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 11
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>
Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Kompatibiltät dieses Designs
Bild zu Designgala - CSS Templates & Vorlagen
 
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>WMP Designgala - Design 12</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            *
            {
                margin:         0;
                padding:        0;
                color:          #fff;
            }
            html, body
            {
                font:           12px Arial, Helvetica, sans-serif;
                margin:         15px;
                background:     #e9e4de;
            }
            ul
            {
                padding-left:       30px;
            }
            p.clear
            {
                clear:          both;
            }
            /* Design start */
            div#site
            {
                margin:         0 100px;
                background:     #3ba2c3;
            }
            div#site h1
            {
                background:     #8eb830;
                height:         100px;
                text-align:     center;
                line-height:        100px;
                font-family:        "Georgia";
            }
            div#site div#wrapper
            {
                float:          left;
                width:          100%;
                margin-right:       -250px;
            }
            div#site div#box2
            {
                margin-right:       250px;
                background:     #e2a123;
            }
            div#site div#box1
            {
                width:          250px;
                float:          right;
                background:     #835b38;
            }
            div#site div#box3
            {
                background:     #c14e39;
                float:          right;
                width:          250px;
                clear:          right;
            }
            div#site div#box4
            {
                background:     #615d5a;
                float:          right;
                width:          250px;
                clear:          right;
            }
        </style>
    </head>
    <body>
        <div id="site">
            <h1>
                WMP Designgala - Design 12
            </h1>
            <div id="wrapper">
                <div id="box2">
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <h2>Lorem Ipsum</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
            <div id="box1">
                <h2>Lorem Ipsum</h2>
                <ul>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                    <li>dolor</li>
                </ul>
            </div>
            <div id="box3">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <div id="box4">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                </p>
            </div>
            <p class="clear"></p>
        </div>
    </body>
</html>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Designgala - CSS Templates & Vorlagen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Designgala - CSS Templates & Vorlagen" hier bearbeiten.

Mitarbeiter