Wie stelle ich das Design "Limette" mittig dar ?
  • Tipps_und_Tricks_1 November 2010
    Posts: 1

    Einleitung:


    Das Design "Limette" ist so ausgerichtet, dass es am linken Browserrand anstößt.
    Im folgenden möchte ich zeigen welche Schritte notwendig sind, um das Design im Browser mittig auszurichten.
    Leider ist es nicht einfach damit getan, den entsprechenden Befehl einzusetzen, sondern es müssen weitere Dinge berücksichtigt werden.

    Diese Anleitung funktioniert ausschließlich mit dem Design "Limette" !

    Hier das Ergebnis: http://www.gratis-webserver.de/Tipps_und_Tricks_1/

    Code zum Einbauen:

    Hier der komplette Code um das Design "Limette" über unsere Experten-Tools mittig darzustellen.

    <style type="text/css">
    body {
     text-align: center;
    }
    #maincontainer {
     margin: auto;
    }
    #headcontainer {
     border-left: 1px solid #2C5900;
     overflow: hidden;
     width: 766px;
    }
    #headcontainer img {
     margin-left: -1px;
    }
    #bodycontainer {
     border-left: 1px solid #2C5900;
     border-bottom: 1px solid #2C5900;
     width 766px;
    }
    #contentcontainer {
     border-bottom: 0px;
     width: 508px;
    }
    </style>

    <!--[if lte IE 8]>
    <style type="text/css">
    #headcontainer {
     width: 767px;
    }
    #bodycontainer {
     width 769px;
    }
    #contentcontainer {
     width: 509px;
     left: 257px;
    }
    </style>
    <![endif]-->

    Schritt-für-Schritt-Anleitung:

    Öffnen Sie die Seite Experten-Tools und gehen Sie dort zu dem Kasten "Informationen im <head>-Bereich einbinden"
    Alle Änderungen werden in dem zugehörigen Textfeld eingetragen.

    Als erstes müssen wir mitteilen, dass wie das Aussehen der Seite mittels css Ändern möchten und fügen ins Textfeld
    <style type="text/css">

    </style>
    ein. Alle weiteren Einträge erfolgen zwischen diesen beiden Zeilen.

    Nun teilen wir mit, dass das Design mittig ausgerichtet werden soll und fügen folgendes ein:
    #maincontainer {
       margin: auto;
    }
    Leider versteht der Internet Explorer diesen Befehl nicht. Er benötigt zusätzlich:
    body {
     text-align: center;
    }
    Nun ist das Design zwar zentriert, aber wir entdecken, dass links eine Linie fehlt, die nicht benötigt wurde, als das Design links ausgerichtet war.
    Also fügen wir diese Linie an den benötigten Stellen ein:
    #headcontainer {
     border-left: 1px solid #2C5900;
    }
    #bodycontainer {
     border-left: 1px solid #2C5900;
    }
    Nun fehlt aber auch noch unten links eine Linie um das Design harmonisch aussehen zu lassen.
    Also fügen wir auch diese hinzu und Erweitern den obigen Code:
    #bodycontainer {
     border-left: 1px solid #2C5900;
     border-bottom: 1px solid #2C5900;
    }
    Jetzt sehen wir, dass unten im Inhaltsbereich eine Doppellinie entstanden ist, die wir nun entfernen:
    #contentcontainer {
     border-bottom: 0px;
    }
    Wenn wir genau hinsehen, entdecken wir im Firefox-Browser, dass nun die Bereiche, in denen wir Linien hinzugefügt haben, etwas breiter sind.
    Dies gleichen wir nun aus:
    #headcontainer {
     border-left: 1px solid #2C5900;
     overflow: hidden;
     width: 766px;
    }
    #bodycontainer {
     border-left: 1px solid #2C5900;
     border-bottom: 1px solid #2C5900;
     width 766px;
    }
    #contentcontainer {
     border-bottom: 0px;
     width: 508px;
    }
    Leider interpretiert der Internet Explorer Breiten mit Linien oft falsch, so dass dieser Browser extra behandelt werden muss:
    <!--[if lte IE 8]>
    <style type="text/css">
    #headcontainer {
     width: 767px;
    }
    #bodycontainer {
     width 769px;
    }
    #contentcontainer {
     width: 509px;
     left: 257px;
    }
    </style>
    <![endif]-->

    Nun haben wir das Design "Limette" mittig gestellt - und zusätzlich das Design für diese Ausrichtung "glatt gebügelt"


    Post edited by Herr Krings (Admin) at 2010-11-10 21:55:10

Willkommen!

Wenn Sie an den Diskussionen teilnehmen möchten, klicken Sie bitte hier. Sie werden dann zu www.internetbaukasten.de umgeleitet, um sich dort einzuloggen bzw. zu registrieren

Einloggen Registrierung!

Tagged