div in div abhängig vom Inhalt zentriert

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

  • div in div abhängig vom Inhalt zentriert

    Ich habe einen folgenden aufbau:

    Code:
    <div>
     <div name="über_dem_Inhalt">der Inhalt versteckt sich unter mir</div>
     <div>Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
    Inhalt...
     </div>
    </div>
    Wie im Anhang(das ist nur ein Prototyp) sollte die Schrift möglichst genau in der Mitte sein.
    Der Inhalt im Textfeld kann verschieden gross sein und auch die Schrift die darüber geschrieben werden soll.
    Im Falle des Anhangs "Game Over".

    Wie kann ich jetzt über_dem_Inhalt so mitteln dass es genau in der Mitte über dem Textfeld mit dem Inhalt steht?

    MfG

    JMC

  • #2
    Sry, das mit dem Anhang hat erst nicht geklappt
    Angehängte Dateien

    Kommentar


    • #3
      Re: div in div abhängig vom Inhalt zentriert

      Ich würde sagen: Problem unlösbar.
      Jede vertikal-zentrierte Lösung per CSS die ich bisher gesehen habe, erfordert Kenntnis der Höhe der jeweiligen Box. Wenn du meinst das ist variabel hast du ein Problem.

      Such bei google nach vertikale Zentrierung oder so, du fällst über genügend Lösungen. Guck ob du davon was verwenden kannst

      Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

      bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
      Wie man Fragen richtig stellt

      Kommentar


      • #4
        Jede vertikal-zentrierte Lösung per CSS die ich bisher gesehen habe, erfordert Kenntnis der Höhe der jeweiligen Box. Wenn du meinst das ist variabel hast du ein Problem
        suche auch schon seit geraumer Zeit nach einer Lösung für dieses Problem.
        Ist der einzige Fall, wo ich ohne eine Tabelle nicht weiterkomme...
        PHP-Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"

        <
        html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
         <
        head>
           <
        title>Zentrieren </title>
           <
        meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <
        style type="text/css">
           <!--
              
        htmlbody {height:100%; width:100%; text-align:center; }
              * { 
        margin:0pxpadding:0px; }
              
        #content { margin:0px auto;  text-align:center; height:100%; width:100%;}
              
        table width:100%; height:100%; }
              
        td vertical-align:middletext-align:center; }
              
        div#bsp {border:1px solid red;  font-size:130px; margin:0px auto;}
           
        -->
           </
        style>
         </
        head>
         <
        body>
           <
        div id="content">
           <
        table  border="0"  cellpadding="0" cellspacing="0">
             <
        tr
               <
        td
                <
        div id="bsp"BspCenter</div
              </
        td>
             </
        tr>
           </
        table>
           </
        div>
         </
        body>
        </
        html
        Wer den Effekt OHNE Tabelle hinbekommt kriegt 'nen Smiley von mir
        "I don't want to belong to any club that would accept me as a member."

        Groucho Marx

        Kommentar


        • #5
          Vielen Dank.
          Hab jetzt ne Lösung gefunden, die bei meinem Problem nützt:
          Code:
          <style type="text/css">
          .div1 {position:absolute; top:120px; left:50px;border:solid 2px blue;z-index:0;}
          .table1{ border:solid 2px red;text-align:center;}
          td{width:400px;height:400px;}
          .div2{position:absolute;top:0px; left:0px;z-index:-1;}
          </style>
          <div  class="div1">
          <table class="table1">
           <tr>
            <td>
             <div class="div2">
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
          sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
            </div>
             <div style="font-size:46pt;">hdfgdfhfi</div>
            </td>
           </tr>
          </table>
          </div>
          Wenn man ohne Tabelle arbeiten möchte kann man ja auch den display ersatz benutzen mit display:table... ganz ohne Tabelle gehts glaub ich wirklich nicht.

          MfG

          JMC

          Kommentar


          • #6
            Wer den Effekt OHNE Tabelle hinbekommt kriegt 'nen Smiley von mir
            dann gönne ich mir jetzt mal selber den Smiley

            PHP-Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"

            <
            html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
                <
            head>
                    <
            title>Eine dynamische Höhe von 100%</title>

                <
            style type="text/css">
                
            div {/* border:1px solid red; */ }
                *{
            padding:0pxmargin:0px;}
             
            bodyhtml {height100%; text-align:center; }
            #outer {height: 100%; overflow: visible; margin:0px auto; } /* or without overflow */

            #outer[id] {display: table; position: static;}

            #middle {position: absolute; top: 50%; } /* for explorer only*/
            #middle[id] {display: table-cell; vertical-align: middle; position: static;}

            #inner {position: relative; top: -50%; height:100px; 
                    
            width:300pxborder:1px solid green;} /* for explorer only */
            /* optional: #inner[id] {position: static;} */
                
            </style>
                </
            head>    
                <
            body>
                 <
            div id="outer">
                   <
            div id="middle">
                     <
            div id="inner">
                       
            any text
                       any height
                       any content
            , for example generated from DB
                       everything is vertically centered
                     
            </div>
                   </
            div>
                 </
            div>
                </
            body>
            </
            html
            Quelle:
            Stimmt zwar im IE noch nicht 100 %, aber die Richtung ist da
            "I don't want to belong to any club that would accept me as a member."

            Groucho Marx

            Kommentar

            Lädt...
            X