Neues CSS Tutorial: Boxen mit abgerundeten Ecken
Vorgestern wurde die neue Tutorial-Kategorie für XTHML, CSS & Webdesign Tutorials eröffnet und heute gibt es direkt Nachschub. Mit dem CSS Tutorial „Box mit abgerundeten Ecken“ kann man solch schöne Einleitungsboxen gestalten, wie auch ich sie z.B. hier auf der Seite verwende.
Verwandte Artikel:
Der Beitrag wurde
am Donnerstag, den 23. August 2007 um 15:03 Uhr veröffentlicht
und wurde unter Tutorials abgelegt.
Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen.
Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
schrieb am 23. August 2007 um 19:33 Uhr
Sehr schön. Nur die Animation ist wirklich total … unpassend. Wieso machst du nicht ein kurzes Flash-Video und lädst es bei Youtube & Co. hoch. Dann kann man vor-/zurückspulen und sieht, an welcher Stelle des Tutorials man gerade ist.
Richard
schrieb am 23. August 2007 um 20:09 Uhr
a) ich hasse Flash
b) youtube ist genauso sinnlos wie … siehe a)
c) ich liebe total überzogen sinnlos große überlange GIF-Animationen
d) ne abgerundete Ecke in PS drüfte eigentlich nicht wirklich ein Problem darstellen, weswegen das Ding nur obligatorisch dabei ist um Fragen vorzubeugen „Wie macht man ne abgerundete Ecke?“ und natürlich weil … siehe Punkt c.
d) gibbet eigentlich mal was, woran du nix auszusetzen hast? *kopfkratz*
schrieb am 23. August 2007 um 21:51 Uhr
Ich hab doch gesagt: „Sehr schön.“
Außerdem, finde ich, ist meine Kritik konstruktiv und berechtigt.
Richard
P.S.: YouTube ist also „sinnlos“? *kopfkratz*
schrieb am 24. August 2007 um 01:02 Uhr
Ja in meinen Augen schon, oder hast du da noch den Überblick?
schrieb am 24. August 2007 um 03:07 Uhr
Wenn man weiß was man sucht, findet man es auch, ansonsten browse ich bei youtube nicht, sondern bekomme Links von anderen geschickt bzw. von Websites.
Richard hat recht mit seiner Kritik, diese Gifs sind wirklich nicht das Wahre.
Vorschlag: Realisiere das irgendwie mit Javascript und Ajax, so dass man zwischen mehreren Schritten fortwärts und rückwärts springen kann. Sogar ich, der davon gar keine Ahnung hat sollte das hinbekommen.
Kann natürlich auch sein, dass du darauf keinen Bock hast – dann lass es einfach.
schrieb am 25. August 2007 um 23:22 Uhr
Bitte beim Thema bleiben, Jungs. Er macht das freiwillig und es nicht nötig. Ob YouTube usw. sinnvoll oder sinnlos ist, ist nicht Thema dieser Seite. Zuviel Köche verderben den Brei.
Ich sage mal ganz nett „Danke.“ für deine freiwillige Hilfe. Hat mir echt geholfen, Ulf. Komme langsam Schritt für Schritt weiter.
Weiter so. Ich bin gespannt, was da noch so alles aus dem Hut gezaubert wird.
schrieb am 28. August 2007 um 18:24 Uhr
Hey Ulf in deinem Tutorial ist ein Codefehler
Dein Auszug :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut nibh…
Richtig muss es aber „box-bottom-right.gif“ heißen. Soll nicht besserwisserisch klingen 🙂
Bis bald,
Marvin
schrieb am 28. August 2007 um 18:34 Uhr
@Marvin: Hm, also ich kann da jetzt keinen Fehler finden:
<div id="box"><span class="box-top-right"></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut nibh...
<span class="box-bottom-left"></span>
<span class="box-bottom-right"></span>
</div>
Soweit alles richtig, denn das box-top-left.gif wird bereits im DIV-Container definiert, die restlichen 3 Ecken jeweils in der SPAN-Klasse. Das Lorem Ipsum stellt lediglich den Bereich dar, in welchen man den eigenen Content einfügt.
schrieb am 28. August 2007 um 19:12 Uhr
Ich weiß ich meine du hast einen Schreibfehler in dem Wort bottom-right ganz unten bei dir steht „bottem“
schrieb am 28. August 2007 um 19:17 Uhr
Verdammt, wenn ich die Fehlerfee erwische, die das verbockt hat, hau ich sie grün und blau 😛
schrieb am 28. August 2007 um 20:43 Uhr
Hallo Ulf,
Respekt dass es deine Seite so lange gibt. Deinen Blog kannte ich bislang nicht, ich war lange Zeit nicht mehr. Aber wirklich schöne Texte und mit schönen Beispielen.
Mach weiter so. Du hast einen Feedreader mehr 😉
schrieb am 28. August 2007 um 22:53 Uhr
Eine direkte Verlinkung zum Tutorial hier im Beitrag wäre mir lieber, musste mich zuviel durchklicken, um an das Tut zu kommen, aber ich habs getan
🙂
Sehr schön und ich hasse Flash auch.
Grüße und Weiter so!
M*
schrieb am 8. November 2007 um 17:25 Uhr
Eigentlich ne nette Sache, doch stellt sich bei mir die Frage, warum man 4 verschiedene Dateien braucht?
Ich lade lieber n 40*40 grosses file, und ordne es dementsprechend an (background-position).
So kann man 1 Bild für alle 4 Ecken verwenden.
schrieb am 8. November 2007 um 17:50 Uhr
1. Viele Wege führen nach Rom. Ich habe schon öfter geschrieben, dass ich nicht das Mass aller Dinge bin, sondern Vorschläge gebe, bzw. zeige, wie ich bestimmte Dinge löse.
2. Hätte ich in diesem Tutorial z.B. eine Möglichkeit gezeigt, nur ein Bild zu verwenden und dies durch verschiedene Positionierungen im Stylesheet anzupassen, dann hätten viele aufgemuckt, weshalb denn so kompliziert.
Die Tutorials richten sich an diejenigen, die es noch nicht können und nicht jene, die wissen wie es geht bzw. sich selbst einen Kopf machen können.
3. Werd ich es hoffentlich mal noch erleben dürfen, dass zu einem veröffentlichten Tutorial mal nicht aus irgend einer Versenkung wer auftaucht und „es besser weiß“ sondern meine Sachen einfach einmal so hin nimmt, wie sie veröffentlicht wurden.
Ich surfe auf vielen Tutorial-Seiten herum und bis Dato ist mir noch niemals auch nur im Traum einzufallen dort mit „Ich weiß es aber besser“ oder „kann man so viel besser machen“ den Autoren auf den Sack zu gehen. Da ich nämlich weiß, welche Arbeit dahinter steckt, bin ich lieber froh über alles gezeigte bin, auch wenn ich es evtl. anders angehen würde.
schrieb am 8. November 2007 um 22:59 Uhr
Klar, war ja nicht böse gemeint. Wollte damit nur auf diese Möglichkeit hinweisen. Nunja, egal.
schrieb am 27. April 2009 um 21:13 Uhr
Moin, moin!
Ich hoffe ich kriege hier noch eine Antwort, das Tutorial ist ja schon etwas älter.
Also mein Anliegen: ich habe immer wieder mal versucht mit (X)HTML und CSS anzufangen, aber ich habe damit genau so oft auch wieder aufgehört. 😉 Nun habe ich deine beiden CSS-Tutorials gefunden und versucht beide gleichzeitig umzusetzen. Sprich: einen zentrierten div-Container und dazu die abgerundeten Ecken.
Habe also die zentrierte Box „gebastelt“ und hat alles auch super funktioniert. Dann weiter und die abgerundeten Ecken dazu gemacht; hat auch alles so funktioniert wie es soll – bis auf das „padding“. Wenn ich das hinzufüge im CSS wächst die Box quasi nach rechts und nach unten, was sie natürlich nicht soll (damit es immer noch richtig zentriert ist). Wie kann das Problem behoben werden? Die Schrift soll natürlich schon einen kleinen Abstand zum Rand des divs haben.. (hierzu eine kleine Grafik)
Dann würde es mich noch interessieren, ob es möglich ist die Höhe der Box automatisch anzupassen, also so, dass sie trotzdem immer noch zentriert ist..
Würde mich über eine Antwort freuen, Alex! 😉
schrieb am 28. April 2009 um 08:40 Uhr
Hallo Alex,
1. Ziehe den Wert deines Paddings von der Höhe und Beite der Box ab. Ist diese z.B. 300px breit und 200px hoch und dein Padding beträgt 20px, dann reduziere die Höhe und Breite auf 280 x 180px. Das Padding addiert sich wieder zu den Werten hinzu.
2. Bei der automatischen Höhe der Box wird es schon kniffeliger. Bedenke, dieses Box-Konstrukt mit der zentrierten Ausrichtung arbeitet mit fixen Werten und ist eigentlich dazu gedacht, immer eine Feste größe zu behalten. Sorge also dafür, dass diese Box immer groß genug ist, um deinen Inhalt aufzunehmen, denn überschreitet die Höhe des Inhaltes die Höhe der Box, so wird diese sich nach unten erweiteren, aufgrund der fixen Werte jedoch nicht mehr zentral mittig sitzen.