[Frage] Bild mit Rahmen TYPO3-Version: -

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    23. 05. 2015, 19:37

    Hallo alle zusammen,

    laufe irgendwie im Moment nicht rund mit HTML und CSS. Die ganz einfachen Basis-Sachen laufen nicht mehr und ich verstehe nicht warum. Ich wollte ein Bild ganz einfach mit einem Rahmen der 3px von den Bildrändern entfernt ist und habe Folgendes:

    HTML:
    <div class="rahmen"><img src="test.jpg" alt="not working" width="100%"></div>

    CSS:
    .rahmen{

    width: 12%;
    border-style:solid;
    border-width:1px;
    border-color:#dddddd;
    padding:3px;
    }

    Es funktioniert zwar, allerdings ist der Abstand vom unteren Bildrand zum Rahmen deutlich mehr als 3px. Zumindest stellen das alle meine Browser (Firefox, Safari und Chrome) so dar. Habs sinnloserweise auch schon mit margin:0; und float, etc. versucht. Aber siehe Bild im Anhang.

    Ich verstehe es nicht. Könnte das Padding künstlich auf 3px 3px 0 3px; setzen, aber warum? Danke im Vorab für Eure Hilfe.

    P.S. Abstand nach unten ist sogar 6px.

    Anhänge (1)
    abstand.jpg image/jpeg 0,00 B 97 heruntergeladen

  • 1
  • ejoo ejoo
    R2-D2
    0 x
    95 Beiträge
    7 Hilfreiche Beiträge
    25. 05. 2015, 10:14

    Hallo sunlite,
    Hab Deinen Code hier ausprobiert:
    [url]http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2[/url]
    und er funktioniert tatsächlich auch dort so, wie bei Dir.

    Wenn Du aber die border-styles auf das img-tag beziehst, dann funktioniert es:

    1. <div><img class="rahmen" src="test.jpg" alt="not working"></div>

    1. .rahmen{
    2.  
    3. width: 12%;
    4. height: auto;
    5. border-style:solid;
    6. border-width:1px;
    7. border-color:#dddddd;
    8. padding:3px;
    9. }

    Width für das Bild musst Du dann nicht direkt setzen, im CSS ist das height:auto notwendig.

    LG Ejoo

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    26. 10. 2015, 22:00

    Hi Ejoo,

    vielen Dank für die Antwort ;)

  • 1