Kommentare zu: Neues CSS Tutorial: Boxen mit abgerundeten Ecken

Von: Ulf

Ulf — Tue, 28 Apr 2009 06:40:15 +0000

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.

Von: Alex

Alex — Mon, 27 Apr 2009 19:13:01 +0000

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!

Von: Roger H.

Roger H. — Thu, 08 Nov 2007 20:59:19 +0000

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

Von: Ulf

Ulf — Thu, 08 Nov 2007 15:50:29 +0000

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.

Von: Roger H.

Roger H. — Thu, 08 Nov 2007 15:25:08 +0000

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.

Von: Millus

Millus — Tue, 28 Aug 2007 20:53:21 +0000

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*

Von: Eugen

Eugen — Tue, 28 Aug 2007 18:43:26 +0000

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

Von: Ulf

Ulf — Tue, 28 Aug 2007 17:17:38 +0000

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

Von: Marvin

Marvin — Tue, 28 Aug 2007 17:12:08 +0000

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

Von: Ulf

Ulf — Tue, 28 Aug 2007 16:34:14 +0000

@Marvin: Hm, also ich kann da jetzt keinen Fehler finden:





Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut nibh...

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.