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!

Werbung blockieren beim Surfen 2013

  Nie mehr Werbung!

Werbung nervt und erhöht die Ladezeiten von Webseiten. Auch wird man von Trackern grosser Web- und Werbefirmen wie Facebook oder Google ständig verfolgt. Damit werden Profile vom Surfverhalten erstellt, die dann für Marketingzwecke oder sonst was verwendet und weiterverkauft werden.
Was kann man gegen Werbung und nervige Werbebanner tun?
Die meisten Onlinemedien oder Webseiten werden ja durch diese Werbung finanziert, darum wird euch praktisch niemand erklären wie man solche Werbung ausblenden kann. Darum lasst mich euch helfen.  Um Werbung auszuschalten gibt es sogennante Werbeblocker, die man als Addons für Browser installieren kann. Ad Block Plus ist da bei weitem der Beste. Gegen Tracker empfehle ich euch das Addon von Ghostery. Es zeigt schön an, welche Programme dich auf welchen Webseiten verfolgen und blockiert diese zum Schutz deiner Privatsphäre.  In diesem Artikel werde ich euch erklären wie man diese Programme installiert. Damit ihr auch im Jahre 2013 vor Werbung geschützt seid!

Werbung blockieren

Hier eine einfache Übersicht wie man Werbung in jedem Browser blockiert. Um Werbung zu blockieren braucht ihr einen sogenannten Adblocker oder Werbeblocker, je nach dem was für einen Browser ihr habt müsst ihr den richtigen auswählen und der Installationsanleitung folgen:

Mozilla Firefox
https://addons.mozilla.org/de/firefox/addon/adblock-plus/

Google Chrome
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb?hl=de

Internet Explorer 9
Für den IE gibt es kein AdBlock, als alternative Entweder bei /Einstellungen/Sicherheit/Tracking Schutz selber eine Liste auswählen und hinzufügen. Oder auf http://www.fanboy.co.nz/ie.html auf ADD TPL klicken. Nur ab IE 9!

Safari
http://safariadblock.com/

Opera
https://addons.opera.com/extensions/download/opera-adblock/
Oder besser aber ein wenig komplizierter über die UrlFilter Liste: http://www.fanboy.co.nz/adblock/opera/

Android
https://play.google.com/store/apps/details?id=org.adblockplus.android

IOS Apple Iphone
Da ich kein Iphone habe keine Ahnung ob es funktioniert:
https://itunes.apple.com/us/app/weblock/id558818638?mt=8
Nicht Gratis!

Tracker blockieren:

Für die meisten Internebenutzer ist es nicht ersichtlich das sie praktisch auf jeder Webseite von Firmen verfolgt werden. Alle Bilder die man Anschaut, alle klicks, alle Seiten und Likes werden registriert und gespeichert. Hier am Beispiel der Neuen Zürcher Zeitung nzz.ch analysiert mit Ghostery:

Wie man sieht wird man von 13 ! verschiedenen Trackingdiensten in verschiedenen Ländern verfolgt. Das ist als ob 13 Firmen oder 13 Augen beobachten was du auf dieser Seite machst. Finde ich persönlich ein wenig beängstigend. Aber es gibt Schutz vor solchen Trackern, hier eine Übersicht für alle Browser:

Mozilla Firefox
https://addons.mozilla.org/de/firefox/addon/ghostery/

Google Chrome
https://chrome.google.com/webstore/detail/ghostery/mlomiejdfkolichcflejclcbmpeaniij

Internet Explorer 9
www.ghostery.com/download-ie

Safari
http://www.ghostery.com/safari/Ghostery.safariextz

Opera
https://addons.opera.com/addons/extensions/details/ghostery/

Android
Nicht erhältlich!

IOS Apple Iphone
http://itunes.apple.com/us/app/ghostery/id472789016





Mit diesen 2 Tools erspart ihr euch viel Werbung und könnt ungestört und frei im Web surfen. Auch habt ihr nun auch einen Überblick über die Firmen die euer Verhalten protokollieren.

Ich habe schon vor bald 2 Jahren hier im Blog über Werbeblocker geschrieben, ein wenig ausführlicher und mit mehr Screenshots:
http://the-tech-blog-blogger.blogspot.ch/2011/03/werbung-blockieren-beim-surfen-im.html

Vielleicht hilft das wen man Probleme beim Einrichten der Blocker hat.

Es gibt auch noch andere Blocker als Ad Block Plus, die genau so gut sein können. Denn so ein Blockprogramm ist nur so gut wie die Filterliste die es hat, ähnlich wie bei Antivirus Programmen, die sind auch nur so gut wie die Virendefinitionen der Programme. Also wenn ihr trotz Werbeblocker noch Werbung sieht müsst ihr vielleicht die Filterliste aktualisieren. Und wenn ihr eine Seite mögt und diese Unterstützen wollt dann macht für diese Seiten eine Ausnahmeregel beim Filter.


Viel spass beim surfen ohne Werbung!

Neues Firefox Addon zeigt graphisch an wer Daten über euch sammelt.

Ein neues Firefox Addon zeigt mittels einer ansprechenden Grafik auf, welche Trackingdienste auf welchen Seiten Informationen über euer Surfverhalten sammeln. Die Darstellung mit durch Linien verbundene Punkte (Spinnennetz), gibt einen schönen Überblick darüber welcher Tracking Service, mit welchen Homepages oder Web Portalen verbunden ist.

Das Collusion Addon.


Das Collusion Addon für Firefox von  bietet die Möglichkeit, die Dienste seitenübergreifend Anzuzeigen die sich nicht um Datenschutz kümmern.
Hier kann man es bei Firefox installieren:
https://secure.toolness.com/xpi/collusion.html

Collusion

Visualize who's tracking you in real time.

Version 0.7

By Atul Varma 

Published on 2011-07-08 13:39:58.227878

Es ist unter OpenSource Lizenz veröffentlicht, das heisst das es wahrscheinlich bald auch für andere Browser erhältlich sein wird.
Wenn ihr es ausprobiert, werdet ihr eine zum Teil erstaunliche Menge an Trackern, die jeden Klick im Internet in Echtzeit überwachen, feststellen. Die Daten werden meistens auf den Servern, und Lokal als Cookie auf eurem Computer gespeichert. Diese wertvollen Informationen werden dann aufbereitet, für Werbezwecke verwendet, oder an andere Verwerter weiterverkauft.

Wie benützt man es?

Es funktioniert ganz einfach. Wenn man dann auf das kleine Symbol unten Rechts klickt, bekommt man eine Übersicht über die verschiedenen Trackingdienste auf den Seiten die ihr besucht.

Wie aus der folgenden Graphik schön ersichtlich ist, kann man sicher sein das auf fast allen Seiten im Internet euer Surfverhalten gespeichert, ausgewertet, verkauft und vermarktet wird. Ich habe mal als Beispiel folgende Seiten geöffnet: tagi.ch, sf.tv und blick.ch

Wie man sieht, wird das Surfverhalten der User, wie hier in diesem Beispiel, bei verschiedenen Seiten alle vom gleichen Trackingdienst geloggt. Seien es nun die Medienkonzerne Tamedia, Ringier oder dem Öffentlichen Schweizer Fernsehen. Es ist schon ein wenig Erschreckend in welchem Umfang die Daten gesammelt werden, auch wenn diese Problematik eigentlich schon lange bekannt war. 

Was uns zum nächsten Kapitel bringt.

Wie kann man sich dagegen wehren?

Es gibt für jeden Browser eine Möglichkeit Tracker zu blockieren. Es gibt zum Beispiel für Chrome unter https://chrome.google.com/webstore/detail/hhnjdplhmcnkiecampfdgfjilccfpfoe einen Trackingblocker. Wie man beim Internet Explorer eine Tracking Protectionlist hinzufügt, habe ich in einem Eintrag im April schon mal erklärt : http://tech-blog-blogger.blogspot.com/2011/04/welche-tracking-protection-list.html

Auch für Firefox gibt es ein Addon das verspricht das Trackingdienste geblockt werden:

https://addons.mozilla.org/de/firefox/addon/trackerblock/

Ebenso gibt es für Opera die Möglichkeit, datensammelnde Dienste mit Blocklisten zu sperren. Wie man das macht, habe ich in einem Beitrag über das blocken von Werbung schon einmal erklärt:

http://tech-blog-blogger.blogspot.com/2011/03/werbung-blockieren-beim-surfen-im_31.html

Wenn man solche Blocklisten oder Addons verwendet, kann man nicht nur privater Browsen sondern auch viel schneller surfen, da man nicht allen anderen Diensten mitteilen muss was man gerade anschaut.

Eine etwas andere Methode Tracker zu stoppen.

Beim Firefox, Chrome oder Internet Explorer Browser kann man auch das integrierte Datenschutzmodul aktivieren:

Wenn man "Webseiten mitteilen das man nicht verfolgt werden möchte." aktiviert, kann man hoffen das einem die Webseiten wirklich nicht verfolgen werden. Es entspringt einer Inititative von http://donottrack.us/. Auf der Webseite gibt es Informationen und Anleitungen wie man Trackingdiensten sagt, das man nicht mehr getrackt werden möchte. Eine Lösung die meiner Meinung nach nicht viel Sinn macht, da sich nie alle daran halten werden. 

Für ganz Paranoide kann ich Peerguardian empfehlen. Wenn man die richtigen Listen hinzufügt, kann man sich die Arbeit mit dem Browser ersparen. Darüber hinaus werden alle Protokolle blockiert, nicht nur das Web.

Ich denke das Visualisierungstool Collusion wird sicher manchen Benutzer im Umgang mit privaten Daten sensibilisieren. 

SMHT9TEQF5EJ