CSS Expandierende Box mit unregelmäßigen Rand

[Agratos]

Hallo ihr da draußen, ich hab da mal ein kleines Problem.


Also. Ich habe eine Box die expandieren soll, je nach dem wie viel Text in ihr steht. Das ist soweit auch kein Problem. Ich hab die Box in drei Teile unterteilt. Oben, Mitte, Unten.
Das Mittelteil ist sagen wir mal beispielsweise nun 15px hoch. Der Rand ist wie eine "alte Schatzkarte", also verfriemelt. Das Ding kann sich zwar wiederholen, passt aber halt nur in voller Länge ans Unterteil.

Das heißt: Wenn ein Text nur 25px lang ist, wird ein Mittelteil ganz dargestellt, das nächste aber nur 10px. Also fehlen ja leider 5px und das letzte Mittelteil passt nicht ganz genau aufs Unterteil.

Hat da jemand eine gute Lösung für? Danke schon mal im Vorraus.

 

[Non3]

Ich werde aus deiner Umschreibung nicht schlau, kannst du das bitte mal anhand eines links zu der Sache oder aber exemplarisch als Musterseite zeigen?!

Ich weiß nicht ob ich es richtig vertanden habe, aber vll. is ja eine Lösung einen div umliegend zu legen und dann mit % zu arbeiten und bg-repeat.

<div class="container">
<div class="content-header"></div>
<div class="content"></div>
<div class="content-footer"></div>
</div>

 

[Kagee]

ich glaub ich weiß was er meint. Die Höhe dieser Box darf nur ganzzahlige Vielfache von z.b. 25px betragen.

Mit CSS wird man das allein nicht hinbekommen, denke ich. Da müsste man beim Anzeigen oder Laden der Box die tatsächlich Höhe bestimmen und den Rest des letzen Mittelteils hinzufügen.

 

[Agratos]

Kagee hat mich da richtig verstanden. Dass das nicht nur mit CSS zu realisieren ist, hab ich mir fast schon gedacht. Danke trotzdem!

Weitere Vorschläge sind natürlrich weiterhin erwünscht.

 

[Non3]

ok verstanden nachm 10ten mal lesen

Das kannst du per CSS nicht lösen... ich würde also an deiner Stelle die Grafik überarbeiten das sie immer an den Unterteil anschließen kann. Nur wegen einem bg-repeat nun das "zaubern" anzufangen wäre falsch.

Man kann so "verfriemeltes" zeug auch so darstellen, dass es beim bg-repeat immer drauf ist. Aber ich kenne die Grafiken dazu nicht.

 

[S.o.T.]

Verusche doch einmal, mit der Eigenschaft line-height zu spielen. Diese legt fest, wie hoch eine Zeile ist. Wenn eine neue Zeile dazukommt, weil der Text länger wird, müsste sich damit eben die entsprechende gewünschte "Vergrößerung" festlegen lassen.

 

[Kagee]

ein javascript-ansatz, nicht im Browser getestet:

Eleganter sind ja natürlich Grafiken, die an jeder Position aneinander Passen. Bei einer "vergruschelten" Karte sollte das machbar sein.

function init()
{
	//prüfe ob Element vorhanden
   if(document.getElementById('innerBox')!= null)
	{
		//Höhe der Mitte-Grafik
		var heightImage = 25;
		//Prüfe, ob Ganzzahliger vielfache der inneren Grafik
		if(document.getElementById('innerBox').style.height % heightImage != 0)
		{
			//wenn nicht, vergrößere...
			document.getElementById('innerBox').style.height = ((int)(document.getElementById('innerBox').style.height/heightImage))*heightImage+heightImage;
		}
	}
}

 

[Agratos]

Danke für den Ansatz, aber so gerne möchte ich Javascript jetzt nicht verwenden.
Trotzdem danke für deine Mühe.

 

[S.o.T.]

Hast du es denn schon mit line-height versucht?

 

[Agratos]

Das würd soweit klappen, nur leider ist das etwas kompliziert, da ja genau so viele Lines da sein müssen, wie die Grafik dann auch wirklich groß ist. Zwar ein guter Ansatz, aber leider nichts für mich. Trotzdem danke.

 

[Kagee]

das bleibt nur noch die möglichkeit die Grafik so zu entwerfen, dass die "anschlussstelle" an beliebiger Stelle sein kann.

wenn ich mal Zeit find kann ich mich ja ma dran versuchen. hast du schon grafiken für die Karte?

 

[Agratos]

Ja klar hab ich die, das kann ich aber auch selber.
Trotzdem danke für eure Hilfe.
Kann geschlossen werden.

 

[S.o.T.]

Geht es auch nicht, wenn du line-height: 25px schreibst? Du kannst da ja alle möglichen Angaben machen.

 

[Agratos]

Klar würde das gehen, aber dann würde doch jede Line 25px hoch sein und ich denke das sieht dann nicht mehr so toll aus.

 

[S.o.T.]

Gut, dann bin ich nun still, denn mehr fällt mir auch nicht ein.