PixelscheucherLeider leider leider hab ich es nicht geschafft, ein neues Layout für den cssNeustart einzureichen. Nächstes Mal vielleicht oder auch zwischendurch. Sorry für nicht erfüllte Erwartungen.
Dafür könnt ihr jetzt schreiben, was euch hier nicht gefällt. Auch die Feedleser bitte :)
Blogscout macht dicht und ich war gerade mal n Monat oder so dabei. :’( Und nun?
Kann es sein, dass die neuen Vista-Fonts recht klein ausfallen? (Neu, jetzt mit Screenshots):
Arial, 13px:
Corbel, 13px:
Georgia, 13px;
Constantia, 13px:
Wenn ihr die Schriften nicht installiert haben solltet, kann ich euch auch gerne einen Screenshot anfertigen. (Hatte ich eh noch vor, aber gerade keinen Nerv dafür.) Oder ihr ladet euch den PowerPoint Viewer 2007 von Microsoft herunter, dann landen die Schriften auf eurem Windows-Rechner.
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.
Am 17. September findet beim Handelsblatt in Düsseldorf ein Webmontag statt. Diesmal gibts bei mir vorerst keine Komplikationen mit dem Datum, evtl. lauf ich also auf und lausche den Beiträgen.
Die Teilnehmerliste ist auf jeden Fall schon gut lang.
Webmontag wer?
Der Web Montag ist ein dezentral organisiertes, informelles Treffen zum Thema Web 2.0 (im weitesten Sinne), das Anwender, Entwickler, Gründer, Unternehmer, Forscher, Web-Pioniere, Blogger, Podcaster, Designer und sonstige Interessenten zusammenbringen möchte. Ziel des Web Montag ist zum einen eine bessere Vernetzung der Web 2.0-Szene in Deutschland sowie zum anderen eine Vertiefung des transatlantischen Ideenaustauschs (insbesondere zwischen Deutschland und Silicon Valley). Webmontag
Webmontag-Düsseldorf-Grafik von Tim Bruysten
Okay, Software-Schreiber entwickelt ein Programm, mit dem man 2 Millionen Weblogs gleichzeitig mit Werbung füllen kann. Und von diesen 2 Millionen Weblogs hat er sogar Einverständniserklärungen. Aber woher hat er meine? Denn ich bin auch in der Liste:
Interessanterweise sieht man auf dem Screenshot auch, dass mein flickr-Account dabei ist. Das Programm liest also nur Google oder sonst was aus und zeigt die Ergebnisse. So in der Art, ich weiß es leider nicht.
Wie gesagt, die Einverständniserklärung würd’ ich ja gerne mal sehen.
Die gesamte Geschichte gibts bei Mario Sixtus.
In letzter Zeit ist es recht beliebt geworden, Code-Beispiele in HTML-Listen zu packen, beispielsweise so:
<ul>
<li><code><style type="text/css"></code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code></style></code></li>
</ul>
(Live-Beispiel unsortierte Liste)
Schön und gut, mag semantisch auch irgendwie sinnvoll sein, gerade wenn man im Artikel Bezug auf die Zeilennummer (bei ol-Listen) nimmt. Leider macht da Firefox ein Problem, wenn man den Code kopiert und anschließend im Editor einfügt:
* <style type="text/css">
* @media screen,projection {
* /**/
* }
* </style>
Sternchen am Anfang, bei ol-Listen die Listen-Nummerierung:
ol<ol>
<li><code><style type="text/css"></code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code></style></code></li>
</ol>
(Live-Beispiel sortierte Liste)
Wird zu:
1. <style type="text/css">
2. @media screen,projection {
3. /**/
4. }
5. </style>
Copy & Paste ist somit nicht mehr ohne weiteres möglich, da immer eine Nachbearbeitung des Codes erfolgen muss. Daran erinnert, dass dem so ist, hat mich der Artikel Quellcode mit HTML formatieren. Vielen Dank dafür ;)
Wenn man testen möchte, wie die Adsense-Anzeigen im neuen Layout aussehen, sollte man diesen Code in den Adsense-Code einbauen:
google_adtest='on';
Damit verhindert man, dass eigene Seitenaufrufe/Impressionen gezählt werden und man evtl. Ärger von Google bekommt ;)
Das Thema ist vielleicht ein alter Hut, der Vollständigkeit halber wollte ich es dennoch hier stehen haben.
Quellen: Adsense Forum & Adsense Blog