CSS Blog
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.
Design Inspiration
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
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.
50 dunkle Designs
Wirklich eine wundersch?ne Sammlung von "Dunklen Designs" pr?sentiert vom Smashingmagazine
Ein sehr funktionales Tool um Schriftgr??en mit Pixelangaben in das variable em Format umzurechnen.
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.
Der Artikel ist zwar schon 2 Tage alt aber trotzdem sehenswert. Eine Sammlung von Footers aus verschiedenen Webseiten.
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.
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.
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.
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.
Die artipapers awards 2006 sind vergeben.
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
Jeder Designer braucht f?r neue Webprojekte Hintergr?nde und Texturen. Aber woher nehmen? Das smashingmagazine hat eine "handverlesene" Linkliste zu diesem Thema erstellt.
Zurück