Info Box mit CSS

[michaelxxx]

Hallo,

ich würde gerne eine variable Info Box mit CSS erstellen. Vom optischen so ähnlich wie die hier:



Mein Problem ist, das die Box ja in Ihrer Breite und Höhe variabel sein soll, je nachdem welchen Inhalt ich dort platziere.
Mein Frage: kann man das überhaupt mit so einer Vorlage und CSS irgendwie machen?

Danke für Eure Hilfe.

Viele Grüße
Michael

 

[basti1012]

Ich weiß noch nicht, was du genau meinst.
Normalerweise ist das kein Problem wenn man keine Festen Größen angaben hat.
Zb hier ein Beispiel.

https://basti1012.bplaced.net/index.php?ordner=html&id=706

Hier kannst du sehen ,egal wie viel man in den Textarea eingeben tut, dass die Box mit größer wird.
Da habe ich keine Größenangaben gemacht.
Wenn du da zb height:100px eingeben tust bei id Box, dann wird die nicht größer als 100px.
Es wäre auch wichtig zu wissen was deine Box für CSS Werte hat?
Auch die Elternelemente müssen dann auch mit größer werden. ( die Werte müßte man auch kennen)

An besten wäre es wenn du uns ein Link zu deiner Seite gibst und erklärst wo du so eine Box haben willst dann können wir dir mehr sagen wie man das an besten macht

 

[michaelxxx]

Hi Basti,

Danke für Deine Antwort. Das sich eine Info Box generell an die größe des Textes anpasst, ist kein Problem. Das habe ich bis jetzt auch so - allerdings nur mit einer normalen "Info Box", also quasi Text mit Rahmen.

Was ich suche, ist eine Box in CSS nach dem Vorbild von dem Design oben.

Also die 2 übereinanderliegenden Boxen, wobei die hinterne leicht gedreht ist, zusammen mit der Heftklammer. Kann man das mit CCS umsetzen?

 

[basti1012]

Denke schon.
Das es 2 boxen sind und die eine etwas gedreht glaube ich noch nicht mal.
Könnte sein das es mit box-shadow gemacht ist .
Die Heftklammer könnte auch eine svg oder vector Grafik sein.

Ich muß aber auch mal Goggeln gehen ob ich eine Heftklammert finde die mit Css erstellt wurde .

 

[basti1012]

guck jetzt nochmal.

https://basti1012.bplaced.net/index.php?ordner=html&id=706

Die zweite Box darunter kann man mit after machen.
Die Büroklammer mit before.

Dann geht das auch alles.
Wenn ich jetzt nee Büroklammer gefunden hätte, die einen transparenten Hintergrund hätte dann wäre es noch besser, doch leider keine gefunden und wie die Bilder heißen die kein Hintergrund haben weiß ich auch nicht

 

[michaelxxx]

Sehr cool, Danke!

 

[basti1012]

@Sempervivum du hast von Bilder und co ja sehr viel ahnung.
Die Büroklammer die du benutzt, habe ich vergebens im Netz gesucht.
Die hatten alle keinen durchsichten Hintergrund und deshalb auch nicht wirklich geeignet für dieses vorhaben.

Haben die art von Bildern einen bestimmten Namen ?
Ich hatte auch noch Svg und so gesucht aber daran scheint es wohl nicht zu liegen da dein Bild Png ist .

Gibt es dafür ein Tool womit man Hintergrunde Transparent machen kann ?