CSS Garden

Tipps und Tricks über Stylesheets

 

    Bei Xovi findet man viele Informationen zum Jahresendseo dieses Jahr.

CSS Blog

18.01.2007

Die deutsche Version des Webdesignprogramms Microsoft Expression Web ist ab sofort im Handel erhältlich.

Der FrontPage-Nachfolger für Webdesigner bietet professionelle Designwerkzeuge zur Gestaltung und Pflege moderner Websites auf Basis aktueller Standards wie CSS 2.1, XHTML und XML. (Laut Microsoft)

Expression Web soll einfach und intuitiv zu bedienen sein und sich sich sowohl für professionelle Webdesigner als auch für semiprofessionelle Anwender und Privatpersonen eignen. Wir sind gespannt.

Microsoft Expression Web


18.01.2007

Design Inspiration


17.01.2007

Untenstehend finden Sie ein Stück CSS-Code welches Ihnen ermöglicht, ein Design mit Hilfe von automatischen Rändern zu zentrieren. Die einzelnen Code-Zeilen sind kommentiert.

/*-------------------------------------
Zentrieren mit automatischen Rändern
/*-------------------------------------*/

body {
text-align: center; /* für IE 5 und 6;
es wird ein Fehler dieses Browsers augenützt.
Aufgrund dieses Fehlers zentriert der Browser
nicht nur Text sondern sämtliche Elemente im body. */
min-width: 760px; /* für Netscape6  ;
wird im Netscape6 die Breite des Browserfensters
verringert und ist sie dann kleiner wie die
Breite des container-Bereichs, kann die linke
Seite des container-Bereichs über den Rand der
Seite hinauslaufen. Dieser Bereich ist dann
ausserhalb des Zugriffs. Dies wird verhindert,
indem dem body-Element eine Mindest-Breite
angegeben wird, die gleich oder ein wenig
breiter wie die Breite des Container-Elements
ist. */
}

#container {
width: 730px;
margin: 0 auto; /* Zentrierung für FF und Co. */
text-align: left; /* für IE 5 und 6
damit nur der Container und nicht auch der
Text zentriert wird*/
}

Originalcode aus CSS-Mastery; Andy Budd, Cameron Moll, Simon Collison


16.01.2007

Das IEBlog meldet ganz stolz, dass bis zum 8. Januar 100 Millionen IE 7 installiert wurden. Noch wichtiger sei, dass über 25% aller Besucher von US-Websites IE 7 benutzt hätten.

Ob man diesen Zahlen glauben kann? Fakt ist, dass der größte Teil dieser Installationen über automatische Windows-Updates zustande gekommen sind.

IEBlog


15.01.2007

50 dunkle Designs

Wirklich eine wunderschöne Sammlung von "Dunklen Designs" präsentiert vom Smashingmagazine


13.01.2007

Ein sehr funktionales Tool um Schriftgrößen mit Pixelangaben in das variable em Format umzurechnen.

em Rechner


12.01.2007

Ein Buchprojekt zum Mitmachen.

Werde Sie Autor. Bis zum 28. Februar können Sie Beiträge liefern. Wird Ihr Beitrag gewählt, finden Sie ihn später im neuen Dr. Web-Buch welches im Mai erscheint.


11.01.2007

Der Artikel ist zwar schon 2 Tage alt aber trotzdem sehenswert. Eine Sammlung von Footers aus verschiedenen Webseiten.

Footerparade


10.01.2007

Schöne Navigationsbeispiele zusammengestellt von Benedikt Rieke-Benninghaus


09.01.2007

Der Mensch denkt in Bilder. Für Sie und für mich habe, ich das Modell der 3 Layer im Webdesign visualisiert. In den letzten paar Tagen habe ich viel über Webstandards gelesen. Unter anderem auch Teile von Jeffrey Zeldmans Buch "Webdesign mit Webstandards". Sehr empfehlenswert! Basis von Webstandards ist die Trennung der 3 Elemente Inhalt (Content), Presentation und Verhalten(Behavior).

Keine Angst, ich schreibe jetzt nicht eine ellenlange Abhandlung über Webstandards, das können andere besser. Aber ich finde es wichtig, sich diese Konzept immer wieder vor Augen zu halten.

Die Grafik erhebt übrigens keinen Anspruch an Vollständigkeit. Es ist mir bewusst, dass es noch andere Skriptsprachen gibt. Wie gesagt, die Visualisierung steht im Vordergrund.


08.01.2007

Wirklich hilfreich ist von mir aus gesehen diese Checkliste.

Bevor Sie Ihre neu gestaltete Webseite ins Netz stellen können Sie diese Liste anwenden und überprüfen, ob sie an alles gedacht haben. Jeder Punkt ist sehr detailliert beschrieben und dazu gibt es jede Menge nützlicher Links.


07.01.2007

Habe wieder einmal eine neue Designvorlage erstellt. Wichtig war mir dabei natürlich im HTML nur strukturierte Elemente zu verwenden und die Trennung von Inhalt und Präsentation. Bitte schaut es kritisch an und meldet mir evtl. Unstimmigkeiten.


06.01.2007

Kennen sie "Vorher Nachher"?

Genau das zeigt dieses PDF-File anhand von 8 Beispielen. Bei 8 Webseiten wurde ein Redesign durchgeführt und anhand von Screenshots und Text wird nun gezeigt, was verbessert wurde und was vorher schlecht war.

Das Ganze wird später einmal in einem Buch erscheinen und 50 Webseiten beinhalten.


05.01.2007

In dieser Icon-Sammlung ist sicher für jeden etwas dabei. Sehr umfangreich!


03.01.2007

Die artipapers awards 2006 sind vergeben.


03.01.2007

Das hr-Element

Definition laut SELFHTML für das hr-element: Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung.

Von jedem Browser wird das hr-Element ein bisschen anders dargestellt, langweilig sehen sie aber in jedem aus. Desshalb nachfolgend ein Beispiel wie das hr-Element mit Hilfe eines eingesetzten Hintergrundbildes und CSS alternativ dargestellt werden kann.

Im Gimp ein Gif (19x57px) erstellt, 1 Ornament gezeichnet und 3 mal kopiert; fertig ist das Hintergrundbild.

Eingesetzt wird es wie folgt:

HTML:
<div class="hr"><hr /></div>

CSS:
div.hr {
height: 15px;
background: #fff url(images/hr_back_1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}

Getestet mit IE6 und Firefox 2.0


02.01.2007

Jeder Designer braucht für neue Webprojekte Hintergründe und Texturen. Aber woher nehmen? Das smashingmagazine hat eine "handverlesene" Linkliste zu diesem Thema erstellt.

www.smashingmagazine.com


 

>Zurück

 

© 1997 - 2014