CSS Box - vertical align

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Box - vertical align

    Hallo,

    ich habe gerade Schwierigkeiten Inhalt in einer CSS Box
    vertikal mittig anzuordnen.
    Ich habe bereits bei #header_top_left vertical-align: middle;
    angewendet, konnte aber leider kein Ergebnis erzielen, weil
    das nur bei display inline und nicht bei display box funktioniert...?...
    Kann mir bitte jemand auf die Sprünge helfen, wie ich den Inhalt
    von #header_top_left vertikal mittig darstellen kann?

    Code:
    /**
     * Header
     */
    .header {
    	height: 150px;
    	width: 100%;
    	position: relative;
    }
    
    #header_top_left {
    	margin-left: 25%;
    	border-left: 1px solid #FFFFFF;
    	height: 80px;
    	width: 299px;
    	position: relative;
    	float: left;
    	background-color: #FF0000;
    }
    
    #header_top_right {
    	margin-left: 0;
    	border-right: 1px solid #FFFFFF;
    	height: 80px;
    	width: 469px;
    	position: relative;
    	float: left;
    	background-color: #FF9900;
    }

  • #2
    gibt dem #header_top_left ein entsprechendes padding-top und dem Inhalt ein margin: auto;

    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hallo,

      Zitat von Kropff Beitrag anzeigen
      gibt dem #header_top_left ein entsprechendes padding-top und dem Inhalt ein margin: auto;
      dann wäre es aber nur horizontal zentriert und nicht vertikal.

      Hier mal ein Beispiel, wie es gehen würde:
      HTML-Code:
      <?xml version="1.0" encoding="utf-8"?>
      <!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="en" lang="en">
      	<head>
      		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
      		<title>CSS</title>
      		<style type="text/css">
      			* {
      				padding: 0;
      				margin: 0;
      			}
      			html, body {
      				height: 100%;
      			}
      			div.v-center {
      				position: relative;
      				top: 50%;
      				left: 50%;
      				margin: -100px 0 0 -100px; /* -(halbe Höhe) 0 0 -(halbe Breite) */
      				width: 200px;
      				height: 200px;
      				background-color: #f00;
      			}
      		</style>
      	</head>
      	<body>
      		<div class="v-center"></div>
      	</body>
      </html>
      Gruß,

      Amica
      Zuletzt geändert von AmicaNoctis; 24.09.2009, 19:32.
      [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
      Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
      Super, danke!
      [/COLOR]

      Kommentar


      • #4
        Inhalt in einer CSS Box vertikal mittig anzuordnen
        Offenbar soll der Inhalt in der Box entsprechend ausgerichtet werden. Und nicht die Box selber.

        Peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Das ist richtig. Die Betonung liegt auf dem Inhalt.

          Kommentar


          • #6
            Zitat von kerbstone Beitrag anzeigen
            Das ist richtig. Die Betonung liegt auf dem Inhalt.
            Dann nimm meine Lösung.
            EDIT:
            Ups, stimmt nicht, melde mich später.

            OffTopic:
            @Freundin der Nacht
            Wer lesen kann, ist klar im Vorteil
            SCNR


            Peter
            Zuletzt geändert von Kropff; 24.09.2009, 19:46.
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Naja, jeder Inhalt liegt in einer Box oder lässt sich durch eine weitere einschachteln. Wenn das nicht in Frage kommt, nimmst du halt
              Code:
              display: table-cell;
              vertical-align: center;
              Die Elternbox muss dann aber [FONT="Courier New"]display: table-row;[/FONT] sein. Damit hab ich aber in allen IE-Versionen schlechte Erfahrungen gemacht.

              @Freundin der Nacht
              Wer lesen kann, ist klar im Vorteil
              SCNR
              Was habe ich denn deiner Meinung nach überlesen?
              Zuletzt geändert von AmicaNoctis; 24.09.2009, 19:50.
              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
              Super, danke!
              [/COLOR]

              Kommentar


              • #8
                Eine Lösung könnte so ausehen:
                PHP-Code:
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
                >
                <
                html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
                <
                head>
                  <
                style type="text/css">  
                    *
                    {
                      
                margin0;
                      
                padding0;
                    }  
                    
                div.rahmen
                    
                {
                      
                width400px;
                      
                height100px;
                      
                border1px solid #f00;
                      
                padding-top50px;
                    }  
                    
                /* so */
                    
                h1
                    
                {
                      
                text-aligncenter;
                    }
                    
                /* oder auch so */
                    
                div.rahmen *
                    {
                      
                text-aligncenter;
                    }
                  </
                style>
                </
                head>

                <
                body>
                  <
                div class="rahmen">
                    <
                h1>Bla blubb</h1>
                  </
                div>
                </
                body>
                </
                html
                Aber mein ehemaliger Art-Director sagte immer: "Zentrieren ist Deppendesign".

                Peter

                Zitat von AmicaNoctis Beitrag anzeigen
                Was habe ich denn deiner Meinung nach überlesen?
                Dass nicht Box zentriert wird.
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  Lieber Peter,

                  du hast das aber schon gelesen, dass es um vertikale Zentrierung geht?

                  SCNR

                  Amica
                  [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                  Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                  Super, danke!
                  [/COLOR]

                  Kommentar


                  • #10
                    Zitat von AmicaNoctis Beitrag anzeigen
                    Was habe ich denn deiner Meinung nach überlesen?
                    Zitat von Kropff Beitrag anzeigen
                    Dass nicht Box zentriert wird.
                    Hab ich nicht, Begründung:
                    Zitat von AmicaNoctis Beitrag anzeigen
                    Naja, jeder Inhalt liegt in einer Box oder lässt sich durch eine weitere einschachteln.
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      Zitat von AmicaNoctis Beitrag anzeigen
                      Lieber Peter,

                      du hast das aber schon gelesen, dass es um vertikale Zentrierung geht?

                      SCNR

                      Amica
                      Ja habe ich. Aber das ist in der Form imho nicht möglich, da sowohl der IE 6 als 7 tabellerische Darstellungen über display nicht kennt. Daher muss man den Umweg über padding-top gehen. Ist kein echtes vertical-align, aber da er eh mit einer festen Höhe arbeitet, geht das in diesem Fall. Darf halt nur eine Zeile auftauchen. Oder man packt das wieder in ein div und arbeitet dort auch mit einer festen Höhe. Weitere Infos oder ein konkretes Beispiel wäre allerdings hilfreich.

                      Peter
                      Zitat von AmicaNoctis Beitrag anzeigen
                      Hab ich nicht, Begründung:
                      Die kam aber erst später. Meine Güte! Du bist ja genau so schlimm wie wir Männer .
                      Zuletzt geändert von Kropff; 24.09.2009, 20:07.
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar


                      • #12
                        Padding scheint aber auch ungeeignet, da ich ja #header_top_left
                        und header_top_right habe.
                        Nehme ich bei #header_top_left zum beispiel 10px so heißt das noch
                        lange nicht, dass dann der Inhalt rechts mit 10px padding automatisch
                        vertikal mittig ist.
                        Man stelle sich einen Banner mit den Maßen 468x60 und 400*50 oder
                        derartiges vor. Hier läge es ja nun am Programmierer einen
                        mathematischen Algorithmus zu schreiben, der annähernde Höhen
                        berechnet um vertikal mittiges Layout darzustellen.

                        Gibt es denn wirklich hierfür noch keine eindeutige Lösung?

                        Kommentar


                        • #13
                          Gibt es denn wirklich hierfür noch keine eindeutige Lösung?
                          Imho nein. Du kannst natürlich für jedes div ein spezielles padding-top setzen. Ob der Inhalt nun vertikal ausgerichtet ist, kannst du nur über einen Screenshot feststellen. Und das hängt auch immer von der Inhaltsmenge (z.B. der Zeilen) ab. Oder du arbeitest mit den "guten alten" Layouttabellen.

                          Peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            Zitat von kerbstone Beitrag anzeigen
                            Gibt es denn wirklich hierfür noch keine eindeutige Lösung?
                            Kommt es absolut nicht in Frage, den Inhalt in eine weitere Box zu packen und die vertikal zu zentrieren?

                            Wenn nicht, das notwendige JavaScript ist nicht sonderlich kompliziert. Einen Algorithmus braucht man dafür nicht, nur ca. 3 Zeilen Code.

                            Gruß,

                            Amica
                            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                            Super, danke!
                            [/COLOR]

                            Kommentar


                            • #15
                              Ok, danke, Dann werden es wohl die "guten alten" Tabellen

                              Kommentar

                              Lädt...
                              X