Archives

Internes / Webdevelopement — Kommentare deaktiviert für Bildunterschrift mit Hilfe einer Definitionsliste
04
Jul 06

Bildunterschrift mit Hilfe einer Definitionsliste

Ich weiß gar nicht mehr genau, wofür ich es gesucht habe - warum, wieso... auf jeden Fall habe ich vor kurzem nach einer Möglichkeit gesucht, Bilder zu beschriften. Gefunden habe ich den sehr guten Artikel "Die vergessene Bildunterschrift" bei Mediaevent. Dort wird eine Lösung mittels einer Definitionsliste vorgeschlagen.
<dl>
  <dt><!-- zu definierender Begriff --></dt>
  <dd><!-- Definition --></dd>
</dl>Diese wird dann mit CSS beliebig formatiert. Und fertig. Ich bin wirklich begeistert, da das dämliche Klassengedöns für Bilder damit wegfällt, ebenso die umständliche CSS-Formatiererei. Ich werde wohl noch eine recht- und eine links-Klasse erstellen, für kleiner Bilder, die vom Text links- oder rechtsbündig umflossen werden sollen. Sehr praktisch. ^.^

Ähm... nur um es zu erwähnen. Weil ich beide Artikel fand und überflog. Auch das Markup-Journal schrieb über diese Lösungsmöglichkeit.

Übrigens: Falls man immer die gleiche Bildgröße verwendet (was vor allem bei umflossenen Bildern sinnvoll sein kann, weil die Float-Eigenschaft bei CSS immer eine Breitenangabe benötigt) ist es auch sehr einfach mit Hilfe der Definitionsliste das Bild mit einem Hintergrundbild (z.B. einer Schattengraphik) zu verschönern ;)). Bei Gelegenheit gehe ich darauf vielleicht mal näher ein. Ansonsten denke ich, dass es etliche Tutorials dazu bereits in den Weiten des Webs gibt.

Netzgeschaedigt / Webdevelopement — Kommentare deaktiviert für Levels of HTML-Knowledge
17
Jun 06

Levels of HTML-Knowledge

Tja, hmm... Ich denke mal .. ich bin irgendwo in between 4 & 5. Das mit der DIV-Mania habe ich noch nicht ganz hinter mir, Datentabellen mit Div's und Spans würde ich allerdings nie bauen ^-^''. Kurz vor fünf?? Wahrscheinlich eher nicht... ^-^'' aber vielleicht werd ich's ja, wenn ich länger in meinem Job gearbeitet habe ^-^''. Interessante Sache der Artikel Levels of HTML-Knowledge. Und ich bin ein bißchen stolz darauf, es über Wysiwyg hinaus geschafft zu haben ^-^'' Ich sage nur MsPublisher *rotwerd* - meine wohl größte Sünde ^-^''... Naja.. aber zu lernen habe ich noch viel, vor allem, was Feinheiten angeht. Und mehr Routine kann ja auch nicht schaden. ^.^

Nachtrag Tja hmm, da gibt's ja auch noch Levels of CSS-Knowledge. Würde mich auch da zwischen vier und fünf einordnen ^-^''... auch gegen fünf *lol*. Denn auch im CSS-Bereich habe ich noch viel zu lernen. Finde diese beiden Artikel allerdings auf jeden Fall sehr interessant.

Netzgeschaedigt — Kommentare deaktiviert für Websites as Graphs
13
Jun 06

Websites as Graphs

Graphisch aufbereitet wird die HTML-Struktur einer Seite, dabei herauskommen eine interessantes Geflecht. Und das ist meins:

Weblog.netzgeschaedigt graphisch aufbereitet

Interessant und auch beruhigend ist der Prozess, in dem das Bild entsteht. Wabernde Punkte, Verbindungen... ganz so wie bei dieser anderen Seite *grübel*... wie hieß die doch gleich - irgendetwas mit Zoo??? Wie auch immer. Ich schweife ab. Wer interessiert ist an einer graphischen Aufbereitung des Quelltextes, kann dies bei aharef.info tun.

---

Es hat mir keine Ruhe gelassen... das Ding, was ich meinte heißt Sodaconstrutor ^-^''. Und damit kann man kleine lustige Roboter-Spinnen basteln. Bereits von anderen Menschen kreierte Wesen kann man sich dann im SodaZoo ansehen ^.~. Für all jene - wie z.B. mich - die nicht mit ganz so viel Geduld beseelt sind ^-^''.

Webdevelopement — Kommentare deaktiviert für diverses zum Thema Webdevelopement
16
Apr 06

diverses zum Thema Webdevelopement

Viel zu lesen. Zum Beispiel ein Artikel des SELFHTML-Weblogs der sich mit dem Thema Layout beschäftigt: Tabellen, Spalten und Weblogs vs. Hypertext. Passend dazu das Floatutorial von maxdesign. tjkdesign beschreiben in ihrem Artikel, wie man aus einer klaren XHTML-Struktur viele unterschiedliche Layouts erstellen kann - nur mit der Power von CSS. Und wenn ich schon dabei bin ^-^''. Um so etwas zu bewerkstelligen braucht man Positionierung, also schnell zum Tutorial Learn CSS Positioning in Ten Steps und Einschließen von Floats ohne zusätzliches Markup.

Dann lohnt es sich definitiv bei Webdesign from Scratch vorbeizuschauen, gleich zwei interessante Artikel sind mir damals ins Auge gefallen. Zum einen Information Architecture Models, zum anderen ein Artikel über die Basics des Webdesigns. Etwas mehr Theorie, dennoch interessant: Five simple steps to typesetting on the web: printing the web, ein Thema, über das man normalerweise nicht so nachdenkt ^-^'' - ich zumindest nicht. Wobei ich bei meiner Tutorialseite damals eine Druckansicht hinzugefügt habe.

Zwei Seiten habe ich dann noch, die sich mit dem Thema Formulare beschäftigen, zum einen eine Anleitung eine Suchbox so aussehen zu lassen, als sei es eine Safari Suchbox. Sieht schick aus und werde ich bestimmt irgendwann einmal ausprobieren ^-^''. Und der zweite Artikel: Using CSS to Create a Two-Column Layout.

Zuletzt noch ein paar Seiten, die sich mit den CSS-Codes auseinandersetzten. Perun verlinkt auf zwei Seiten, welche sich mit der Übersichtlichkeit des Codes beschäftigen. Bei Webstandart geht es um CSS shorthand properties, also wie man manche CSS-attribute bündeln kann.

spielwiese * templates & mehr — No Comments
23
Jan 06

Bilder mit CSS formatieren

Bilder automatisch zentrieren lassen? Bis vor kurzem habe ich mir nur mit einem zusätzlichen Absatz helfen können. Bis ich auf einer Seite (leider weiß ich nicht mehr wo), die wunderbare Eigenschaft auto für Ränder (margin) entdeckt habe. Mit Hilfe dieser Eigenschaft, kann man beliebige 'Block'-Elemente zentrieren.

Was sind Block-Elemente?
Was bedeutet das jetzt? 'Block'-Elemente sind z.B. Layer oder Absätze. Sie sind abgeschlossen und nach ihnen wird automatisch die Zeile umgebrochen. Für genauere Beschreibungen verweise ich einfach mal auf einschlägige Literatur und begnünge mich mit Beispielen: <div>,<p> und <ul> oder <ol> sind 'Block'-Elemente, während z.B. <b>,<i> oder besser <strong>,<em> oder aber auch <img>-Elemente es nicht sind. Sie sind 'inline', das heißt, hinter ihnen geht es ganz normal, ohne einen Textumbruch, weiter.

Nun bietet CSS die Möglichkeiten, Elementen eine Anzeige-Eigenschaft (z.B. block oder inline) zuzuweisen. Dies geschieht mit der Angabe:display:block; bzw.display:inline;

Automatisches Zentrieren der Bilder via CSS
Für das automatisch zentrierte Bild, muss man dem <img>-Tag die Anzeigart block zuweisen, zentriert wird danach mit margin:auto:.storycontent img {
display:block;
margin-left:auto;
margin-right:auto;
}
.storycontent  habe ich vor img gesetzt, da ich nur die Bilder innerhalb meines Postings ansprechen möchte. Und  das Posting befindet sich in einer Box der Klasse .stroycontent. Mit obrigem Code wirkt die CSS-Definition nur auf alle Bilder innerhalb dieser Boxen.

Jetzt kann man das Bild beliebig formatieren. Z.B. einen Bilderrahmen darum setzten. Hierfür benötigt man einen inneren Randabstand (padding), und einen Rahmen (border) und kann z.B. auch noch die Hintergrundfarbe (background) ändern.

Beispielcode
Ein Beispiel für solch einen Code ist: .storycontent img {
display:block;
margin:2px auto;
padding:4px;
border:1px dotted blue;
background: white;
}

Nachtrag:
Diese Art zu zentrieren funktioniert natürlich auch mit jedem anderen Blockelement. Somit ist es z.B. die einfachste Möglichkeit, eine komplette Seite mit fester Breite, im Browser-Fenster zu zentrieren (Im Template Lavender habe ich noch meine alte und wesentlich umständlichere Methode verwendet, so als Vergleich ;)).