Automatisches Boxenende

Also, ich weiß jetzt nicht, wie diese Bilder für oben und unten aussehen, aber du kannst es auch anders machen:

div#messagebox {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Falls die Bilder nicht durch CSS ersetzt werden können, dann kannst du auch mit CSS3 mehrere Hintergründe benutzen. Das machst du wie folgt:

div#messagebox {
  background-image: url(bg_oben.png), url(bg_unten.png);
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

Hier schreibst du quasi einfach zwei Bilder mit einem Komma und einem Leerzeichen getrennt hin und definierst danach ebenfalls mit einem Komma und einem Leerzeichen getrennt die Eigenschaften. Falls eine Eigenschaft auf beide Bilder zutrifft, dann kannst du sie einfach ein mal hinschreiben, das wird dann für beide genommen. Hier werden beide Bilder nicht wiederholt.

Das ist viel einfacher Du musst aber dran denken, dass das nicht in jedem Browser funktioniert.

die box soll dynamisch breit sein, sprich wird der inhalt größer verbreitert sie sich, aber nimmt nicht die ganze breite ein?

#box
{
display: inline-block;
}

Zitat von "drPHIP132"

die box soll dynamisch groß sein, sprich wird der inhalt größer verbreitert sie sich, aber nimmt nicht die ganze breite ein?

vllt hat er die Boxen in einem anderen Element (z. B. einer Sidebar), die schon eine feste Breite hat?

Wenn die Breite dynamisch ist, dann funktioniert das ganze natürlich nur anders. Dann müsstest Du mit 4 Bildern arbeiten. Oben links, oben rechts, unten rechts und unten links. Folgender Code wäre dann geeignet:

div#messagebox {
  background-image: url(bg_obenlinks.png), url(bg_obenrechts.png), url(bg_untenrechts.png), url(bg_untenlinks.png);
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

Es ist zwar etwas umständlicher, aber es ist trotzdem möglich Ich empfehle trotzdem border-radius Wenn der Rahmen besonders ist und du ihn mit Gimp oder Photoshop erstellt hast, dann kannst auch border-image benutzen.

Ach, ich liebe CSS3 :DDDD

möchtest du nun, dass die newsbox sich an den text anpasst oder so breit ist, wie der bereich, indem der div verschachtelt ist?

gibt zum beispiel folgende möglichkeiten

Zitat von "drPHIP132"

an den text anpasst

#box
{
    display: inline-block;
}

Zitat von "drPHIP132"

so breit ist, wie der bereich, indem der div verschachtelt ist

#box
{
    display: block; /* wobei das eigentlich unnötig ist, da div's standartmäßig bei (neuen) browsern bereits "block" sind
}

Okay, also die Box ist immer 200px breit und die Länge soll dynamisch sein. Dann fällt mir nur eins, was etwas umständlich ist. Du machst zwei Bilder. Das eine Bild hat unten einen kleinen Abstand und dann kommt dieses grüne ziemlich lang. Es könnte am besten 200px X 1000px sein. Das andere Bild muss oben diesen Abstand haben und unten keinen. Dann arbeitest du mit CSS3 und mutliple Backgrounds. Das erste Bild setzt du unten uns es soll sich nach oben wiederholen (repeat-y) und das andere wiederholt sich nicht, sondern ist nur einmal ganz oben und verdeckt somit das erste Bild im oberen Bereich.

ODER:
Da du ja die Breite nicht änderst, kannst du auch mit drei Grafiken arbeiten. Oben, in der Mitte und unten. Wo ist das Problem? Das mittlere Bild lässt du einfach y-repeaten und die anderen beiden lässt du nicht wiederholen. Dürfte eigentlich funktionieren. Die Bilder müssten dann natürlich entsprechend aussehen

sorry, grade erst gelesen das es dir um die länge geht

die box (nicht die newsboxes) sondern das was drumherum ist:

außen_box
{
    min-height: 300px;
}

dann wird die länger wenn mehr inhalt ist^^

Zitat von "Shadow1911"

Danke dir, aber das oben ist auch schon genau das Problem

Manchmal muss man Kompromisse eingehen - solange es die Funktion der Box nicht beeinträchtigt, kannst du auch durchaus den Browsern, die das nicht verstehen eben keine "schicke" Box zeigen - funktionieren muss es (und gutes Aussehen ist Zusatz).

Ja, klar funktioniert das. Probier das mal aus

Bitte. Dafür sind wir da. Und gibt es schon Ergebnisse? Da bin ich mal gespannt, ob meine Lösung funktioniert...

Zitat von "shadow1811"

Mit z-index konnt ich es auch nicht in den Vordergrund schieben.

Bin mir nicht sicher, aber glaube z-index ist nur bei absolut und fixiert positionierten elementen verfügbar.

#div
{
    position: absolute;
    /* ist allerdings nötig dann noch mit top, right, left und bottom zu positionieren */
}

aber warte mal lieber noch darauf, bis einer eine andere idee hat, oder jemand meinen vorschlag unterstützt.
bin mir gerade nicht alzu sehr sicher.

gruß
phip

Vertausche mal die Grafiken für Inhalt und Ende bei background-image, wie du schon gesagt hast, überdeckt der Inhalt vermutlich das untere Bild.

z-index gilt für das gesamte Element, nicht für die einzelnen Hintergrundbilder, akzeptiert daher auch nur einen Wert. Dafür müsstest du das Element dann auch noch, wie Phip geschrieben hat, absolut oder relativ positionieren.
Das würde dir aber sowieso nicht weiterhelfen.

Du kannst z-index nicht so anwenden. z-index bezieht sich jetzt auf die Box nicht auf deren Hintergrundbilder! Bei der Angabe der Position solltest du bei zweitens vielleicht mal center center schreiben.

Also, was siehst du denn jetzt genau? Ein Bild wäre gut...

Zitat von "Sören"

absolut oder relativ positionieren.

[offtopic] relativ positionierte elemente sprechen auf z-index: an? dachte nur absolute und fixed...[/offtopic]

Zitat von "Yamram"

Ein Bild wäre gut...

Shadow1911: du könntest dir auch zum beispiel bei <!-- m --><a class="postlink" href="http://www.bplaced.net">http://www.bplaced.net</a><!-- m --> oder einem beliebigen anderen freehoster eine freie sub-domain machen und wir könnten in echtzeit deinen fortschritt sehen.
würde einiges leichter machen.

gruß
phip