PixelscheucherWas sonst keinen Platz findet oder ich vergaß eine Kategorie zu wählen.
3Huch, habe gerade durch Jens Meiert festgestellt, dass mein Weblog schon 3 Jahre auf dem Buckel hat. Am 20.12.2004 erblickte dieses Weblog das Licht der Welt, damals noch unter alter Domain und mit WordPress.
Bis heute hat es sich gehalten und hält derzeit 477 Artikel und 532 Kommentare bereit. (Info laut htn_comment_count)
Ich danke allen Lesern für’s Mitmachen, Lesen und Weiterempfehlen :) Auf weitere n Jahre mit euch!
76
Der vollständigkeithalber hier noch die Auswertung vom CSS-Quiz:
Named so far:
azimuth, background, background-attachment, background-color, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-style, border-top, border-top-color, border-top-style, border-top-width, bottom, clear, clip, color, content, display, float, font, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, outline, outline-color, outline-style, outline-width, overflow, padding, padding-bottom, padding-right, padding-top, position, quotes, right, table-layout, text-align, text-decoration, text-indent, top, vertical-align, visibility, volume, width, z-index,
You forgot:
background-image, border-color, border-spacing, border-right-width, border-width, caption-side, counter-increment, counter-reset, cue, cue-after, cue-before, cursor, direction, elevation, empty-cells, font-family, letter-spacing, marker-offset, marks, orphans, padding-left, page, page-break-after, page-break-before, page-break-inside, pause, pause-after, pause-before, pitch, pitch-range, play-during, richness, size, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, text-shadow, text-transform, unicode-bidi, voice-family, white-space, widows, word-spacing,
Der Über-Feed spinnt. del.icio.us-Einträge kommen mit Artikel-Texten, vieles kommt doppelt und dreifach. Ich bitte um Entschuldigung und guck mal, was sich da machen lässt.
Hat den überhaupt jemand abonniert?
So, in den nächsten Tagen wirds dann (hoffentlich) mal ein neues Layout geben. Grün bleibt ;), tritt aber einen Schritt zurück. Die Sidebar wird reanimiert und die Seitenbreite wächst auch insgesamt, da gerade Mal 0,2 % eine Auflösung von 800×600 benutzen. Natürlich ist Auflösung != Viewport, aber ich werd auch nicht die kompletten 960 Pixel ausnutzen, die dabei zur Verfügung stehen sollen.
Das Ganze wird wahrscheinlich auf einem Raster (is ja “in” ;)) aufbauen, welches in der derzeitigen Planungsphase aber auch noch kein Optimum darstellt. Manche Rasterlayouts sehen mir auch widerrum zu clean aus, das wollte ich dann schon vermeiden ;)
Wenn’s losgeht, ruf ich!
Hinweis: Ich merk gerade, die letzte Spalte im Beispiel ist nicht so breit wie die anderen. Da muss ich nochmal nachbessern, sorry.
Gestaltungsraster (Grids) im Web sind zur Zeit ein beliebtes Thema. So gibt es hierzu schon eigene Galerien und Tools, um sein eigenes Grid-Layout zu berechnen.
Der Nachteil des Grid-Calculators ist, dass man keine Maximalbreite eingeben kann. Möchte man also eine Seitenbreite von 770px in 12 gleichgroße Teile plus Zwischenräume (Gutter), hilft das Tool auch nicht viel.
Dabei gehts recht einfach, auch wenn man hierfür das table-Element auskramen muss. (Nein, das table-Element ist natürlich nicht verboten.) Außerdem brauchts noch die Firebug-Extension oder ein Bookmarklet, welches die Breite der td-Elemente ausliest.
Wir erstellen ein neues XHTML-Dokument, ich habe hierfür auf XHTML 1.0 Strict zurückgegriffen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html>
<head>
<title>Grid</title>
<style type="text/css" media="screen">
table, tr, td { margin: 0; padding: 0; }
table { background: #88FF88; }
tr { background-color: #BBFFBB; }
</style>
</head>
Den Tabellen, Tabellenreihen und -spalten habe ich zuallererst ihren Außenabstand (margin) und ihren Innenabstand (padding) genommen. Um die Tabellenspalten optisch von den Tabellenreihen abzugrenzen, habe ich beiden verschiedene Hintergrundfarben zugewiesen.
Im body habe ich dann eine 770 Pixel breite Tabelle mit 12 Spalten eingefügt. Zwischen den Spalten soll es einen Abstand von 12 Pixeln geben, dies bewerkstellige ich mit cellpadding="12"
<body>
<table cellpadding="0" cellspacing="12" width="770" height="250">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Wenn wir uns das Beispiel angucken, schmeißen wir im nächsten Schritt Firebug an, wählen HTML → Inspect und wählen eine der Tabellenzellen aus:
Wie wir sehen, können wir die 770 Pixel in 12× 47 Pixel große Häppchen plus Gutter aufteilen.
Kleines Schmankerl: Machen wir einen Screenshot von der Tabelle und fügen wir diesen beispielsweise in Photoshop ein, können wir die Tabelle länger ziehen (Transformieren), den Screenshot als Bild speichern (vorher natürlich alles um die Tabelle herum wegschneiden) und als Hintergrundbild in die Internetseite einfügen, der wir ein Grid verpassen möchten. So können wir jederzeit beim Bearbeiten des XHTML– und CSS-Codes auf das Grid zurückgreifen.
Die Hintergrundfarben können natürlich geändert werden, hierbei sollte allerdings ein ausreichender Kontrast zwischen tr und td bestehen bleiben. Außerdem kann man die Spaltenbreiten auch nochmal mit ihren Maßen beschriften, alles ist Möglich.
Wie man sieht, kann man mit XHTML-eigenen Techniken (plus Bildbearbeitung, wenn man daraus ein Hintergrundbild machen möchte) schnell mal eben ein Grid berechnen. Und wer möchte, kann daraus ja vielleicht ein PHP– oder RoR(Ruby on Rails)-Script schreiben.
Dank Jowras RSS-Combiner kann ich euch nun den Weblog-Feed plus del.icio.us und flickr anbieten.
Ihr könnt wählen zwischen Atom oder RSS.
Gabs zwar schon über xfruits (und mit dem Kommentaren dabei), eine lokale Lösung scheint mir aber schöner.
(Wenn ihr jetzt gar keinen Plan habt, was Feeds sind klär ich euch da gerne auf.)
In 2 Tagen gabs jetzt 4x Spam. Muss ich mir Sorgen machen? Passiert doch sonst nicht so :D
1 : [6e1ddc2dfecd0fd1]
2 : [7426ea1d3e528971]
3 : [0954ccf7cb0bfa02]
4 : [41e1325df95ee13f]
Herr Nerdcore bringt einen aber auch auf Sachen.