Bildgröße in CSS ausgliedern

  • Hallo zusammen,

    ich erstelle gerade eine Webseite und habe folgenden HTML-Code:

    <div id="kopfbereich">
    <h1>Titel</h1>
    <img src="bildhop.jpg" width="182px" height="182px" />
    <img src="bildtol.jpg" width="182px" height="182px" />
    <img src="bildtb.jpg" width="182px" height="182px" />
    <img src="bildbp.jpg" width="182px" height="182px" />
    <img src="bildspc.jpg" width="182px" height="182px" />
    </div>

    Die Bildgrößen muss ich in CSS ausgliedern, weiß aber nicht, wie es geht. Alle 5 Bilder sollen auf jeder Seite immer am Seitenanfang angezeigt werden und müssen die gleiche Größe haben.

    Meine CSS-Datei sieht für diesen Bereich bisher so aus:

    <style type="text/css">
    <!--
    #kopfbereich {
    background-color:#E0E0E0;
    height:270px;
    text-align:left;
    font-size:2em;
    padding:0.4em 0.4em 0 0.4em;
    }
    -->
    </style>

    Ich habe einen Hintergrund mit Farbe und Größe definiert (s.o.), der auch richtig dargestellt wird. In diesen Hintergrund sollen nun die 5 Bilder eingefügt werden. Kann mir jemand sagen, wie das geht?

    Vielen Dank!

  • wenn wirklich alle Bilder 182px 182px sind, kannst ja dem div die höhe von den bildern geben. kommt drauf an sollen die bilder nebeneinander, dann eignet sich vielleicht eine unsortierte liste mit display: inline;

  • Die Bilder werden bereits alle nebeneinander angezeigt, so wie es sein soll. Ich muss nur die Höhen- und Breitenangaben aus HTML raus nehmen (obwohl so alles funktioniert, wie ich es im Code gepostet habe) und in CSS definieren, jedoch klappt das nie richtig, daher weiß ich nicht, was ich falsch mache, weil dann immer etwas falsch dargestellt wird?!

  • Wenn alle Bilder die gleiche Größe haben, dann kannst du ihnen eine klasse zuweisen.
    Statt bisher

    Code
    <img src="bildspc.jpg" width="182px" height="182px" />


    z.B.

    Code
    <img src="bildspc.jpg" class="groesse182" />

    und hierzu CSS:

    Code
    .groesse182 {
    width: 182px;
    height: 182px;
    }

    Bei unterschiedlichen Größen kannst du dementsprechend unterschiedliche Klassen verwenden.

  • Alles, was ich in CSS versucht hatte, um aus dem HTML Code die Höhen- und Breitenangaben rauszunehmen hat nicht funktioniert, das habe ich alles wieder gelöscht. Ich möchte diese beiden Angaben also nur bei allen 5 Bildern aus HTML raus nehmen und die Größe für diese Bilder in CSS festlegen. Und genau da weiß ich nicht, was ich bei CSS machen soll. Das müsste wahrscheinlich in einen eigenen DIV-Container, oder? Aber auch da weiß ich nicht, wie ich definieren kann, dass die Bilder gleich groß dort angezeigt werden, wo sie hin sollen.

  • ja und?? EIn Bild hat eine grösse und wenn du dem div oder was auch immer eine feste breite und höhe gibst dann wird halt nur das angezeigt, ist es grösser kannst du noch die position bestimmen