Tutorialwelt.de » CSS Pro http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Wie man in HTML Tabellen nur den tbody scrollt http://www.tutorialwelt.de/312/tabellen-nur-tbody-scrollen.htm http://www.tutorialwelt.de/312/tabellen-nur-tbody-scrollen.htm#comments Sat, 19 Sep 2009 00:34:17 +0000 admin http://www.tutorialwelt.de/?p=312
  • Tabellen in HTML – Teil 4 thead, tbody, tfoot ...Heute möchte ich Euch erklären, wie Ihr größere Tabellen in...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     HTML Tabellen nur tbody scrollen

    Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen: Um in allen Browsern den tbody Bereich scrollen zu können, muß ganz gewaltig getrickst werden. Und damit fangen wir heute an: Zuerst benötigen wir eine Standardtabelle mit einem thead, einem tfoot und einem tbody Bereich:

    Beispielcode HTML:

    <html>
 <body>
  <table>
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td>Zelle 1</td>
     <td>Zelle 2</td>
     <td>Zelle 3</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Wir müssen, um tbody zu scrollen eine weitere Tabelle in den tbody Bereich einfügen. Dazu ist der erste Schritt, die drei td Zellen zu einer einzigen zusammenzufassen:

    Beispielcode HTML:

    <html>
 <body>
  <table>
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">Zelle 1</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Mit colspan=”3″ teilen wir der Tabelle mit, daß sie die drei Zellen zu einer einzigen zusammenfügen soll.

    Nun machen wir weiter: Wir weisen der Tabelle eine id zu, damit wir die Tabelle per CSS formatieren können. Nennen wir die Tabelle outertab (für die äußere Tabelle):

    Beispielcode HTML:

    <html>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">Zelle 1</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Nun möchte ich per CSS festlegen, daß die Tabelle einen Rahmen hat, der 1 Pixel breit und schwarz ist.
    Die Tabelle soll 20 Pixel von oben und links versetzt werden (ich möchte sie etwas freistehend haben), 70% breit und 400 Pixel hoch:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">Zelle 1</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Nun müssen wir in den tbody Bereich einen Div Container einfügen. Diesem div Container geben ir eine id innerdiv:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Der div Container soll 330 Pixel hoch (etwa 70px kleiner als die Tabelle), 100% breit und als overflow den Wert auto haben:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Nun möchte ich in den Div-Container eine zweite Tabelle setzen. Dieser Tabelle möchte ich die id innertab zuweisen. Diese Tabelle sollte nun zu Testzwecken schon mehrere tr Zeilen beinhalten. Wir wollen schließlich die Tabelle auch scrollen:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Diese innere Tabelle sollte eine Höhe von 330 Pixel und eine Breite von 100% haben. Der Rand sollte auf 0px gesetzt werden (ist aber kein muss):

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #innertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Zu guter letzt noch ein paar Schönheitsmakulaturen: Die Zellen in der innertab Tabelle sollten schon einen Rand haben.

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #innertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #innertab td{
      border: 1px #000000 solid;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Und das rechte heading sollte auf 34% gesetzt werden, da es über dem Scrollbalken sitzt. Hier werden die Zellen um etwa 20 Pixel versetzt. Bei mir sah es besser aus, wenn ich die mittlere Spalte der innertab ebenfalls auf 34% gesetzt habe. Das Endergebnis sähe dann folgendermaßen aus:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #innertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #innertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Wer die th+th+th Notation nicht kennt: mit th+th wird das zweite heading angesprochen. Mit th+th+th das Dritte usw.

    Nun sieht die Tabelle in allen Browsern gleich aus und der tbody Bereich ist scrollbar. Ihr könnt mit dem Ergebnis ein wenig herumexperimentieren. Ich habe mir viele Lösungswege angesehen, aber dieser ist wirklich der einzige, der in fast allen Browsern das gleiche Ergebnis liefert.

    Ihr habt hier allerdings einen Nachteil: Der Drucker spielt hier nicht mit. Normalerweise sollte der Drucker auf jeder neuen Seite den thead und den tfoot Bereich ausdrucken. Um den Drucker ebenfalls zu unterstützen muß nochmals getrickst werden. Aber das zeige ich Euch im nächsten Tabellen Tutorial.

    Related posts:

    1. Tabellen in HTML – Teil 4 thead, tbody, tfoot ...Heute möchte ich Euch erklären, wie Ihr größere Tabellen in...
    2. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    3. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/312/tabellen-nur-tbody-scrollen.htm/feed 1     Container mit CSS positionieren http://www.tutorialwelt.de/80/mit-css-positionieren.htm http://www.tutorialwelt.de/80/mit-css-positionieren.htm#comments Mon, 17 Aug 2009 02:55:41 +0000 admin http://www.tutorialwelt.de/?p=80
  • CSS-Tutorial – vertikal zentrieren ganz einfach Oftmals wird die Frage gestellt, wie man vertikal mit CSS...
  • Mit CSS z-index Container in den Vordergrund bringen Heute erkläre ich Ihnen, wie man einen Container ein Image...
  • Wie man in HTML Tabellen nur den tbody scrollt ...Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen:...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Container mit CSS positionieren

    Um per CSS div Container, images, links, paragraphen und und und zu positionieren, gibt es verschiedene Möglichkeiten. Eine einfach zu nutzende Möglichkeit ist das Objekt per position zu platzieren.

    Es gibt zwei Möglichkeiten, zu positionieren: absolut und relativ.

    Positioniert man absolut, dann ist die Positionierung des Objektes ohne konkrete Abhängigkeiten zu dem Rest der Seite.

    Positioniert man relativ, dann bestimmt der Content, der sich vor dem Objekt befindet die Position.

    Ich möchte Ihnen das Anhand von zwei Beispielen zeigen.

    Ich erstelle in einer HTML-Datei einen DIV-Container. Ich gebe ihm die ID divcnt. Der Container soll 500px x 500px groß sein und einen grauen Hintergrund haben.

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   @import url("pos.css");
  </style>
 </head>
 <body>
  <div id="divcnt"></div>
 </body>
</html>

    Beispielcode pos.css:

    #divcnt {
        background: #cccccc;
        width: 500px;
        height: 500px;
}

    In den Div Container soll nun ein weiterer Div Container mit einer anderen Farbe gesetzt werden.
    Der zweite Container soll 150px vom oberen und 50px vom linken Rand entfernt sein.
    Er soll die Maße 50px x 50px besitzen.
    Die Hintergrundfarbe soll dunkler sein, als die, des ersten Containers.
    Der Container soll divcnt2 heißen.

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   @import url("pos.css");
  </style>
 </head>
 <body>
  <div id="divcnt"><div id="divcnt2"></div></div>
 </body>
</html>

    Beispielcode CSS:

    #divcnt {
        background: #cccccc;
        width: 500px;
        height: 500px;
}

#divcnt2 {
        background: #444444;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50px;
        top: 150px;
}

    Wenn Sie sich dieses Beispiel ansehen, werden Sie feststellen, daß der zweite Container innerhalb des ersten nach rechts unten versetzt ist. Der Abstand beträgt genau die oben in der CSS festgelegten Maße.

    Ersetzen wir nun das absolute mit relative:

    Beispielcode CSS:

    #divcnt {
        background: #cccccc;
        width: 500px;
        height: 500px;
}

#divcnt2 {
        background: #444444;
        width: 50px;
        height: 50px;
        position: relative;
        left: 50px;
        top: 150px;
}

    Sie sehen nun einen kleinen Unterschied zwischen absoluter Positionierung und relativer Positionierung.

    Bei der relativen Positionierung sollte der Kasten ein wenig nach rechts unten verrutscht sein.

    Das hat folgenden Grund: Der erste Container muss auch positioniert sein, damit die absolute Positionierung des zweiten Containers von dem ersten Container abhängig werden kann.

    Was passiert nun, wenn wir den ersten Container auch positionieren? Wir testen dies gemeinsam:

    Beispielcode CSS:

    #divcnt {
        background: #cccccc;
        width: 500px;
        height: 500px;
        position: absolute;
        left: 100px;
        top: 100px;
}

#divcnt2 {
        background: #444444;
        width: 50px;
        height: 50px;
        position: relative;
        left: 50px;
        top: 150px;
}

    Sie können sehen, daß der zweite Container nun mit dem ersten mit gewandert ist. Nun sollte auch die absolute Positionierung des zweiten Containers das gleiche Ergebnis liefern:

    Beispielcode CSS:

    #divcnt {
        background: #cccccc;
        width: 500px;
        height: 500px;
        position: absolute;
        left: 100px;
        top: 100px;
}

#divcnt2 {
        background: #444444;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50px;
        top: 150px;
}

    Wie Sie gesehen haben sollten, ist der Kasten diesmal tatsächlich an der gleichen Stelle, wie bei der relativen Positionierung. Eine absolute Positionierung eines Objektes setzt voraus, daß alle übergeordneten Container auch positioniert wurden.

    Nun zeige ich Ihnen den Unterschied zwischen absoluter und relaitver Positionierung. Wir fügen in der HTML-Datei vor den zweiten Div-Container einen Dummy-Text ein:

    Beispielcode HTML:

    <html>
<head>
  <style type="text/css">
   @import url("pos.css");
  </style>
 </head>
 <body>
  <div id="divcnt">
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   Dummy-Text<br>
   <div id="divcnt2"></div>
  </div>
 </body>
</html>

    Folgendes sollte nun passiert sein: Der zweite Container überlagert stellenweise den Dummy-Text.

    Um dies zu verhindern müssen wir dem zweiten Div-Container mitteilen, daß er den Abstand nach oben zwar eingehalten werden soll, aber wenn vorher noch Content erscheint, dann soll er den bitte nicht überlagern, sondern einfach nach unten ausweichen. Dazu verwenden wir nun die relative Positionierung:

    Beispielcode CSS:

    #divcnt {
        background: #cccccc;
        width: 500px;
        height: 500px;
        position: absolute;
        left: 100px;
        top: 100px;
}

#divcnt2 {
        background: #444444;
        width: 50px;
        height: 50px;
        position: relative;
        left: 50px;
        top: 150px;
}

    Nun sieht alles wieder schön sauber aus.

    Es gibt noch andere Möglichkeiten Objekte zu positionieren. Ich werde Ihnen alle Alternativen Schritt für Schritt zeigen.

    Related posts:

    1. CSS-Tutorial – vertikal zentrieren ganz einfach Oftmals wird die Frage gestellt, wie man vertikal mit CSS...
    2. Mit CSS z-index Container in den Vordergrund bringen Heute erkläre ich Ihnen, wie man einen Container ein Image...
    3. Wie man in HTML Tabellen nur den tbody scrollt ...Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen:...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/80/mit-css-positionieren.htm/feed 1     CSS-Tutorial – vertikal zentrieren ganz einfach http://www.tutorialwelt.de/36/css-vertikal-zentrieren.htm http://www.tutorialwelt.de/36/css-vertikal-zentrieren.htm#comments Wed, 12 Aug 2009 14:06:21 +0000 admin http://www.tutorialwelt.de/?p=36
  • Container mit CSS positionieren Es gibt zwei Möglichkeiten, zu positionieren: absolut und relativ. Positioniert...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Vertikale und horizontale Zentrierung eines DIV Containers per CSS

    Oftmals wird die Frage gestellt, wie man vertikal mit CSS zentrieren kann.

    Für die horizontale Zentrierung ist die text-align Methode vorgesehen. Doch was macht man, um etwas vertikal zu zentrieren?

    Dazu gibt es eine sehr einfache Lösung:

    Nehmen wir mal als Beispiel einen Div-Container mit der Breite 500px und der Höhe 100px.

    Wir erstellen in einer HTML einen DIV-Container mit der id=”zentr” und setzen in der CSS folgende Eigenschaften:

    Beispielcode:

    body {
    background: #cc0000;
    }

    #zentr {
    width: 500px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -50px;
    background: #ffffff;
    }

    Das bedeutet: Wir setzen erst den Container mit seiner linken oberen Ecke an die Bildmitte und ziehen dann per Margin die Hälfte der Höhe und die Hälfte der Breite wieder ab. Und so einfach kann man einen DIV-Container zentrieren.

    Related posts:

    1. Container mit CSS positionieren Es gibt zwei Möglichkeiten, zu positionieren: absolut und relativ. Positioniert...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/36/css-vertikal-zentrieren.htm/feed 0