miZine » css

Awesome Fontstacks – generiere zueinander passende Schriftfamilie für Deine Webseite

Viktor Dite — Thu, 21 Oct 2010 08:37:17 +0000

Stelle Dir selbst Deine eigene Schriftfamilie die zusammenpasst für Deine Webseite zusammen. Erhalte dann einen fertigen CSS Code zum Einbinden. Einfacher kannst Du Deine Webseite nicht typografisch aufpeppen.

Folge mir auf Awesome Fontstacks und generiere Dir Deine eigene Schriftfamilie.

IE6 max-width und min-width

Viktor Dite — Wed, 11 Aug 2010 16:00:24 +0000

Die sicherste Methode, die ich bisher angewandt habe ist die Einbindung einer Javascript Expression innerhalb der IE6 fix CSS Datei (Mit Conditional Comments speziell dem IE6 zugewiesene CSS Datei).

# max-width:577px;
.class img{
  width: expression(this.width > 577 ? 577: true);
}

# min-width:577px;
.class div{
  width: expression(this.width < 577 ? 577: true);
}

Safari Only CSS Styles

Viktor Dite — Tue, 13 Jul 2010 09:56:30 +0000

Styles, auf die ausschließlich der Safari (Webkit) hört kann man mit:

@media screen
   and (-webkit-min-device-pixel-ratio:0)
{
	#id1 {margin: xx px;}
	.class1 {margin-bottom: xx px;}
}

definieren.

IE6 Printing CSS

Viktor Dite — Thu, 08 Jul 2010 09:14:07 +0000

@media print {   
   #menu, #logo, #sidebar {display: none; }
}

via Ease the Pain with IE6 Printing – IEBlog – Site Home – MSDN Blogs.

Printlayout mit CSS

Viktor Dite — Tue, 11 May 2010 06:02:18 +0000

“Mittlerweile gehört ist es bei informativen Webseiten und Portalen Usus, separate Ansichten von einzelnen Seiten anzubieten, um auch beim Drucken ein ansprechendes Layout zur Verfügung zu stellen. Solche Druckansichten erhöhen den Service für den Besucher, der sich sonst umständliches Drucken in verschiedenen Ansichten erspart und z.B. Elemente, die gar nicht notwendig sind, mit ausdruckt.” [via]

CSS bietet die Möglichkeit, für verschiedene Medientypen unterschiedliche Layouts festzulegen.

Enthält das allgemeingültige Stylesheet Definitionen, die auf einem Ausdruck störend wären, müssen diese im Druck-Stylesheet „print.css“ explizit überschrieben werden.

Anzeige von Links und deren Inhalten

Nehmen wir an, im Quellcode der Webseite wurde u.a. ein Hyperlink angegeben:

Wenn die Webseite ohne weiteres Zutun ausgedruckt wird, würde nur der Text “Link zu HTMLWorld” angezeigt. Sollte der Leser des Drucks die dazugehörige Internetadresse nicht kennen, macht diese Information nicht viel Sinn.
Eine Abhilfe schafft hier die CSS-Eigenschaft content. Damit kann allgemein vor oder nach bereits bestehenden Inhalten weitere Elemente/weiterer Inhalt eingefügt werden. Ein Beispiel dafür ist das Ziel des Hyperlinks, was dadurch im Ausdruck mit angezeigt wird.
Es ist am sinnvollsten, das Ziel des Hyperlinks direkt nach dem eigentlichen Linktext mit anzuzeigen. Beispiel:
a:link:after { content: " (Link auf <" attr(href) ">) "; }
[via]

CSS browser-size selection mit JavaScript

Viktor Dite — Tue, 09 Feb 2010 12:51:38 +0000

Ich habe nach einer Lösung gesucht, das Design einer Webseite abhängig von der Größe des Browserfensters zu gestalten. Das Design sollte bei kleinen Browserfenstern nicht abgeschnitten aussehen und der Inhalt — meist Bilder — jeweils skaliert werden.

Zur Lösung des Problems gibt es leider keine Conditional Comments, oder CSS Selektoren aber einen einfachen Trick mit JavaScript. Mittels $(window).width() kann man nämlich die Fenstergröße abfragen und daraufhin das CSS passend bspw. mit $("#wrapper").css("width", "820px"); manipulieren.

Also einfach im ein Skript bspw. wie folgt hinzufügen, und fertig:

how to: website static background image

Viktor Dite — Thu, 07 Jan 2010 17:25:43 +0000

Thats just easy, as i found it right now. You have only to tell your browser the background is fixed :)

BODY {
   background-image: url(yours.gif) no-repeat;
   background-attachment: fixed;
}

That’s is

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

Viktor Dite — Tue, 03 Nov 2009 08:09:25 +0000

Zum Tutorial: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

min-height für den IE

Viktor Dite — Wed, 28 Oct 2009 13:18:56 +0000

Wie bekommt man ohne hack die nicht vorhandene min-height CSS- Eigenschaft im IE6?
Ganz einfach:

.minheight-500 {
   min-height: 500px;
   height: auto !important; /* für moderne Browser */
   height:500px;  /*für den IE */
}

Horizontale Listen

Viktor Dite — Tue, 22 Sep 2009 19:31:10 +0000

Um eine horizontale Liste zu erstellen reicht es eigentlich im CSS dem li Object ein display:inline hinzuzufügen.

ul {
   list-style-type:none;
   /* entfernt die Bullets vor jedem Eintrag */
}

ul li {
   display:inline;
   margin: 10px;
}