Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von asteri

    asteri

    09.05.2012 - 18:37

    Vielen Dank für die verständliche Anleitung. Ich habe Schritt für Schritt nachgearbeitet und habe alles verstanden

  • Alternative Portrait von edaegelm

    edaegelm

    01.02.2012 - 11:17

    SUPER Besten Dank für die Anleitung

  • Alternative Portrait von pmsys

    pmsys

    27.01.2012 - 12:17

    So etwas habe ich schon gesucht... Super!

  • Alternative Portrait von cwk4711

    cwk4711

    13.01.2012 - 12:51

    Sehr gutes Tutorial. Funktioniert mit den gängigen Browsern! Sogar meine Templates gehen einwandfrei. Glückwunsch!



    geändert von cwk4711 am 13.01.2012 - 12:52
  • Alternative Portrait von Posni

    Posni

    10.01.2012 - 16:18

    Vielen dank, kann ich sehr gut gebrauchen!

  • Alternative Portrait von Spearboy

    Spearboy

    10.01.2012 - 14:28

    Vielen Dank für dieses sehr übersichtlich gestaltete Tutorial!

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Webseiten horizontal zu zentrieren, ist einfach per margin:auto; möglich. Möchte man seine Seite auch vertikal zentrieren, wird's schon schwieriger. Es gibt ja einige Versuche im Netz, die das mehr oder minder gut schaffen, aber sie alle benötigen das Wissen über die Höhe der Seite. Aber Seiten lassen sich auch zentrieren, ohne dass man die Höhe kennt. So kann man dem Content überlassen, wie hoch die Seite ist. Gut für Menschen mit bspw. größer eingestellter Schrift im Browser, die würden nur noch einen zusätzlichen Scrollbalken bekommen (sofern der überhaupt vom Seitenersteller zugelassen ist).

Ich benutze hier bewusst HTML5-Elemente und -Doctype, um euch auch diese Sachen näher zu bringen. Des Weiteren funktioniert diese Methode im IE<=7 nicht mit div-Elementen, sodass man dort andere Elemente (span) "missbrauchen" müsste.

Ok, genug der Vorrede, let's do it ;)


Schritt 1

Als Erstes erstellen wir unser HTML-Grundgerüst und platzieren gleich noch ein paar Elemente auf der Seite.

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />

    <title>Webseite horizontal und vertikal zentrieren ohne Position und zusätzliches Markup</title>

    <meta name="description" content="Webseite horizontal und vertikal zentrieren ohne Position und zusätzliches Markup" />
    <meta name="author" content="cebito" />
    <meta name="keywords" content="vertikal, horizontal, Website,  zentriert, center, position, Markup" />

    <link rel="stylesheet" href="style.css" media="screen" />

</head>

<body>
<div class="wrap">
    <section class="centered">
        <header><h1>Webseite horizontal und vertikal zentrieren ohne Position und zusätzliches Markup*</h1></header>

        <nav>
            <ul>
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
                <li><a href="#">four</a></li>
                <li><a href="#">five</a></li>
            </ul>
        </nav>

        <article>
            <header><h2>ein Artikel</h2></header>

            <p>etwas Text</p>
            <p>noch mehr Text</p>
            <p>Lorem Ipsum</p>
            <p>blabla</p>

            <footer><p>gepostet am 00.00.00</p></footer>
        </article>

        <footer><p>* na ja, vielleicht ein bisschen für den IE &lt;= 7 ;)</p></footer>
    </section>
</div>

</body>
</html>


Ich habe hier zwei Klassen vergeben, über die wir die Seite zentrieren; diese können dann auch auf Elemente innerhalb der Seite angewandt werden, um diese in ihrem Elternelement zu zentrieren.


 

Schritt 2

Um die HTML-Elemente auch mit dem Internet Explorer 8 und kleiner nutzen zu können, müssen wir diese bekannt machen. Dafür notieren wir ein kleines Javascript vor dem schließenden head-Tag:

<script>
    document.createElement('header');
    document.createElement('footer');
    document.createElement('section');
    document.createElement('nav');
    document.createElement('article');
</script>
Wollt ihr noch mehr HTML-Elemente nutzen, müsst ihr diese ebenfalls bekannt machen.


Schritt 3

Wir legen die CSS-Datei an und notieren die üblichen Styles.

*{
    margin:0;
    padding:0;
}

html, body{
}
body{
    background:#999;
    font-size:100%;
}
header,footer,section,nav,article{
    display:block;
}
.wrap {
}
.centered {
    width: 880px;
    background:#eee;
    text-align:left;
}
header{
    border-bottom:1px solid #141414;
}
h1,h2,p{
    padding:5px 15px;
}
article{
    margin-left:150px;
    color:#000;
    background:#eee;
}
article header, article footer{
    text-align:left;
    border:none;
}
nav{
    float:left;
    width:150px;
}
ul{
    list-style:none;
}
li a{
    padding:2px 15px;
    color:#205287;
}
li a:hover{
    color:#A50808;
}
footer{
    border-top:1px solid #141414;
    font-size:.7em;
    text-align:right;
    clear:both;
}

So weit, so gut: Wir haben eine funktionierende "gestylte" Webseite; die klebt aber noch oben links in der Ecke fest.


 

Schritt 4

Wir nutzen die Eigenschaften von Inlineelementen, um die Seite zu zentrieren. Dazu benötigen wir noch ein zusätzliches Element, das wir mit :before erzeugen. Ändert die folgenden Styles so ab und ergänzt .wrap:before:

html, body{
    height:100%;
}
body{
    min-width:900px;
    background:#999;
    font-size:100%;
}
.
.
.
.wrap {
    text-align: center;
    height:100%;
}
.wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 880px;
    background:#eee;
    text-align:left;
}


Wir haben das zusätzliche Element über die ganze Zeilenhöhe gespannt und durch das vertical-align erreicht, dass sich der andere container mittig einfügt. Das min-width für den body wird benötigt, damit bei zusammengeschobenem Fenster kein Zeilenumbruch entsteht.


 

Schritt 5

Das war's, oder? Nein, da gibt's ja noch den IE<8, der mit :before nichts anfangen kann. Ab 2012 führt Microsoft automatische Updates für den IE ein, sodass IE8 dann als Mindeststandard angesehen werden kann. Wer ältere IEs dennoch unterstützen möchte, fügt einfach am Ende zwischen </section> und </div> diesen HTML-Kommentar ein:

<!--[if lte IE 7]>
    <span class="ie7centered"> </span>
<![endif]-->
und ergänzt die CSS noch durch die passenden Styles:

.ie7centered{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}


Vollständiges HTML und CSS gibt's als Arbeitsmaterialien zum Download.

Das war's, bis zum nächsten,
cebito
vBulletin 0.041 • ZF-App 0.455 • Total 0.495