Bebilderung des Textanfangs per CSS

25. April 2007

4 Kommentare

In vielen Zeitschriften kann man es sehen; auch die Tageszeitungen haben diese Technik drauf:

Den ersten Buchstaben des Textes groß zu schreiben und ihn mit einer anderen, meist besonders auffälligen Schriftart in Szene zu setzten. Eine Technik, die man auch mit Hilfe von CSS umsetzten kann.

Der erste Buchstabe soll groß und und schön dargestellt werden. Der folgende Text soll sich um diesen Buchstaben herum platzieren.

Die Vorstellung die wir haben sieht also so aus:

Vorschau

Wie ist dies nun zu erreichen?

Den ganzen Beitrag lesen.

¬ geschrieben von Benedikt in CSS / HTML, Erklärungen

Dreispaltiges Layout

7. Februar 2007

0 Kommentare

Gestern wurde auf A List Apart ein Artikel von Alan Pearce veröffentlicht, der da heißt: “Multi-Column Layouts Climb Out of the Box“. Was das bringt?

Drei Boxen nebeneinander und alle haben immer die gleiche Höhe. Gut, wenn man verschiedenen Hintergründe benutzt.

¬ geschrieben von Benedikt in Generell

53 CSS-Techniques

20. Januar 2007

0 Kommentare

Rounded Corners, Tabnavigation or Star Rater. The Smashing Magazine lists 53 CSS-Techniques You Couldn’t Live Without

¬ geschrieben von Benedikt in Generell

Dear Visitors of CSS Mania

9. Januar 2007

1 Kommentar

I’m glad that you found your way to my weblog. I’m proud that my website is listed in this css gallerie. I hope you like my design.

Information about me an this page:

This weblog is the personal website of Schweizer Glücksspielexperten.

I am 19 yrs old and come from germany. I´m going to school and will make the a-level exmas this year (april).

Here you can find articles about CSS technique, HTML and my daily life.

Have a nice day ;)

Für meine deutschssprachigen Leser: Ich wurde bei CSSMania gelistet: Zur Profilseite

¬ geschrieben von Benedikt in Benedikt

Inspiration für Navigationen

9. Januar 2007

0 Kommentare

Die Navigation ist einer der wichtigsten Bestandteile einer Homepage. Man verschafft sich mit einem Blick eine Übersicht auf das, was auf der einzelnen Seite angeboten wird.

Oft sind diese Navigationen nüchtern irgendendwo hingeknallt, oder passen nicht zum Layout.

Seitdem viele Seiten auf einen validen Code achten und die Positionierung von Elementen dem CSSFile überlassen, werden auch die Navigationen schöner und passen besser in das Gesamtbild.

Ich habe mal eine Liste zusammengestellt, die schöne horizontale und vertikale Navigationen, zeigt. Sie sollen zur Inspiration dienen und zeigen, was alles möglich ist.

Den ganzen Beitrag lesen.

¬ geschrieben von Benedikt in Internet, Design, CSS / HTML

CSS Grundlagen: Ruf mal auf

4. Dezember 2006

1 Kommentar

Wie gesagt, ich lerne noch viele neue Dinge bei CSS kennen.

Mit dem @ Zeichen kann man diverse Dinge in CSS 1, aber hauptsächlich in CSS 2 anstellen.

Bekannt ist der @-Import Aufruf, der schon in CSS 1 dabei ist.

Mit diesem Befehl ist es möglich, weitere Style Sheets – oder auch Definitionen – einzubinden.

Es funktioniert ganz einfach mit @import url(http://stylesheet.css);

Das nächste, mir bis vor kurzem unbekannte Befehl ist der Schriftart Aufruf. Das kann daran liegen, dass ich kaum mit „Nicht-Standardschriften“ hantiere, aber trotzdem kann es mal irgendwann ganz nützlich sein.

Dieser Befehl lautet dann @font-face und wird folgendermaßen angewendet:

@font-face {

src: url(http://link-zu-meiner-schrift.de/schrift.ttf);

font-family: 'Name der Schriftart';

....

}

Diese Schriftart ist dann definiert. Das heißt, dass man sie auch im weiteren Style Sheet verwenden kann:

p {font-family: 'Name der Schriftart'}

Natürlich können bei @font-face auch noch weitere Definitionen getroffen werden.

Der letzte Befehl ist der @media Befehl. Mit Hilfe dieses Befehls können Angaben im CSS nur einzelnen Dingen wie Drucker, Handheld oder so was zugewiesen werden.

Beispiel dafür wäre:

@media print {

#content {color: white; background: black;}

}

print = Drucler

@media screen {

#content {color: #e1e1e1; background:#fff url(https://benediktrb.de/files/tag/backgroundbild.gif) repeat-x;}

}

screen = alle PC-Bildschirme

Bei Selfhtml gibt es unter „Medientypen“ eine Auflistung aller verfügbaren Medien.

¬ geschrieben von Benedikt in CSS / HTML, Erklärungen

Dritter Adventskalender der Krauts

29. November 2006

1 Kommentar

Für alle die keinen Adventskalender mehr mit Schokolade oder Bonbons bekommen, oder wollen, gibt es von den Webkrauts wieder einen Interaktiven.

So wie früher wird jeden Tag ein Türchen geöffnet Beitrag geschrieben. Im Zeitraum vom 1. bis zum 24. Dezember gibt es Artikel rund um:

Content Management Systeme und Webstandards, Usability oder Mikroformate

und noch mehr.

Wenn man sich angesprochen fühlt, aber erst einmal schauen möchte ob das wirklich interessant ist, der kann sich die letzten beiden ja mal anschauen.

Manuela hat zu diesem Zweck auch ihr Photoshop angeschmissen und diverse Buttons gestaltet, die man für die Unterstützung im eigenen Weblog verwenden kann. Diese findet ihr entweder auf pixelgraphix, oder direkt bei den Webkrauts.

¬ geschrieben von Benedikt in Internet, Webstandards

Ich lerne CSS und Design

27. November 2006

1 Kommentar

Heute habe ich mir mal alte Ordner im hinteren Bereich meiner Festplatte angeguckt. Dabei bin ich auf einen interessanten Ordner gestoßen, der den Namen “Einfach” trägt.

Das Erstellungsdatum kommt vom August 2005 und weist darauf hin, dass es sich um einen alten Schatz handeln muss.

Der Ordner selbst trägt den Namen wohl zurecht, denn er beinhaltet nur zwei Dateien. Eine .css und eine .html Datei.

Beim Öffnen der Datei kommt es mir wieder in den Sinn. Es ist wohl einer der ersten Versuche, die ich getätigt habe, mit Hilfe von CSS und XHTML eine Homepage zu erstellen.

Das Ergebnis seht ihr hier:

Erster CSS Versuch

Das ganze kann man sich auch als Onlinedemo ansehen.

Was mich wundert ist, dass sogar alles validiert ist. Aber vielleicht war das damals auch mein Ziel? Ich weiß es nicht mehr.

Ich weiß nur, dass ich seitdem viel gelernt habe. Wusste ich früher noch nicht viel, oder besser gesagt gar nichts, über Webstandards, CSS, XHTML oder Web 2.0, so versuche ich heute schon selber etwas von dem weiterzugeben, was ich gelernt habe.

Auch die Entwicklung in Sachen Webdesign ist fortgeschritten. Von 2003 bis 2005 war ich reiner Designer, der sich zunächst in diesem Bereich fortbilden wollte. Dann kam eben das Coden hinzu. Den Schritt mit Tabellen eine Homepage zu coden habe ich nahezu ausgelassen. Wohlgemerkt in Sachen Homepages habe ich es ausgelassen. Denn bei meiner Arbeit mit dem wBB 1.2 – wBB 2 musste ich auch diesen Bereich des Coden lernen.

Ich habe Heute auch nach alten Designs gesucht und bin fündig geworden. Eine kleine Entwicklung (zur Großansicht einfach auf die Bilder klicken):

Homepage 2003

Design von 2003

Homepage 2004

Design von 2004

Homepage 2005

Design von 2005

2006 habe ich mich auf einen eher minimalistischen Stil festgelegt, so wie man ihn auch von diesem Weblog kennt. Von pompösen Webseiten mit viel “bling-bling” halte ich sowieso nicht sehr viel.

Ich bin immer wieder erstaunt, was so in den letzten Jahren passiert ist. Es ist meist sehr witzig, wenn man sich die ersten Versuche in Sachen Design anschaut.

Und noch immer lerne ich…

¬ geschrieben von Benedikt in Benedikt, Design, CSS / HTML

Einführung in HTML

1. Oktober 2006

0 Kommentare

Vorwort

HTML ist seit jeher für alles, was sich auf der Seite zeigt, seien es Texte und Absätze, Tabellen oder Frames, aber auch Formulare, verantwortlich. Dabei ist ist es wichtig sich direkt klar zu machen, dass es gewisse Webstandards gibt, an die es sich zu halten gilt.

Die Idee des Internets war, Informationen auf der ganzen Welt für jedermann zugänglich zu machen. Um dies zu gewährleisten, wurden einige Standards bzw. Grundregeln entwickelt, die von jedem “Anzeigegerät” gleich interpretiert werden sollten. HTML, CSS, ECMA-Script (Javascript) und XML sind die “Regelwerke”, nach denen im Web entwickelt wird.

Nur haben Browserentwickler diese Standards nie sehr ernst genommen und so gibt es heute keinen Webbrowser, der HTML und CSS zu 100% beherrscht. Ganz besonders hängt der Marktführer, der Internet Explorer, in der Entwicklung hinterher und macht allen Webdesignern das Leben schwer und steht der Weiterentwicklung des Web im Weg.

Dieses Wissen, rund um die Webstandards und das barrierefreie Web, erklärt, warum viele Coder eine große Abneigung gegenüber diversen HTML-Editoren haben. Ebenso erklärt es den Sinn, warum man sich immernoch die verschiedenen HTML-Tags aneignen und diese sinnvoll einsetzten sollte. So ist auch die strikte Trennung von HTML und CSS zu erklären.

Beim Einsatz von HTML geht es um die Strukturierung der Seite, nicht aber um das Layout und die Formatierung. Der folgende Artikel soll dabei helfen, HTML zu verstehen und die Grundlagen zu erlernen.

Weiterführende Artikel

Einführung in HTML – Grundlagengewinnung – Der Hauptartikel

Allgemeine Tags

Verlinkung

Grafiken

Doctype

CSS Grundlagen

Semantik eines (X)HTML Dokuments

¬ geschrieben von Benedikt in CSS / HTML, Erklärungen

CSS – Fonttester

20. August 2006

1 Kommentar

Und wiedermal etwas für die Kategorie: Faule CSS’ler :D

Auf der Seite Fonttester kann man sich ganz einfach und problemlos einen CSS Code für z.B. P-Tags herstellen. Es gibt verschiedene Möglichkeiten die Schrift einzustellen. Darunter die bekannten Attribute wie font-weight, line-height oder letter-spacing. Nach der Methode WYSIWYG bekommt man seine Veränderungen gleich zu sehen.

Mit dem Klick auf “GET CSS CODE” bekommt man dann einen Code heraus, den man direkt ins eigene Stylesheet einbinden kann.

Sehr schön gemacht und vorallem auch mal ganz nützlich, denn auch Anfänger können direkt sehen, was die CSS-Werte so einen Sinn haben und was passiert, wenn man diese verändert.

¬ geschrieben von Benedikt in Internet, CSS / HTML

CSS Grundlagen: Vererbung

3. August 2006

3 Kommentare

Dieser Artikel geht über den Einsatz von HTML-Tags, die, die gleichen CSS-Anweisungen besitzen.

Dafür war der Kommentar von Heiko ausschlaggebend.

Wie es genau gemacht wird, werde ich im Folgenden zeigen. Durch diese Technik erspart man sich ein zu langes und zu speicherraubendes Stylesheet.

Die Vererbung an sich ist relativ simpel. Wie oben beschrieben haben mehrere HTML-Tags ein und dieselbe CSS-Anweisung.

Ich habe dazu mal ein anschauliches Beispiel gemacht.

Den ganzen Beitrag lesen.

¬ geschrieben von Benedikt in CSS / HTML, Erklärungen

CSS Grundlagen

21. Juli 2006

5 Kommentare

Persönliche Einleitung hierfür:

Es ist Sommer, es ist heiß und ich habe sechs Wochen Ferien. Also werde ich etwas weitermachen, was ich schonmal auf dynamic-vision.com angefangen habe.

Eine Artikel Reihe zu verschiedenen CSS-Themen. Eine meiner Meta-Descriptions heißt: Coding. Da ich für diesen Bereich kaum etwas getan habe, werde ich dies hier jetzt mal nachholen. In der Zukunft werden weitere Artikel erscheinen.

Webstandards

Die Idee des Internets war, Informationen auf der ganzen Welt für jedermann zugänglich zu machen. Um dies zu gewährleisten, wurden einige Standards bzw. Grundregeln entwickelt, die von jedem “Anzeigegerät” gleich interpretiert werden sollten. HTML, CSS, ECMA-Script (Javascript) und XML sind die “Regelwerke”, nach denen im Web entwickelt wird. Nur haben Browserentwickler diese Standards nie sehr ernst genommen und so gibt es heute keinen Webbrowser, der HTML und CSS zu 100% beherrscht. Ganz besonders hängt der Marktführer, der Internet Explorer, in der Entwicklung hinterher und macht allen Webdesignern das Leben schwer und steht der Weiterentwicklung des Web im Weg.

Den ganzen Beitrag lesen.

¬ geschrieben von Benedikt in Webstandards, CSS / HTML, Erklärungen