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 ;)).


26
Jul 05

CSS

Alles via CSS-Hilfe: Eine kleine Übersicht über CSS-Selektoren. Sehr interessant und nützlich um Anhäufungen von unnötigen Klassen und Identitäten zu verhindern. Außerdem ein kleiner Artikel, der sich mit dem Box-Modell-Bug im IE beschäftigt, und nicht nur ^-^. Kann man auf jeden Fall etwas lernen. Gleiches gilt auf für den Artikel über Zoom-Layouts. Eine CSS-basierende Möglichkeit eine Seite für Besucher mit geringer Auflösung besser lesbar zu machen. Sehr praktisch: Die Liste der Mozilla-CSS-Eigenschaften. Infos zu -moz-border-radius & co. Und zu guter letzt eine Seite, die sich mit dem Aufbau von CSS-Dateien beschäftigt. Damit man Überblick behält ^-^''. Und weil ich gerade auf der Seite bin: The Principles of Design ist sicherlich auch nicht uninteressant zu lesen ^-^''

Mehr zum Thema CSS CSS rund und eckig und überall, css - Browserkompatibilität und Positionierung, CSS Intensivstation und Menu-Highlights


20
Jul 05

X-Ray

Lustig (Bild anklicken und scrollen) ^-^'' Wird nur mit XHTML und CSS verwirklicht: X-Ray-Effekt [via PHP-Princess]. Achso, nix für Internte Explorer-Benutzer!


07
Apr 05

Quellen der Inspiration

Z.B. bei Figoo - Worth Le Click, viele coole Links, wobei auch viele kommerzielle Seiten. Weiter geht's zu deformat, ein deutsches "beautysite catalouge", wenn ich das jetzt mal so übernehmen darf ^-^'. Definitiv cool: styleboost. Visualdesigner erscheint mir etwas "bodenständiger" subjektiv. Mein momentaner Favorit: linkdup ;). unmathcedstyle hatte ich, glaube ich, schon einmal erwähnt ^-^ und Stylegala auch - vielleicht. Wenn nicht wurde es hiermit nachgeholt.
Bekannt sind css beauty und css vault, der Vollständigkeit halber sollen sie hier nicht fehlen. Mehr, mehr, mehr!! Gibt's bei Graphic Orgasm Ultimate Webportal. Und zu guterletzt noch Netdiver und Webstandartsawards.

Und noch ein paar Einzelseiten, die defnitiv mindestens einen Besuch wert sind ;). Matthias Nicolai besticht mich mit interessanter Navigation. Vasava ist das Portfolio einer spanische Artwort Agentur, sehr sehenswert. Shift ist ein japanisches Ezine, natürlich auch mit Blog. db-db.com - Design together ist für das Füchschen auf dem Rechner meines Freundes etwas zu heftig. Liegt wohl an der Visualisierung der gerade auf der Seite befindlichen Besucher ^-^''. Für mich etwas unübersichtlich. Schön anzusehen, im wicked worn-Style: 555design.

Komme ich nun zu diversen Blogs, welche ich min. noch einmal besuchen mag ;). hinterding und joshuaink. TheMM or us?, der ISNMblog der Uni Lübeck. Definitiv ein Kandidat für den RSS-Reader ;) : Veerle's blog, geniale Tutorials und auch ansonsten sehr lesenswert. Weiter geht's mit der Ideengeberin, auf jeden Fall mit Control-O und Platoon. Der Gadgetryblog ist auch ein Kandidat, wenn auch schon ein alter Bekannter. ^-^'' Und als Abschluss ein Besuch bei the flow.


13
Feb 05

Nice Sites - Blogs - CSS - Fonts - einfach querbeet

Weil ich gerade nichts zu tun habe. Lasse mich vom Wow Factor treiben zu Pixelate - stylisch, coole Pixelfonts. Da sehe ich gerade das die zwei Font-Links bei meinem Firefox-Crash draufgegangen sind - naja, Dummheit. Auch eine Seite für Fan des angenehmen Webworks: Zeldman.com. Dort gefunden: Eine Seite für 70er Fans. Den Bereich Interiours finde ich genial. Erinnert mich irgendwie an 2046.

Für CSS-Fans, oder solche, die es werden wollen Wohl eher für letztere ist definitiv Flumpcakes zu empfehlen. In meine Favoriten ist auch noch der Weblog eines Pessimistischen Webdesigners geraten - coole Seite ^-^''. Und von dort gleich weiter zum Pixeltutorial des Pixelfreak.

Und auch schon seit Ewigkeiten in meinen Links: Für alle die gerne Scrabblen ist Morewords die optimale Schummelmaschine. Eingeben der Buchstaben die man hat, und das online-Dictionary spukt passende Wörter aus. Fastfoodkids ist eine seltsame Seite, die ich vor längerem mal entdeckt habe. Dort findet sich der ein oder andere Link zu Kitsch-Shops.

In einem anderen Blog (leider habe ich Link aus meinem RSS-Reader schon gelöscht - Entschuldigung!) gefunden: das Rätselblog - juchuuu.. wiedergefunden [via ab::gebloggt]. Und ging vor ein paar Wochen in der Blogger-Szene rum: Tunespoon.tv als Alternative zu MTViva - gegen den Klingeltonwahnsinn - aber nur mit Banbreite zu genießen.

Gulli:World begibt sich in eher andere Kreise des Internets. Monsun.blogg habe ich noch nicht ganz verstanden - aber mich auch noch nicht so damit beschäftigt. Mangelnde Bandbreite. Mag DSL haben :(. Noscope muss ich mir auch noch mal genauer ansehen.

Ansonsten, wie wäre es mit In 80 Klicks um die Welt. Und einem halt bei diesen tollen Bildern von Pariesern Hört sich blöd an ^-^'' . Aber die Bilder sind genial!! Und wer jetzt noch Lesestoff benötigt kann in Bens WG-Zimmer schmöckern.