Announcement

Collapse
No announcement yet.

Ebene zentrieren

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Ebene zentrieren

    Hallo Zusammen,

    ich habe im Body-Tag eine Ebene platziert, die ich gern zentriert anzeigen möchte.

    Irgendwie wills aber nicht klappen. Die eben ist immer links angeordnet.

    Hat jemand nen tip für mich?

    micha
    Tags: None
  • #2
    Würde mich interessieren: Was ist eine Ebene?
    Christian

    Comment

    • #3
      Hi,

      man kann wirklich nur raten, was du willst! Ich hab hier eine HTML-Datei mit einem zentrierten Div. War es das was du meintest?

      HTML Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Center</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
html, body{
background-color:#eee;
height:100%;
width:100%;
padding:0px;
margin:0px;
}
div.box{
border: 1px solid red;
background-color:white;
position:absolute;
top:50%;
left:50%;
width:400px;
height:200px;
margin-top:-100px;
margin-left:-200px;
text-align:center;
font-size: 50px;
}
</style>
</head>
<body>
<div class='box'>
Ebene?
</div>
</body>
</html>
      "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)

      Viele Grüße Novi

      Comment

      • #4
        Hi Novi,

        danke für deine Antwort. Mit Ebene meinte ich div.
        Warum rätst Du von der Verwendung des divs ab?

        Gruß

        Micha

        Comment

        • #5
          Warum rätst Du von der Verwendung des divs ab?
          Wo tut er das?
          Christian

          Comment

          • #6
            Originally posted by Novi View Post
            Ich hab hier eine HTML-Datei mit einem zentrierten Div.
            Diese Lösung hat einen dramatischen Nachteil. Ist der Viewport kleiner als das zentrierte Element, rutscht der Inhalt links aus dem Viewport raus. Dort kann man ihn NICHT MEHR per Scrollbalken erreichen. Die Site wird damit UNBENUTZBAR.

            Block-Elemente zentriert man horizontal mit "margin:0 auto".

            Das text-align:center in Deinem Code zentriert überdies nur den Inhalt des Elements und nicht das Element selbst. Das hier im Code sorgt für Verwirrungen und falsche Annahmen bei Anfängern.

            Liebe Grüße,
            -Efchen

            Comment

            • #7
              Originally posted by michaonline View Post
              Die eben ist immer links angeordnet.
              Unter "ebenen" würde ich Layer verstehen, <layer> ist aber ein Produkt von Netscape 4.

              Das Element <div> würde ich nicht als "Ebene" bezeichnen, weil da viel zu Viel drinsteckt, was vermuten lässt, das Element könnte zu Layoutzwecken verwendet werden. Es ist aber HTML und wird daher NICHT zu Layoutzwecken verwendet. Primär ist <div> das allgemeine Block-Element und wird zum GRUPPIEREN mehrerer Element benutzt.

              <div> ist ein Block-Element. Diese sitzen IMMER links am Rand. Sie sitzen aber auch immer am RECHTEN Rand, und sind somit auch immer ZENTRIERT. Allerdings braucht so ein Block-Element (das per default width:100% hat) auch eine Breite anders als 100%, bevor man einen Zentrierungseffekt überhaupt sehen kann!

              Und wie schon anderswo gesagt, Block-Elemente werden horizontal mit "margin:0 auto" zentriert. Vertikales Zentrieren ist nur so möglich, wie Novi das beschrieben hat, die von mir im anderen Beitrag genannten Nachteile hat das allerdings auch. Von daher ist meine Meinung, dass man besser auf das vertikale Zentrieren verzichtet, bevor die eigene Website unbenutzbar wird.

              Gerade mit den modernen Netbooks ist in der Vertikalen oft nur sehr wenig Platz, was die Wahrscheinlichkeit deutlich höher ist, dass man die Website nicht nutzen kann. Hier geht IMHO Nutzbarkeit deutlich vor der Optik.

              Liebe Grüße,
              -Efchen

              Comment

              • #8
                Hi Efchen,

                ich kann dir nur zustimmen, mit dem was du sagst. Wahrscheinlich wollte michaonline aber ein vertikal und horizontal zentriertes Div haben. Zumindest hat er nichts gegen den Quelltext gesagt. Man kann ja aber nur vermuten...
                "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)

                Viele Grüße Novi

                Comment

                • #9
                  Originally posted by Novi View Post
                  Wahrscheinlich wollte michaonline aber ein vertikal und horizontal zentriertes Div haben.
                  Nicht immer ist das, was jemand will, eine gute Lösung, besonders wenn es sich nicht zufriedenstellend umsetzen lässt.

                  Zumindest hat er nichts gegen den Quelltext gesagt. Man kann ja aber nur vermuten...
                  Vielleicht kennt er sich nicht genug aus, um etwas dagegen zu sagen und kopiert den jetzt blind. Deswegen hab ich ja auch auf die immensen Nachteile hingewiesen.

                  Aber was genau wolltest Du mir jetzt sagen? :-)

                  Grüße,
                  -Efchen

                  Comment

                  • #10
                    Originally posted by Efchen View Post
                    Aber was genau wolltest Du mir jetzt sagen? :-)
                    Also eigentlich nicht viel.

                    Ich wollte nur klarstellen, dass ich deiner Meinung bin. Nicht, dass jemand denkt, dass ich eine Zentrierung , wie ich sie oben vorgeschlagen habe, bevorzuge.
                    "(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)

                    Viele Grüße Novi

                    Comment

                    • #11
                      Ich tendiere jetzt ja dazu, zu antworten: Warum postest Du den Code dann überhaupt? Vor allem, ohne auf die Gefahren hinzuweisen.

                      Ich tendiere dazu aber nur und weiß nicht, ob ich das wirklich schreiben soll ;-)

                      Schönes Wochenende,
                      -Efchen

                      Comment

                      • #12
                        Originally posted by Efchen View Post
                        ... Warum postest Du den Code dann überhaupt? Vor allem, ohne auf die Gefahren hinzuweisen...
                        Hallo,
                        die Gefahren kennen wir nun, aber die Lösung nicht. Die ist hier zu finden.

                        Comment

                        Previous template Next
                        Working...
                        X