Div auf Webseite horizontal & vertikal zentrieren

Jan 20
2018
/* CSS Code */
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
/*
======================
      Thats it!
======================
*/

Icon vor HTML Tag vertikal mittig ausrichten positionieren

Jan 20
2018
.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%; // Hier liegt der Hase im Pfeffer begraben
}

Anker bei Fixed Navbar treffen nicht

Sep 27
2017

If you’re using a .navbar-fixed-top fixed to top navbar in Twitter Bootstrap you probably have noticed your anchor ahref links no longer line up correctly.

The easiset way to fix this is to the use the <section id="MyAnchor"> tag with a padding-top equal to the padding you’ve added to the body.

So for example if you have:

.body {
padding-top:40px
}

You will then want to add the same padding to your section CSS:

section {
padding-top:40px;
}

If the 40px gap above each section is going to mess with your design mojo you can add a negative margin-bottom. So for example:

section {
padding-top:40px;
margin-top:-40px;
}

 

Quellenangabe: https://www.servermule.com.au/help/bootstrap-anchors-fixed-nav/

CSS LoVe HAte

Sep 09
2017

The selectors she is referencing is for anchor elements:

a:link
a:visited
a:hover
a:active

HTML Buttons nehmen CSS Styling bei Apple Geräte nicht an

Jan 27
2016

input, textarea, select { -webkit-appearance: none; border-radius: 0; -webkit-border-radius:0; }
* { -webkit-tap-highlight-color:transparent; }

Springendes Layout mit Scrollbars unterdrücken

Jul 01
2012

Dieses Phänomen kennen wahrscheinlich viele: Eine Webseite füllt nicht den ganzen Bildschirm aus. Navigiert man zu einer Unterseite, die länger ist, springt das Layout kurz, da die Gesamtbreite durch die Scrollbar geschmälert wird.
Dies kann man verhindern, indem man folgendes CSS hinzufügt.

body {
overflow:scroll;
}

Der Nachteil besteht darin, dass nun auf jeder Seite Scrollbars angezeigt werden. Diese sind zwar ausgegraut und nicht direkt zu erkennen, dennoch hat man auch eine horizontale Scrollbar.
Dies kann man unterdrücken, indem man folgenden Code verwendet:

body {
overflow-y:scroll;
}

Zu beachten gilt, dass overflow-y der Firefox ab der Version 1.5 korrekt unterstützt. Opera und Netscape kommen damit gar nicht klar. Der Internet Explorer hat mit der Eigenschaft erstaunlicherweise keine Probleme.

Smartphones oder Tablets Schriftgrößenproblem CSS

Jun 14
2012

Einfach diesen Schnipsel in das CSS Stylesheet einfügen und schon passen die Schriften wieder

@media screen and (max-device-width: 480px) {
body{-webkit-text-size-adjust: none }
}

Wertigkeiten verändern mit der !important-Regel

Dez 27
2009

Das Schlüsselwort ! important verändert die natürliche Wertigkeit der Style-Angabe.

Dabei spielt es keine Rolle, ob zwischen important und dem Ausrufezeichen ein Leerzeichen ist. Die Regel wird von allen Browsern unterstützt.

Die Wirkweise der !important-Regel ist das „überbieten“ der CSS-Prioritäten. Mit ! important setzen Sie die höchste Priorität.

CSS Code-Beispiel

#content ul li {
color : red;
}
ul li {
color : blue !important;
}

In diesem Beispiel hat die Anweisung #content ul li die höchste Priorität. Listenpunkte würden damit rot dargestellt. Ohne das !important in der zweiten Anweisung hätte die blaue Farbangabe keinen Effekt auf die Listeneinträge, die innerhalb der ID #content sind. Durch das !important geben Sie der zweite Anweisung allerdings ein hohe Wertigkeit, Listenpunkte werden damit blau dargestellt.

Wertigkeiten von CSS-Style-Definitionen

Eine grobe Einteilung der Wertigkeiten des CSS sieht so aus: 

  1. style=“…“ (Angabe innerhalb des HTML)
  2. #eine_id div.eine_klasse
  3. #eine_id div
  4. #eine_id
  5. div .eine_klasse
  6. div.eine_klasse
  7. div

Bewertung

Die !important-Regel ist Teil des CSS-Standards und damit völlig legitim, einzusetzen. Allerdings muss man sich dem Einsatz klar vor Augen halten – es ist CSS-Design mit dem Holzhammer. Eine CSS-Angabe einmal mit einem ! important versehen, werden Sie von einer anderen Stelle aus, mit einer gut geschriebenen Cascade nicht mehr ansprechen können.

Bei großen Projekten oder für die schnelle Lösung kommen Sie manchmal nicht ohne ein ! important aus. Eleganter ist es aber immer, eine neue Klasse einzuführen, oder eine saubere Cascade zu schreiben.

Firefox Browserweiche über die Pseudoklasse :root

Nov 13
2009

Die Pseudoklasse :root ist kein echter Hack, sondern Teil des CSS3-Standards. Wird von Firefox, Safari und Konquerer unterstützt – man schließt damit also Internet Explorer und Opera aus.

CSS Code Beispiel


div {
color : red;
}
:root div {
color : blue;
}

Das Quelltextbeispiel würde den Text für Firefox, Mozilla, Safari und Konquerer blau einfärben – alle anderen Browser würden einen roten Text ausgeben.

Bewertung

Die Steuerung über die Pseudoklasse :root ist sicher und damit ein geeignetes Mittel, um Firefox und Co zu steuern. Allerdings ist ein CSS mit dieser Anweisung noch nicht Teil des CSS 2.1 Standards – eine Validierung über den W3C-CSS-Validator meldet von daher Fehler.

Optimization WordPress Plugins & Solutions by W3 EDGE