Kategorie: CSS

Kategorien
CSS HTML5

Arial kostenlos als Webfont einbinden auf einer Webseite

Wenn man gern Arial als Schriftart auf seiner Webseite einbinden will und möchte, dass auch alle Besucher diese Schriftart verwenden sollen, auch die, die es nicht installiert haben, muss man den Font als Webfont einbinden.

Das Problem ist, dass Arial nicht frei verfügbar ist, sondern eine Lizenz dafür erworben werden muss: kostenpflichtiger Download.

Wenn man gern ohne Bezahlung Arial verwenden will, dann kann man einfach die Liberation Sans als Ersatz nehmen, welche fast genauso aussieht und kostenlos ist: Download Liberation Sans.

Diese lässt sich dann als Webfont einbinden:

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}


@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

body{
    font-family: liberation_sans;
}
Kategorien
CSS Webdeveloper Tools

Icons kostenlos herunterladen

Es gibt im Netz hervorragende und kostenlose Icon-Biliotheken, die kommerziell kostenlos genutzt werden können oder teilweise für einen geringen Betrag gekauft werden können.

Mein Favourit: IconMonstr

Sehr gute Alternativen sind:

 

Kategorien
CSS Web Frontend Webdeveloper Tools

Wieso sollte man kein inline CSS/JS verwenden

Es gilt als schlechter Stil inline CSS zu verwenden:

<span style="color: #666666; display: block; float:left; width: 250px;padding-bottom:5px;">

d.h. das CSS eines Elements direkt über das style Attribut zu aktivieren.

Dasselbe gilt auch für Inline Javascript:

<div></div>
<script type="text/javascript">
    alert("hallo");
</script>

Folgende Gründe gibt es dafür:

Weiterlesen „Wieso sollte man kein inline CSS/JS verwenden“
Kategorien
CSS JavaScript Web Frontend Webdeveloper Tools

Debugging Tools für Firefox, IE, Chrome, Safari, Opera

Zum Debuggen von Webseiten braucht man immer spezielle Entwickler Tools für jeden einzelnen Browser, weil sich die Darstellung in jedem Browser ändert oder Javascript Fehler nur in bestimmten Browsern auftreten. Bevor man an die Arbeit geht sollte man unbedingt checken, ab das der Browser Cache deaktiviert ist in dem jeweiligen Browser, sonst erhält man eine nicht aktuelle Version der Webseite.

Debugging Tools beim Firefox 15

Geht über das bekannte und beste Plugin: Firebug

Ich verwende zusätzlich die Plugins: Web Developer und Colorzilla. Durch die sehr guten Plugins ist der Firefox mein Entwicklungsbrowser der Wahl.

Weiterlesen „Debugging Tools für Firefox, IE, Chrome, Safari, Opera“
Kategorien
CSS JavaScript Web Frontend Webdeveloper Tools

Browser Caching deaktivieren in Firefox, IE, Chrome, Safari, Opera

Als Webdeveloper muss man sich mit allen gängigen Browsern rumschlagen und beherrschen, mit allen zu debuggen. Um dies zu tun, braucht man auf jeden Fall 2 Dinge:

Browser Cache deaktivieren beim Firefox

Geht über das Plugin: Web Developer

Einfach nach der Installation: Disable->Disable Cache->Disable Entire Cache

Weiterlesen „Browser Caching deaktivieren in Firefox, IE, Chrome, Safari, Opera“
Kategorien
CSS

3 Spalten Layout mit fixer Breite

<div class='links'></div>
<div class='mitte'>
</div><div class='rechts'></div>
.links {
    background-color: #CCCCCC;
    width: 253px;
    float: left;
}
.mitte
{
    float: left;
    background-color: #8D8D8D;
    width: 253px;

}
.rechts {
    float: right;
    background-color: #CCCCCC;
    width: 253px;
}
Kategorien
CSS jQuery WordPress

Entfernen von leeren HTML paragraph Tags

Der Editor von WordPress generiert leere <p> Tags, die nicht sehr hilfreich sind beim Gestalten.

Eine Lösung via CSS (CSS3 – Kampatibilität :empty):

p:empty
{
    display:none;
}

oder mit besserer Browser Kompatibilität und jQuery:

 <script>
    $("p:empty").hide();
</script>
Kategorien
CSS

Cross Browser kompatibeles CSS mit YAML

Wer eine Chance haben will, dass seine Webseite in allen gängigen Browsern gleich aussieht, der ist gezwungen ein CSS Framework zu benutzen, welches die Unterschieder eine einzelnen Browser ausgleicht, wie z.B: YAML.

Sehr konfortabel ist auch der YAML Builder, mit dem verschiedene Layouts mit 1,2 oder 3 Spalten erstellt werden können.

Einbindung von YAML

  1. Als erstes müssen aus dem yaml source Ordner und die Ordner js und yaml in das Projektverzeichnis kopiert werden.
  2. Dann wird im YAML Builder das Layout zusammengeklickt und Get Code ausgewählt..
  3. Der HTML Code kommt in die index-Datei (oben rechts mit der Maus über das Dokument und dann copy to clipboard ).
  4. Die my_layout.css kommt in das Verzeichnis /css (muss angelegt werden). Das ist wichtig, weil sonst die Pfade nicht stimmen. Folgende Dateistruktur muss am Ende enstehen: