HTML5 div horizontal und vertikal zentrieren

Hier ein kleiner Lehrgang wie man den Inhalt einer Seite immer zentriert in der Mitte darstellen kann, egal welche Bildschirmauflösung jemand gerade verwendet. Dabei werde ich euch eine Methode vorstellen die nur auf CSS basiert, und eine die mit Javascript und jQuery funktioniert. Mit diesem Code könnt ihr Divs garantiert immer zentriert in der Mitte darstellen lassen, egal ob der User nun Internet Explorer, Chrome, Firefox, Safari, Opera oder Mobile Browser auf Handys oder Tablets verwendet.

1. Div Horizontal in der Mitte nur mit CSS ausrichten

In diesem ersten Beispiel wird nur ein div horizontal in der Mitte dargestellt. Zur besseren Ansicht habe ich den Hintergrund rot gemacht. Wichtig ist hier das margin auto, es sorgt dafür, dass das div in der Mitte bleibt.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html>  
 <head>  
 <title>Div Horizontal zentriert Demo</title>  
 <style type="text/css">  
 .DivHorizontal{  
   width:180px;  
   height:100px;  
   margin:0 auto;  
   background-color:red;  
 }  
 </style>  
 </head>  
 <body>  
 <div class="DivHorizontal">  
   <p>Horizontal zentriert mit CSS</p>  
 </div>  
 </body>  
 </html>  

2. Div Horizontal und Vertikal in der Mitte zentrieren mit CSS

Im zweiten Beispiel wird ein Div genau in der Mitte des Browserfensters dargestellt, egal wie gross es ist. Wichtig hier ist das top und left 50%, damit wird die obere linke Ecke genau in der Mitte platziert und mit margin -50px und -90px wird dann genau die Hälfte der Breite und Höhe abgezogen so das es genau in der Mitte ist.

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html>  
 <head>  
 <title>Div Horizontal und Vertikal zentriert Demo</title>  
 <style type="text/css">  
 .DivHorizontalVertikal{  
      width:180px;  
      height:100px;  
      position:absolute;  
      left:50%;  
      top:50%;  
      margin:-50px 0 0 -90px;  
      background-color:red;   
 }  
 </style>  
  </head>   
  <body>   
  <div class="DivHorizontalVertikal">   
   <p>Horizontal und Vertikal zentriert mit CSS</p>   
  </div>   
  </body>   
  </html>   

3. Div mit HTML5 jQuery Horizontal und Vertikal in der Mitte zentrieren

Im letzten Beispiel wird ein Div mittels jQuery horizontal und vertikal in der Mitte angeordnet.
Dabei wird das div beim ersten Mal laden mit document ready und beim verkleinern oder vergrössern des Fensters neu platziert. Die Logik ist eigentlich die selbe wie bei den CSS Beispielen einfach mit Javascript.

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html>  
 <head>  
 <title>Div mit HTML5 jQuery Horizontal und Vertikal in der Mitte zentrieren</title>  
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>  
 <style type="text/css">  
 .DivMitte {  
      background-color:red;  
      width:180px;   
   height:100px;   
 }  
 </style>  
 <script type="text/javascript">  
 jQuery.fn.centerElement = function() {  
      return this.each(function(){  
           jQuery(this).css({'position':'fixed','left': ((jQuery(window).width() - jQuery(this).outerWidth()) / 2) + jQuery(window).scrollLeft() + "px",'top':(($(window).height() - jQuery(this).outerHeight()) / 2) + jQuery(window).scrollTop() + "px"}).trigger('resize');                 
      });            
 };  
 </script>  
 </head>  
 <body>  
 <div class="DivMitte">  
      <p>Div in der Mitte platziert mit jQuery</p>  
 </div>  
 <script type="text/javascript">  
 jQuery(document).ready(function(){  
           jQuery(".DivMitte").centerElement();  
      });  
 $(window).resize(function () {  
                jQuery(".DivMitte").centerElement();  
      });  
 </script>  
 </body>  
 </html>  

Ich hoffe dieses Tutorial hat euch gefallen und war nützlich für euch.

Viel spass beim ausprobieren!

PrimeSense, die Entwickler von Microsoft Kinect bringen die 3D-Technologie auf mobile Greräte

PrimeSense, die Firma die hinter der innovativen 3D Technologie von Microsoft Kinect steckt, hat demonstriert, dass sie die Hardware so weit verkleinern konnten, dass sie nun auch auf Mobile Geräte wie Handys oder Tablets passt.
Diese Verkleinerung öffnet den Weg für eine Fülle von neuen Anwendungen, die bis jetzt nicht Möglich erschienen.

Die Firma PrimeSense wurde 2005 von Aviad Maizels, Alexander Shpunt, Ophir Sharon, Tamir Berliner und Dima Rais in Israel gegründet. PrimeSense erhielt für ihre spannenden Innovation im Bereich der Sensortechnik schon viele Auszeichnungen, unter anderem vom MIT Technology Review Magazin und von Welt Wirtschaft Forum WEF in Davos.

Der neue 3D-Sensor mit Namen Capri wurde an der Technologiemesse CES 2013 in Las Vegas erstmals vorgestellt. Er ist etwa 10 mal kleiner als der Vorgänger und soll auch extrem Stromsparend sein. Damit soll es auch für Laptops und andere kleine Gadgets möglich sein Dreidimensionale Objekte und ihre Bewegungen zu erfassen. Damit gibt es für App- und Spielentwickler eine Fülle von neuen Möglichkeiten, wie sie Steuerungen für diese Sensoren entwickeln können.

Was auch sehr interessant ist, ist das Marketingvideo dieser Innovation. In diesem Video werden Anwendungen beschrieben die wahrscheinlich in wenigen Jahren schon Alltag sind. Wie etwa mit Gesten Computer zu steuern, oder das Computer durch scannen Menschen erkennen und spezifisch darauf reagieren können.

Bin schon sehr gespannt wann das erste Mobile Gerät mit Cabri 3D Senoren auf den Markt kommt.
Und wann Autos, Haustüren oder andere Geräte mit diesen Sensoren ausgerüstet werden.

http://www.primesense.com

Die 7 Besten Seiten mit Gratis Büchern (eBooks)

Bücher lesen auf Mobilen Geräten wie Android Handys, Iphones, Tablets, Netbooks oder dem Kindle von Amazon erfreut sich immer grösserer Beliebtheit. Ich werde euch darum die besten Webseiten mit Gratis Lesefutter vorstellen, das man elektronisch Geniessen kann.

Bücherquelle Nr. 1
Projekt Gutenberg DE
Project Gutenberg
http://gutenberg.spiegel.de/
http://www.gutenberg.org/

Verfügt über 36,000 Gratis Bücher (English) zum Download, oder über 5500 Romane, Erzählungen, Novellen, Dramen, Gedichte und Sachbücher in deutscher Sprache von über 1200 Autoren – klassische Literatur aus zweieinhalb Jahrtausenden. Bringe diesen Schatz auf deinen PC, Kindle, Android, IOS oder anderes Mobiles Gerät. Wähle zwischen ePub, Kindle, HTML und simple text Formaten.




Bücherquelle Nr. 2
Google Bookstore
http://books.google.com/ebooks?hl=de&as_coll=1040

Der Google Bücher Shop hat Millionen von Büchern, einige davon sind Gratis.






Bücherquelle Nr. 3
Freebook DE
http://freebook.de/

Fast 1400 ebooks auf Deutsch warten darauf gelesen zu werden.




Bücherquelle Nr. 4
Internet Archive
http://www.archive.org/

Das Internet Archive ist eine gute Quelle für Bücher, Audio Webseiten oder auch Videos.



Bücherquelle Nr. 5
Open Library
http://openlibrary.org/

Über 1 000 000 Gratis Bücher.




Bücherquelle Nr. 6
Many Books
http://www.manybooks.net/

Many Books bietet tausende Bücher Gratis Online an. Lade die Bücher Gratis auf dein Mobiles Gerät, PC oder Kindle.




(Hör)Bücherquelle Nr. 7
Librivox
http://librivox.org/

LibriVox bietet freie Hörbücher an. Man kann sie als ogg oder mp3 anhören. Die Seite sucht noch Vorleser, bitte unterstützt dieses Projekt.

Wie man sieht gibt es zahlreiche Seiten im Internet die Ebooks anbieten. Es sind zwar meistens Englische Bücher, und vor allem Klassiker, aber die Anzahl an neueren Büchern und Büchern auf Deutsch nimmt stetig zu. Und das sicher schneller als die Meisten von euch überhaupt lesen können.

Viel Spass!