css neuling möchte foto skalieren !! bitte um HILFE!!

1. offizieller Beitrag

    hallo bin neu und unerfahren in ccs möchte ein foto skalieren auf 200px auf 200px in format.css datei fusstopbox-1b jedoch wird mir das bild im größer angezeigt egal was ich in css bzw html schreibe .. wer kann mir tipp geben

    hier die format.css datei


    /* ############################################################ */
    /* bereich fusstop */
    /* ############################################################ */


    .fusstop-main {text-align:center;
    padding:0;
    margin:0 auto;
    color:#fff;
    border-top:solid .4rem #6C7E5F;
    background:#596B4D;
    background:linear-gradient(to bottom,#3a3a3a, #596B4D );
    }

    .fusstop-main h3 {margin:1rem 0;text-align:left;
    color:yellowgreen;
    font-size:1.6rem;
    border-bottom:dotted .1rem gold;
    }


    .fusstop {display:table;width:100%;
    vertical-align:top;
    height:20rem;
    margin: 0 auto;
    padding:2rem 0;font-size:1.4rem;
    }

    .fusstopbox-1a {display:block;
    padding:1rem ;
    text-align:left;
    }

    .fusstopbox-1b {display:block;
    padding:2rem;
    text-align:left;

    }

    /* contact */

    .fusstopbox-1a .contact .fa {
    width:2rem;
    color:yellowgreen ;
    }

    .fusstopbox-1a .contact {width:26rem;
    padding:0rem;
    margin:0 auto;
    }

    .fusstopbox-1a .contact ul {text-align:left;
    padding:0rem;
    margin:0;
    }

    .fusstopbox-1a .contact li {list-style:none;
    padding:0rem;
    margin:0;
    }


    /* ############################################################ */
    /* fusstop-menu */
    /* ############################################################ */


    und hier die dazugehörige html datei:


    <li><i class="fa fa-road"></i>Segel-Sport-Fisch-Weg 18</li>
    </ul>
    </div>

    <br>

    <div class="contact">
    <h3>Kontakt</h3>
    <ul>
    <li><i class="fa fa-phone"></i>Phone: (0000) 2468246</li>
    <li><i class="fa fa-tablet"></i>Mobile : (+49) 0000-1234567</li>
    <!-- ############################################################ -->
    <!-- fusstop bereich -->
    <!-- ############################################################ -->

    <div class="fusstop-main">
    <div class="fusstop">


    <div class="fusstopbox-1a">

    <div class="contact">
    <h3>Adresse</h3>
    <ul>
    <li><i class="fa fa-home"></i>Familie Sch&ouml;nheim</li>
    <li><i class="fa fa-map-marker"></i>12345 Gro&szlig;ersee</li>
    <li><i class="fa fa-fax"></i>Fax: (0000) 7654321-4141</li>
    </ul>
    </div>
    </div>
    <div class="fusstopbox-1b"><!-- Menü -->
    <div class="fusstop-menu">
    </ul>
    </div>
    <!-- Menü ende -->
    </div>

    </div>
    </div>

    <!-- ############################## fusstop ENDE ############################## -->

    <!-- ############################################################ -->
    <!-- fuss bereich -->
    <!-- ############################################################ -->


    das foto mit 200x 200 px sollte rechts neben der Adressen - Kontaktdaten in der fusstopbox-1b sichtbar sein.

    für eure hilfe bedanke ich mich mal gleich im voraus

    Gruß Schwoaz

    Hallo

    Mit deinen Quellcodeschnipseln können wir leider wenig anfangen. Zudem fehlt uns das Bild.

    Deshalb wäre ein Link zu der Seite sinnvoller.

    Wenn du Elemente nebeneinander stellen willst solltest du dich mit Flexbox beschäftigen.

    Grafiken sollte in einem Zeichenprogramm auf die Größe skaliert werden, in der sie maximal angezeigt werden sollen. In deinem Fall also 200px mal 200px. Auch um Besuchern Ladevolumen und -zeit zu sparen. CSS zum Skalieren von Grafiken ist immer nur ein Notnagel, außer Grafiken sollen flexibel angezeigt werden.

    Gruss

    MrMurphy


    hallo MrMurphy

    danke zuerst mal für die super schnelle Antwort.
    Habe das foto schon auf 200x 200 px erstellt aber es erscheint immer ganz unten rechts in voller Box größe wenn ich es einfüge.
    Hier der Link zur seite http://www.schwoaz.de
    möchte in rechter spalte neben der Adresse - Kontakt ein foto mit eben den 200 x 200 px einfügen.
    und ja Layout sollte sich dem Gerät anpassen in dem man es betrachtet ( PC, Tablet oda Handy )

    LG Schwoaz