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.

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.

Trackbacks / Pingbacks zu diesem Artikel

Kommentare zu diesem Artikel

  1. Richard

    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

  2. Ulf (Admin)

    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*

  3. Richard

    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*

  4. Ulf (Admin)

    Ja in meinen Augen schon, oder hast du da noch den Überblick?

  5. Jan

    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.

  6. Frank

    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.

  7. Marvin

    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

  8. Ulf (Admin)

    @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.

  9. Marvin

    Ich weiß ich meine du hast einen Schreibfehler in dem Wort bottom-right ganz unten bei dir steht „bottem“

  10. Ulf (Admin)

    Verdammt, wenn ich die Fehlerfee erwische, die das verbockt hat, hau ich sie grün und blau 😛

  11. Eugen

    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 😉

  12. Millus

    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*

  13. Roger H.

    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.

  14. Ulf (Admin)

    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.

  15. Roger H.

    Klar, war ja nicht böse gemeint. Wollte damit nur auf diese Möglichkeit hinweisen. Nunja, egal.

  16. Alex

    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! 😉

  17. Ulf (Admin)

    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.

Diesen Beitrag kommentieren

Hinweis: Wegen des stetig zunehmenden Kommentar-Spams, lasse ich keine Links mehr zu, welche nicht zur Blogsphäre gehören. Jegliche Form werblicher Kommentare, zu Shops oder Shop-Kategorien, Portalen oder MFA-Seiten (Made for AdSense) sind hier unerwünscht. Als Name bitte den Vor- und/oder Nachnamen bzw. den Nickname verwenden. Keywords und selbstverständlich die zugehörigen Links, welche offensichtlich nur dem Suchmaschinenranking dienen, werden umgehend gelöscht.






Validate XHTML Validate CSS