Info Box mit CSS

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

michaelxxx

Neues Mitglied
25 Oktober 2019
13
0
1
44
Hallo,

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

info-box-css.jpg

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

Senior HTML'ler
26 November 2017
1.114
113
63
39
Minden
sebastian1012.bplaced.net
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.

Hier kannst du sehen ,egal wie viel man in den Textarea eingeben tut das die Box mit größer wird.
Da habe ich keine Größen Angaben 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 Eltern Elemente müßen 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

Neues Mitglied
25 Oktober 2019
13
0
1
44
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

Senior HTML'ler
26 November 2017
1.114
113
63
39
Minden
sebastian1012.bplaced.net
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

Senior HTML'ler
26 November 2017
1.114
113
63
39
Minden
sebastian1012.bplaced.net
kuck jetzt nochmal.
Die zweite Boc dadrunter 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
 

basti1012

Senior HTML'ler
26 November 2017
1.114
113
63
39
Minden
sebastian1012.bplaced.net
@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 ?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.555
301
83
67
Ja, das ist ein PNG-Bild, dieses Format unterstützt Transparenz. Dieses Bild war schon transparent, ich musste nur noch den Teil, der hinter den Papieren liegt, heraus schneiden. So etwas kann man mit jeder guten Bildbearbeitung machen. Ich selber habe Affinity Photo aber für den Anfang ist auch paint.NET ganz gut.
 
Werbung:

Latest posts