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