✔ Elegantere Lösung für verschachtelte divs gesucht

[Himhilion]

Hallo,

zum Thema "Runde Ecken" wurde auch hier schon viel gepostet, dennoch habe ich keine befriedigende Lösung für mein Problem gefunden. Ich habe am anfang die Runden Ecken via den neuen Klassen tl, tr, bl, br verwirklicht.

.tr {
	background:url(box_blue_small/tr.png) top right no-repeat;
}

.tl{
	background:url(box_blue_small/tl.png) top left no-repeat;
}

.br{
	background:url(box_blue_small/br.png) bottom right no-repeat;
}

.bl {
	background:url(box_blue_small/bl.png) bottom left no-repeat;
}

Das klappt auch sehr gut, bis auf die Tatsache, dass ich mir immer die Reihenfolge merken muss, also erst tr, dann tl, dann br und dann bl.

Deshalb habe ich nach einer anderen Möglichkeit gesucht, und diese hier gefunden:

.box {
 	text-align: left;
	vertical-align: middle;
	margin: 0px auto;
	padding: 2.5em 2.5em 3.5em 2.5em;
	width: 800px;
	background-color: #ffffff;
	border: 0px;
}

.box div {
	background:url(box_blue_small/tr.png) top right no-repeat;
}

.box div div{
	background:url(box_blue_small/tl.png) top left no-repeat;
}

.box div div div {
	background:url(box_blue_small/br.png) bottom right no-repeat;
}

.box div div div div {
	background:url(box_blue_small/bl.png) bottom left no-repeat;
}

Jedoch habe ich damit dann das Problem, wenn ich ein weiteres div in meinem Code nutze, dann bekomme ich erneut das Bild von bottom left, was ich ja nicht will.
Deswegen such ich entweder nach einer Möglichkeit, ab dem 5. div dieses zu ignorieren, oder am besten nach einer ganz anderen Möglichkeit, bei welcher ich nur eine Zeile schreiben müsste.

Hat jemand vielleicht eine Idee?

Vielen Dank

Himhilion

 

[Maik]

Hi,

in dem Artikel 25 Rounded Corners Techniques with CSS lässt sich sicherlich das passende Konzept für abgerundete Ecken finden.

mfg Maik

 

[Himhilion]

Vielen Dank

Ich habe mich für CurvyCorners entschieden, da es auch Ränder unterstützt. Allerdings habe ich dazu eine Frage:

Der Standardaufruf sieht so aus

window.onload = function()
  {
      /*
      The new 'validTags' setting is optional and allows
      you to specify other HTML elements that curvyCorners
      can attempt to round.

      The value is comma separated list of html elements
      in lowercase.

      validTags: ["div", "form"]

      The above example would enable curvyCorners on FORM elements.
      */
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: false,
          validTags: ["div"]
      }

      /*
      Usage:

      newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var BoxObject = new curvyCorners(settings, "box");
	  BoxObject.applyCornersToAll();	  
  }

wobei "box" so aussieht:

.box {
	margin: 0px auto;
    border: 4px solid #204a87;
    color: #ffffff;
    width: 800px;
	max-width: 800px;
	min-width: 800px;
	padding: 2.5em 2.5em 2.5em 2.5em;
    text-align: left;
    background-color: #729fcf;
    border: 4px solid #204a87;
}

Nun würde ich gerne eine "small_box" mit den einer Breite von 600px erstellen ohne dann im <div> tag die werte dann noch zu verändern. Ich habe folgendes versucht:

.smallbox {
	margin: 0px auto;
    border: 4px solid #204a87;
    color: #ffffff;
    width: 600px;
	max-width: 600px;
	min-width: 600px;
	padding: 2.5em 2.5em 2.5em 2.5em;
    text-align: left;
    background-color: #729fcf;
    border: 4px solid #204a87;
}

und das JavaScript angepasst:

window.onload = function()
  {
      /*
      The new 'validTags' setting is optional and allows
      you to specify other HTML elements that curvyCorners
      can attempt to round.

      The value is comma separated list of html elements
      in lowercase.

      validTags: ["div", "form"]

      The above example would enable curvyCorners on FORM elements.
      */
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: false,
          validTags: ["div"]
      }

      /*
      Usage:

      newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var BoxObject = new curvyCorners(settings, "box");
	  BoxObject.applyCornersToAll();	  
      var smallBoxObject = new curvyCorners(settings,"smallbox")
          smallBoxObject.appyCornersToAll();
  }

Allerdings scheint er damit die anderen zu überschreiben. Kann ich das irgendwie umgehen?

LG Himhilion.

 

[Sven Mintel]

Jedoch habe ich damit dann das Problem, wenn ich ein weiteres div in meinem Code nutze, dann bekomme ich erneut das Bild von bottom left, was ich ja nicht will.
Deswegen such ich entweder nach einer Möglichkeit, ab dem 5. div dieses zu ignorieren

Hier im Forum machen wir es so(mit 8 Divs )

.box div div div div div{background-image:none}

 

[Maik]

Hi,

du musst lediglich im JS-Code die Groß- und Kleinschreibung deiner gewählten Klassen-Namen beachten bzw. so übernehmen, dann verrichtet das Script seinen Job auch fehlerfrei, denn Javascript, wie auch CSS, unterscheidet hier strikt, folglich ist "B" nicht das gleiche, wie "b".

var BoxObject = new curvyCorners(settings, "box");
BoxObject.applyCornersToAll();	  
var smallBoxObject = new curvyCorners(settings,"smallbox")
smallBoxObject.appyCornersToAll();

mfg Maik