Tutorial HTML, CSS u. PHP - Forum

[Shadow1911]

Hi Community,

ich habe gerade ein Problem.
Via CSS möchte ich eine Art Nachrichtenbox für meine Website generieren. Nun möchte ich aber, dass die Länge dynamisch ist und dadurch automatisch die Länge der Box bestimmt wird. An Anfang und Ende der Box soll noch zusätzlich eine Grafik eingefügt werden, dass die Box quasi abgerundet wird.

Ihr könnt euch das so vorstellen:
|...................................|
|............Boxanfang...........|

|............Boxinhalt............|

|............Boxende.............|
|-----------------------------------|

Drei verschiedene Grafiken, Anfang und Ende sollen automatisch die Box abschließen, egal wie lang der Inhalt ist.

Schonmal vielen Dank für qualmende Köpfe und gute Antworten (:

Liebe Grüße,
Shadow

[Yamram]

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

Code: Alles auswählen

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:

Code: Alles auswählen

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.

[drPHIP132]

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

Code: Alles auswählen

#box
{
display: inline-block;
}


[webmaster3000]

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?

[Yamram]

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:

Code: Alles auswählen

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 DDD

[Shadow1911]

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

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

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?

Webmaster liegt richtig ;)
Das ist so eine Art "News-Box" die dezente 200px breit ist.

----------

So, ich habe jetzt mal eine Beispielbox im Anhang.

[drPHIP132]

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

an den text anpasst

Code: Alles auswählen

#box
{
    display: inline-block;
}


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

Code: Alles auswählen

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


[Yamram]

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

[drPHIP132]

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

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

Code: Alles auswählen

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


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

[lauras]

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

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

[Shadow1911]

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

Funktioniert das dann auch, wenn ich mehrere solcher Boxen in diesem Bereich haben will?
Also die Boxen sind via <ul><li> eingetragen, also wie eine Navigation.

[Yamram]

Ja, klar funktioniert das. Probier das mal aus

[Shadow1911]

Ja, klar funktioniert das. Probier das mal aus

Okay, danke ;)

[Yamram]

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

[Shadow1911]

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

Deine Lösung funktioniert sogar super ;)
Ich habe nur das eine Problem, dass mir das Ende nicht angezeigt wird, das liegt aber sicher an mir.
Mit z-index konnt ich es auch nicht in den Vordergrund schieben.

Hier mal der Code:

Code: Alles auswählen

ul#news li {
   background-image: url(Design/news_t.jpg), url(Design/news_c.jpg), url(Design/news_b.jpg);
   background-repeat: no-repeat, repeat-y, no-repeat;
   background-position: top center, center, bottom center;
   z-index: 1, 3, 2;
   width: 150;
   list-style: none;
   padding: 25 25 25 25;
   font-size: 20;
}

So sieht man den Kopf, den dynamischen Inhalt, aber leider nicht das Ende, wobei ich nicht weiß, ob er das Ende gar nicht darstellt, oder ob es vom Inhalt überdeckt wird.