CSS

Links über gesamte Box ohne JavaScript spannen

Gesamtes Element klickbar machen

Links über gesamte Box ohne JavaScript spannen

Viele Seiten im Netz verwenden oft für Teaser den gleichen Link mehrmals nur damit Bild, Überschrift und der "Weiterlesen"-Text verlinkt sind. Gerade für SEO-Optimierungen sollte versucht werden auf doppelte Verlinkungen zu verzichten. Auch JavaScript wird oft eingesetzt um…

Bild verdrängt Text

Flexibles CSS-Layout

Bild verdrängt Text

Flexible CSS-Layouts haben oft keine feste Breite. So verdrängt ein floatendes Bild den Text und dieser läuft mit overflow: hidden; und display: inline-block; (für den Internet Explorer 6) nicht unter das Bild. Der Textcontainer passt sich der zur Verfügung stehenden Breite…

CSS Textmarkierung

Textmarkierungsfarbe anpassen

<style type="text/css"> ::-moz-selection { background: #f0f; color: #fff; } ::selection { background: #f0f; color: #fff; } </style> Beispiel markier mich Textmarkierung deaktivieren Dies eignet sich auch um Textmarkierungen zu…

box-sizing

Flexible Layouts mit box-sizing

Das bessere Box-Model

Wer kennt es nicht? Form Elemente sollen eine Weite von 100% bekommen und padding + border spielen einfach nicht mit. Die Lösung für dieses Problem sind wrapper-Strukturen für den korrekten Cross-Browser-Support. Bei modernen Browsern geht es auch anders: box-sizing <style…

CSS Textmarkierung

Textmarkierung deaktivieren

Elementen die nicht markiert werden sollen <style type="text/css"> .deselect ::selection { background: transparent; color: inherit; } .deselect ::-moz-selection { background: transparent; color: inherit; } .deselect { -ms-user-select:…

CSS3 Table nth-child

CSS3 Table nth-child

Tabellen-Design mit CSS3

<style type="text/css"> tr td {background: #fff;} tr:nth-child(odd) td {background: #eee;} /* :nth-child(even / odd / 2n+1) */ </style> Beispiel Value1Value2 1v1 2v2 3v3 4v4 5v5

Link Pseudoklassen

Link Pseudoklassen

<style type="text/css"> a:link {color: red;} a:visited {color: green;} a:hover {color: yellow;} a:active {color: orange;} a:focus {color: blue;} <style> Beispiele :link :visited :hover :active :focus :link…

CSS Transition

CSS Transition

Animationseffekte mit CSS3

CSS3 Transition Animationseffekte CSS Transition .examplebox {background: #0f0;} .examplebox:hover { padding: 20px; border-radius: 30px; background: #f0f; font-size: 30px; color: #fff; -moz-transition: all 1.5s ease; -webkit-transition: all 1.5s ease;…

Blaue Outline

Blaue Umrandung von Input Elementen entfernen

Jeder Browser bringt sein eigenes Grundlayout mit sich – doch was tun wenn der Layouter zweimal klingelt?

Die blaue Outline bei input[type="text"] und textarea im Safari sowie Firefox und im Opera zusätzlich bei Buttons, Checkboxen und Radiobuttons sieht zwar schön aus – ist aber bei manchen CSS Layouts nicht gut durchdacht. So wird die Umrandung beim focus in Verbindung mit…

clearfix

.clearfix

Die CSS-Klasse clearfix hebt den float innerer Elemente auf

Floatende Elemente werden aus dem Textfluss genommen. Das umgebene Element berechnet die Höhe des Inhalts nicht mehr. Dies erkennt man daran, dass die Border oder der Hintergrund des Containers das floatende Element nicht mehr umschließt. Um Floats zu clearen eignet sich…

Impressum