Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15

Thema: CSS - Ausrichtung in der Mitte eines div - tags

  1. #1
    Meister(in)
    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS - Ausrichtung in der Mitte eines div - tags

    Hallo,

    ich habe mir einen div Abschnitt festgelegt mit festgelegter Höhe und Breite. Jetzt möchte ich, dass mein Text sowohl bezogen auf die Breite als auch auf die Höhe des div Abschnitts mittig erscheint.

    text-align:center; funktioniert einmalig aber
    vertical-align:middle; ist ohne Wirkung.

    Ist das der falsche Befehl?

    Viele Grüße
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!


  2. #2
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    'vertical-align:middle' - so etwas gibt es. Wenn es nicht funktioniert, dann muß es woanders dran liegen.

    Hab ich die URL übersehen?

    Fragt ....

    Ronald

  3. #3
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also als Warnung vorneweg:

    Auf der Website siehts etwas schlampig aus, weil ich gerade versuche mich zum ersten Mal mit CSS anzufreunden....

    Ganz genau mittig wird der Text auch nie werden, da ich ja mein Menü mit so nem 5px großen Rand umgeben habe um Abstand zwischen den einzelnen Button zu haben - aber es sind mehr als 5px Unterschied! Außerdem ändert sich nichts an der Ausrichtung, wenn ich statt "middle" "top" oder "bottom" angebe.

    Hier der Link
    http://www.10-fragen.de

    Vielen Dank fürs Fehler suchen,
    Questionmark


  4. #4
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So, ich hab mal eben mein Wissen aufgefrischt:

    Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
    Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.

    Einzige Variante: Wenn der Text einzeilig ist, kannst du ein line-height mit der gleichen Angabe wie das height des Div setzen. Bei mehrzeiligem Text: Pech gehabt, geht nicht mehr vernünftig.

    Ansonsten: nimm eine Tabelle, schließlich sind die ja dafür da.
    Bei Tabellenzellen funktioniert das vertical-align.

    G.a.d.M.

    Ronald

  5. #5
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ohhhh, schade!

    Na, dann muss ich wohl oder übel wohl doch vorerst noch zu einer Tabelle greifen, obwohl ich doch hier im Forum gelernt habe, dass man Tabellen nur da verwendet, wo auch im geschriebenen Text eine Tabelle stehen würde....

    Damit muss ich mich dann wohl noch etwas gedulden.

    Trotzdem danke für deine Hilfe!

    Grüße,
    Questionmark


  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Questionmark
    Na, dann muss ich wohl oder übel wohl doch vorerst noch zu einer Tabelle greifen, obwohl ich doch hier im Forum gelernt habe, dass man Tabellen nur da verwendet, wo auch im geschriebenen Text eine Tabelle stehen würde....
    Dazu mag ich bald nichts mehr sagen. hören kann ich es schon lange nicht mehr.

    Grundsätzlich:

    Tabellen für HTML wurde geschaffen um damit HTML-Seiten zu gestalten. Ob du in die Tabellen nun Text oder Grafiken packst, ob du Tabellenzellen längs oder quer miteinander verbindest - das alles ist die als Webemaster freigestellt, genau so, wie es dir am besten paßt.

    Alle Browser verstehen Tabellen. Es gibt für Tabellen unheimlich viele Styles, Head-, Body- und Foot-Tags, verschiedene Rahmen, as auch immer - Styles ohne Ende. Heute, in einer Zeit, wo Stylesheets langsam die HTML-Formatierungen ablösen, gibt es das alles auch in CSS.

    Nun möge mir jemand verraten, wozu das alles, wenn nur einer von 10.000 Webmaster irgendwelche Daten tabellarisch auf seine Internetseite packt?

    Leider gibt es aber ein paar User, die meinen, sie wissen mehr als andere. Diese paar User machen sich verdammt breit und erzählen allen, daß Tabellen nicht dafür geschaffen wurden, Webseiten zu stylen. Dabei zitieren sie sich dann fleißig gegenseitig und jeder weiß es noch ein wenig besser als der andere.

    Irgendwie erinnert mich das ein wenig an Till Eulenspiegel, an Atomkraftgegner, militante Nichtraucher, Wehrdienstverweigerer, Porschehasser - alle haben Argumente, aber alle eben nur einseitig.

    Auf wen du höen willst, entscheide bitte selbst - ich erstelle meine Internetseitenmit mit alledem, was HTML & Co. hergibt. Warum sollte ich auf Funktionen verzichten, die zwar vorgesehen sind, aber einigen wenigen Usern nicht passen?

    http://de.selfhtml.org/html/tabellen/layouts.htm

    G.a.d.M.

    Ronald

  7. #7
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Ronald
    Dazu mag ich bald nichts mehr sagen. hören kann ich es schon lange nicht mehr.
    Das tut mir Leid, nerven wollte ich nicht

    Da bin ich wohl einem oder auch mehreren Porsche hassenden Till Eulenspiegeln augesessen

    Vielen Dank für die Richtigstellung und den geschichtlichen Exkurs - werd jetzt wieder ohne schlechtes Gewissen Tabellen verwenden, natürlich gepaart mit CSS Kenn ja jetzt jemand Erfahrenen, auf den ich verweisen kann, wenn mich jemand anmault mit dem Hinweis, dass Tabellendesign nicht professionell genug ist....

    Es grüßt,
    Questionmark


  8. #8
    Teeny
    Registriert seit
    26.10.2006
    Beiträge
    27
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi Questionmark,

    Du muss nicht gleich die flinte ins Korn werfen.....

    Es GIBT Lösungen, ein Div mittig mittig zu bekommen.

    Ronald schrieb:
    Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
    Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.
    Ronald das ist leider..... FALSCH

    Ganz korrekt und ohne Bastelei geht das schon über Netscape/Firefox...
    mit

    Vertical-Align !!!!

    allerdings, ist das dann wie eine Tabelle, und dann ist es wirklich leichter,
    das ganze direkt als echte tabelle mit <table> zu machen, dann funktioniert
    Vertical-align nämlich auch mit dem Internet Explorer , wie Roland bereits schrieb!!!!

    beim Explorer muss man ohne <table> etwas kräftiger in die Trickkiste greifen, aber es geht auch !!!

    hab ein bischen in Google gewühlt, und tatsächlich eine Lösung für den internet Explorer gefunden !!Hab eine kleine Modifikation vorgenommen, so dass es auch alles mittig mittig ist, und unter mein Tutorial gehängt !!

    Gruß Peter

    hab alles mal schön zusammengefasst und in HTML gebannt



    http://<br /> <a href="http://wow.b...html</a><br />

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//DE">
    <html>
    <!--
       HTML 3.2
       Document type as defined on http&#58;//www.w3.org/TR/REC-html32
    -->
    <head>
           <title> Div sollen Mittig erscheinen </title>
    <style type="text/css">
       .table &#123;
       	  display&#58;table;
       &#125;
       .tr &#123;
       	  display&#58;table-row;
       &#125;
       
       .oben &#123;
       	 position&#58;relative;
       	 border&#58;2px;
       	 border-style&#58;ridge;
       	 text-align&#58;center;
       	 vertical-align&#58;top;
       	 width&#58;200px;
       	 height&#58;200px;
    
       	 display&#58;table-cell;   	 
    
       &#125;
       .mitte&#123;
       	 position&#58;relative;   	
       	 border&#58;2px;
       	 border-style&#58;ridge;
       	 text-align&#58;center;
       	 vertical-align&#58;middle;
       	 width&#58;200px;
       	 height&#58;200px;
     	 
       	 display&#58;table-cell;  	 
       &#125;
       .unten&#123;
       	 position&#58;relative;   	
       	 border&#58;2px;
       	 border-style&#58;ridge;
       	 text-align&#58;center;
       	 vertical-align&#58;bottom;   	
       	 width&#58;200px;
       	 height&#58;200px;
    
       	 display&#58;table-cell;
       &#125;
       
    		#outer &#123;width&#58;200px;height&#58; 200px; overflow&#58; hidden; position&#58; relative;&#125;
    		#outer&#91;id&#93; &#123;display&#58; table; position&#58; static;&#125;
    		
    		#middle &#123;position&#58; absolute; top&#58; 50%;width&#58;100%&#125; /* for explorer only*/
    		#middle&#91;id&#93; &#123;display&#58; table-cell; vertical-align&#58; middle; position&#58; static;&#125;
    		
    		#inner &#123;position&#58; relative; top&#58; -50%&#125; /* for explorer only */
    		/* optional&#58; #inner&#91;id&#93; &#123; position&#58; static&#125; */
    		
    		/* just format */
    		div.greenBorder &#123;border&#58; 1px solid green; background-color&#58; ivory&#125;
    
    
    </style>
    
    </head>
    <body >
    
      
    
    
        Zuerst die klassische Variante, Div inhalte Vertikal zu mitten,
    	  
    
    	  Dazu verwendet man eine Tabelle, in denen du die Spalten mit CSS formatierst 
    	  
    
    	  innerhalb der spalte sind dann alle divs je nach wunsch vertikal positioniert!
    	  
    
          
    
    	  verwendet vertical-align in < td >
    	
      </p>
    
    <table>
    <tr>
    <td style="vertical-align&#58;top;width&#58;200px;height&#58;200px;border&#58;3px;border-style&#58;ridge;text-align&#58;center">
          <div id="div in Tabelle oben" style="border&#58;2px;border-style&#58;ridge">
            ich bin ein DIV
            
    
             ->oben<- 
            
    
            durch hilfe einer tabelle
          </div>
    </td>
    <td style="vertical-align&#58;middle;width&#58;200px;height&#58;200px;border&#58;3px;border-style&#58;ridge;text-align&#58;center">
          <div id="div in Tabelle mittig" style="border&#58;2px;border-style&#58;ridge">
            ich bin ein DIV
            
    
             ->mittig<- 
            
    
            durch hilfe einer tabelle
          </div>
    </td>
    <td style="vertical-align&#58;bottom;width&#58;200px;height&#58;200px;border&#58;3px;border-style&#58;ridge;text-align&#58;center">
          <div id="div in Tabelle mittig" style="border&#58;2px;border-style&#58;ridge">
            ich bin ein DIV
            
    
             ->unten<- 
            
    
            durch hilfe einer tabelle
          </div>
    </td>
    </tr>
    </table>
    
    
    
    
    
    
    
      
      
    
    
        Nun die "echte" CSS Variante, Divs Vertikal zu mitten,
    	  
    
    	  geht allerdings NUR in Netscape/Firefox
    	  
    
    	  
    
    	  verwendet hierbei den 'Display'-Befehl von CSS und 'vertical-align' 
    	  
    
    	  ist allerdings nahezu das gleiche wie mit < table >,
    	  
    	  
    	   daher nicht umbedingt praktikabel !!
    	
      </p>
     
      <div id="ich bin eine Tabelle" class="table">
        <div id"ich bin eine Reihe" class="tr">
          <div id="ich bin Spalte 1" class="oben">
            <div id="jetzt das Div" style="border&#58;2px;border-style&#58;ridge;">      
            [b]
              ich bin eine DIV Tabelle 
              
    
    	      ->oben<-
              
     
    	       gehe allerdings NUR in Netscape
    	    [b]    
    	    </div>
          </div>
          <div id="ich bin Spalte 2" class="mitte" >
            <div id="jetzt das Div" style="border&#58;2px;border-style&#58;ridge;">     
            [b]
              ich bin eine DIV Tabelle 
              
    
    	      ->Mitte<-
              
     
    	       gehe allerdings NUR in Netscape
    	    [b]
    	    </div>
    	  </div>
           <div id="ich bin Spalte 3" class="unten">
            <div id="jetzt das Div" style="border&#58;2px;border-style&#58;ridge;">       
            [b]
              ich bin eine DIV Tabelle 
              
    
    	      ->unten<-
              
     
    	       gehe allerdings NUR in Netscape
    	    [b]
    	    </div>
          </div>
        </div>
      </div>
      
    
      
    
        
    
    
        Jetzt eine Variante, mit der man das direkte DIV sowohl unter Netscape/Firefox,
    	  
    
    	  als auch unter dem Internet Explorer mittig positioniert..
    	  
    
    	  ohne die klassische < table > Funktion von HTML
    	
      </p>
      
    
     
    <div id="outer" class="greenBorder">
    	<div id="middle">
    		<div id="inner" class="greenBorder" align="center">
               <div id="jetzt das Div" style="width&#58;100px;border&#58;2px;border-style&#58;ridge;text-align&#58;center"> 		   
    			hier kann
    
    			irgentwas stehen
    
    			alles mittig
    
    	        </div>
    		</div>
    	</div>
    </div>    
    
    
    
    </body>
    </html>

  9. #9
    Meister(in)
    Themenstarter

    Registriert seit
    11.10.2006
    Beiträge
    299
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Peter
    Es GIBT Lösungen, ein Div mittig mittig zu bekommen.
    Danke für den Hinweis, Peter,

    hab mir das Ganze mal angeschaut, aber nach Ronalds letztem Post bin ich zu dem Schluss gekommen, nicht alles über CSS erzwingen zu müssen um dem modernen Webdesign zu genügen. Und wie du schon selbst gesagt hast, scheint mir in diesem Fall der <table>-Tag wirklich um einiges praktikabler...

    Grüße


  10. #10
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Peter
    Ronald schrieb:
    Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
    Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.
    Ronald das ist leider..... FALSCH
    Nein, es war schon genau richtig: innerhalb eines Div-Tag gibt es keine vertikale Zentrierung.

    Was du machst, ist Div-Tags so lange zu schachteln, bis es irgendwann wie eine vertkale Zentrierung ausieht.
    Das sind aber zwei verschiedene Schuhe.

    G.a.d.M.

    Ronald

Ähnliche Themen

  1. Ausrichtung
    Von radeon55 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 23.03.2008, 20:34
  2. iFrame-Ausrichtung in der Mitte der Seite??
    Von denny125 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 31.05.2007, 08:35
  3. Ausrichtung von swf dateien?
    Von Tubby-killer im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.06.2005, 11:37
  4. ausrichtung des bildes
    Von Carina im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 19.10.2004, 20:33
  5. Zugriff auf den Inhalt eines "input"-Tags über VBS
    Von Macintosch im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 06.05.2004, 09:33

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •