tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
0
ZUGRIFFE
11204
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 05.08.03 15:38 #1
    Avatar von Andreas Gaisbauer
    Andreas Gaisbauer Andreas Gaisbauer ist offline
    Registriert seit
    Apr 2002
    Ort
    Ingolstadt
    Beiträge
    2.940
    Wie kann ich Ebenen oder Elemente zentrieren?

    Hier exemplarisch 2 CSS Methoden, entweder :
    PHP-Code:
    <body style="margin:20px 0px; padding:0px; text-align:center;">
    <    div id="bla" style="width:400px; height:400px; border:1px solid black; margin:0px; text-align:left; padding:6px;">
            Inhalt<br>
            Inhalt<br>
            Inhalt<br>
            Inhalt<br>
            Inhalt<br>
    </    div> 
    oder:
    PHP-Code:
    <body style="padding:10%; text-align:center;">
    <    div id="bla" style="width:100%; height:100%; border:1px solid black; text-align:left; overflow:auto;">
            Inhalt<br>
            Inhalt<br>
            Inhalt<br>
            Inhalt<br>
            Inhalt<br>
    </    div> 
    Eine weitere Methode vom Forumsuser "muhkuh"
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

          html, body {
          width: 100%;
          height: 101%;
      }
 
      #content {
          position: relative;
          left: 50%;
          margin-left: -300px; /* margin-left = invert(width / 2)! */
          width: 600px;
          /* optional kann man das gleiche auch auf die Höhe anwenden */
          top: 50%;
          margin-top: -200px; /* margin-top = invert(height / 2)! */
          height: 400px;
      }
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
  <head>  
    <title>Zentrieren mit CSS</title> 
  </head> 
  <body>  
    <div id="content">  Ich bin der zentrierte DIV-Container "content"! </div> 
  </body> 
</html>
    Funktioniert in allen Browsern gleichermaßen. So fällt auch die Rückformatierung mit text-align weg, was doch recht angenehm ist.



    Ein weiteres - sehr gutes - Skript kommt von Chris Poole - es ist allerdings Javascript basierend...
    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <?xml version="1.0" encoding="UTF-8"?><HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
      <TITLE>chrispoole.com » scripts » centeralleg</TITLE>
      <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <STYLE type=text/css>
    #box { Z-INDEX: 3; BACKGROUND: red; POSITION: absolute; }
    #box2 {    Z-INDEX: 2; BACKGROUND: blue; WIDTH: 300px; POSITION: absolute; HEIGHT: 300px; }
    #box3 {    Z-INDEX: 1; BACKGROUND: yellow; WIDTH: 500px; POSITION: absolute; HEIGHT: 500px; }
    </STYLE>

    <SCRIPT type=text/javascript>
        var objID = new Array();
        objID[0] = "box";
        objID[1] = "box2";
        objID[2] = "box3";
    </SCRIPT>

    <BODY onload=centerAll();>
    <DIV id=box>content</DIV>
    <DIV id=box2>content</DIV>
    <DIV id=box3>content</DIV>
    <SCRIPT type=text/javascript>

        /****************************************************
        *    Center All:
        *        by Chris Poole
        *        [url]http://chrispoole.com[/url]
        *
        *        Keep this notice intact to use it :-)
        ****************************************************/

    function centerAll() {
        var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
        var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;
        for (x=0;x<objID.length;x++) {
            var objRef = document.getElementById(objID[x]);
            var objW = objRef.offsetWidth;
            var objH = objRef.offsetHeight;
            objRef.style.left = ((pageX/2)-(objW/2))+"px";
            objRef.style.top = ((pageY/2)-(objH/2))+"px";
        }
    }
    window.onresize=centerAll;
    </SCRIPT>
    </BODY></HTML>
    Quelle: http://chrispoole.com


    Ein weiterer Ansatz ist es mit einer Tabelle zu versuchen:
    PHP-Code:
    <table border="0" align="center" width="100%" height="100%" cellspacing="0" cellpadding="0">
      <    tr>
        <    td align="center">Inhalt</td>
      </    tr>
    </    table> 
    das "Height"-Attribut ist zwar nicht im W3C Standard, wird aber von den Browser erkannt.
    Angehängte Dateien Angehängte Dateien
     
« [HTML] Welche Alternativen gibt es zum Iframe? | [JS] Wie kann ich eine Art "vBulletin-Editor" schreiben? »

Ähnliche Themen

  1. Zentrieren von Ebenen
    Von Zeitgenosse im Forum CSS
    Antworten: 5
    Letzter Beitrag: 15.08.07, 20:23
  2. svg-Elemente zentrieren
    Von DealeyLama im Forum CSS
    Antworten: 6
    Letzter Beitrag: 15.03.06, 13:14
  3. Ebenen zentrieren
    Von hoho im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 25.06.04, 18:28
  4. Ebenen zentrieren
    Von eugster im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 03.05.04, 11:10
  5. Ebenen zentrieren
    Von JojoS im Forum HTML-Editoren
    Antworten: 0
    Letzter Beitrag: 31.10.03, 18:39