Awesome Fontstacks – generiere zueinander passende Schriftfamilie für Deine Webseite
Kategorie: web-development
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
Kategorie: web-development
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
Kategorie: web-development
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
Kategorie: web-development
@media print {Â Â Â
#menu, #logo, #sidebar {display: none; }
}via Ease the Pain with IE6 Printing – IEBlog – Site Home – MSDN Blogs.
Printlayout mit CSS
Kategorie: web-development
“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.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
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
Kategorie: web-development
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 <head></head> ein Skript bspw. wie folgt hinzufügen, und fertig:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
if($(window).width() < 1024)
{
$("#wrapper").css("width", "820px");
$("div#content").css("width", "600px");
$("div#content img").css("max-width", "575px");
}
elseif ($(window).width() < 800)
{
$("#wrapper").css("width", "520px");
$("div#content").css("width", "300px");
$("div#content img").css("max-width", "275px");
}
});
</script>
</script>how to: website static background image
Kategorie: web-development
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
min-height für den IE
Kategorie: web-development
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
Kategorie: web-development
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;
}
