tutorials.de-Buchverschenkaktion 08/2010
Thema geschlossen
  1. 15.05.07 18:15 #1
    WIK-Lars WIK-Lars ist offline Mitglied Gold WIK-Lars hat eine blütenweiße Weste
    Registriert seit
    Dec 2004
    Beiträge
    156
    Hallo,

    ich habe einen Text, der auf der gesamten Seite mittig - allerdings vertical, also nicht align="center" - ausgerichtet werden soll.
    Kann ich das über den Body-Tag machen (ich glaube nicht)?

    Danke für Vorschläge!
  2. 15.05.07 18:28 #2
    Maik Tutorials.de Gastzugang
    Hi,

    hierfür müsste das umschliessende Blockelement im Viewport positioniert werden:

    Code :
    1
2
3
4
5
6
7

    div.box {
position:absolute;
line-height:30px;
top:50%;
margin-top:-15px; /* negative Hälfte von line-height:30px */
border:1px solid red;
}

    Code :
    1
2
3

    <body>
    <div class="box">vertikal zentrierter Text</div>
</body>
  3. 16.05.07 07:03 #3
    WIK-Lars WIK-Lars ist offline Mitglied Gold WIK-Lars hat eine blütenweiße Weste
    Registriert seit
    Dec 2004
    Beiträge
    156
    Hallo Michael,

    leider funktioniert's so nicht.
    Der Text wird jetzt nach ganz unten gedrückt.
    Da müsste es doch auch noch einfachere Möglichkeiten geben, oder?
  4. 16.05.07 07:32 #4
    Maik Tutorials.de Gastzugang
    Hi,

    bei mir wird der Text nicht nach unten gedrückt. Wie lautet denn der vollständige Quellcode (HTML + CSS) deines Dokuments?
  5. 16.05.07 11:26 #5
    WIK-Lars WIK-Lars ist offline Mitglied Gold WIK-Lars hat eine blütenweiße Weste
    Registriert seit
    Dec 2004
    Beiträge
    156
    Hallo,

    es handelt sich um eine Seite, die als Navigation in einem Frame angezeigt wird. Auf der Seite sind quasi nur einzelne Navigationspunkte.

    <head>
    <title>Unbenannt</title>
    <meta name="generator" content="Scribe! 2 [http://scribe.de]" />
    <link rel="stylesheet" type="text/css" href="NEU.css" />
    </head>

    <body class=navi>
    <a href="Seite1.html" target="main" class=navischrift>Navipunkt 1</a></p>

    <a href=" Seite2.html " target="main" class=navischrift> Navipunkt 2</a></p>

    <a href=" Seite3.html " target="main" class=navischrift> Navipunkt 3</a></p>

    <a href=" Seite4.html " target="main" class=navischrift> Navipunkt 4</a></p>

    <a href=" Seite5.html " target="main" class=navischrift> Navipunkt 5</a></p>

    <a href=" Seite6.html " target="main" class=navischrift> Navipunkt 6</a></p>

    <a href=" Seite7.html " target="main" class=navischrift> Navipunkt 7</a></p>

    <a href=" Seite8.html " target="main" class=navischrift Navipunkt 8</a></p>

    <a href="Kontakt.php" target="main" class=navischrift>Kontakt</a></p>

    <a href=" Impressum.html " target="main" class=navischrift>Impressum</a></p>
    </body>
    </html>

    In der zugehörigen CSS-class ‘navi’ steht bisher nur der Eintrag
    .navi { background-image:url(HintergrundNavi_600 Kopie.jpg);},
    weil die Navigation eben mit diesem bestimmten Hintergrundbild erscheinen soll.
  6. 16.05.07 11:33 #6
    soyo soyo ist offline Mitglied Brilliant soyo befindet sich auf einem aufstrebenden Ast
    Registriert seit
    Apr 2006
    Beiträge
    791
    Fehlt da nicht ein Dokumenten-Typ?
  7. 16.05.07 11:38 #7
    fabse111 fabse111 ist offline Mitglied fabse111 hat eine blütenweiße Weste
    Registriert seit
    Apr 2007
    Beiträge
    12
    Hey du musst einfach die Häflte von der height und der width mit margin abziehen.

    #main {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 600px;
    width: 1000px;
    margin-left: -500px;
    margin-top: -300px;
    }
  8. 16.05.07 12:25 #8
    Maik Tutorials.de Gastzugang
    Wenn die Links in dem Fenster vertikal zentriert sein sollen, dann pack sie in ein DIV, verpass ihm die entsprechende Höhe, damit alle Links darin Platz finden, und positionier es im Viewport auf die Weise, wie ich es gestern und fabse111 heute demonstriert hat.

    In meinem Beispiel wird dann aus der line-height-Eigenschaft die height-Eigenschaft, und den margin-top-Wert musst du dann natürlich auch dementsprechend anpassen, denn er beträgt die negative Hälfte von der Höhenangabe.
  9. 16.05.07 13:42 #9
    fabse111 fabse111 ist offline Mitglied fabse111 hat eine blütenweiße Weste
    Registriert seit
    Apr 2007
    Beiträge
    12
    Besser hätte man es nicht erklären können...
    Aber ich denke mit kompliziert meint er warum es nicht einfach ein vertical-align : center;
    gibt. Das geht nämlich nicht da der Browser ja nicht weiß wie groß die Seite ist also wo die Seite endet. Center geht ja immer nur inline, da er das ganze ja an irgendwas ausrichten muss. Und da der Browser ansich keine Begrenzung hast musst du ihn zu seiner eigenen Größe zentrieren..
    Hoffe man kann das ein wenig verstehen...
« Tabbed Menü, wo is der Fehler? | Container wird einfach größer! »

Ähnliche Themen

  1. Text Vertikal ausrichten
    Von LoMo im Forum CSS
    Antworten: 2
    Letzter Beitrag: 10.07.06, 14:35
  2. Bild vertikal und horizontal mittig ausrichten?
    Von siob im Forum CSS
    Antworten: 9
    Letzter Beitrag: 24.03.06, 08:13
  3. text vertikal ausrichten
    Von das_element im Forum CSS
    Antworten: 3
    Letzter Beitrag: 09.01.06, 21:13
  4. wie mehrere Tabellen vertikal mittig ausrichten?
    Von Roaky im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 23.08.05, 11:52
  5. frameset horizontal und vertikal mittig ausrichten und feste Größe zuweisen!?
    Von Eddymaniac im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 23.08.05, 11:34

Lesezeichen

Lesezeichen