Hilfe bei Text-Widget: Bilder richtig anordnen!

    Hallo. Ich bin völlig verzweifelt und probiere an diesem blöden Code rum.
    Auf meiner Seite everydayliz.de findet ihr in der Sidebar 3 Buchcover mit Fortschrittsbalken.
    Die möchte ich aber nebeneinander darstellen. Also 2 nebeneinander (mittig) und eines unten drunter (mittig).
    Das ist der Code:

    Und folgende Beschreibung habe ich bekommen:
    "Die werden nicht automatisch nebeneinander angezeigt, denn wenn du den Code mit dem Balken kopierst werden die Elemente ja in der Reihenfolge Bild - Balken - Bild - Balken angezeigt. Da muss man die zwei Bild Elemente untereinander schreiben und darunter dann zweimal den Code für den Balken. Wenn alles dann klein genug ist, wird es aber automatisch nebeneinander angezeigt."

    Tja also habe ich es versucht und das kam dabei raus:
    http://s14.directupload.net/images/140127/f4om29r4.png

    Da hab ich das center weg gemacht weil ich dachte es nützt was.
    Ich sehe auch kein "p" was einen Zeilenumbruch erklären würde.

    Der Code ist nicht von mir geschrieben! Zu finden ist er unter wort-gewalt.blogspot.de

    Kann jemand helfen?

    So soll es im Grunde aussehen: http://s1.directupload.net/images/140127/qkgws6hm.png

    DANKE!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo,
    ich würde im CSS ein Div oder eine Klasse anlegen, wo ich die Möglichkeiten angeben kann, wie die Bilder erscheinen sollen, also mittig, oder linksbündig, nebeneinander etc. Wobei nebeneinander nur geht, wenn der geplante Platz (bilderfeld) ausreicht, auch die margins und padding beachten.
    Diese Klasse muss dann vor deinem Code mit <div id="bilderfeld"> und am Ende wieder ein schließendes </div> bekommen

    und so etwa im CSS stehen:

    /* bilderfeld für den Platz der Bilder */
    #bilderfeld {
    width=300px;
    height:auto; /*300 px breit ist der geplante Platz des Bilderfeldes in meinem Beispiel*/
    float:left; /*oder auch float:right; wie gewünscht*/
    margin: 20px; /*das ist der Abstand des gesamten Bilderfeldes rundherum, kann man aber auch ändern*/
    /* mit margin-left oder margin-right kannst Du das gesamte Bilderfeld nach rechts oder nach*/
    /*links verschieben*/
    }

    /* Eigenschaften der Bilder*/
    #bilderfeld img {
    float:center;
    margin: 10 px; /* Abstand der Bilder, alle 4 Seiten, d.h. zwischen 2 Bildern sind es dann 20px, je nach /* Platzbedarf*/
    margin-bottom: 20px; /* ist der Abstand am unteren Bilderrand*/
    }

    dann musst du noch die Schrift formatieren, wahrscheinlich, weil sie ja jetzt unter dem neuen "div" steht.

    kennst Dich ein wenig aus mit CSS?

    viel Spaß M.

    Hallo, danke erstmal für die Hilfe! :)

    Nein leider garnicht. So eine Aufteilung (ein Teil hier, einer da) habe ich bisher immer vermieden weil ich keinen Schimmer hab was wo und wie hin muss. Mit copy&paste komme ich klar ;)

    Meine Sidebar ist 250 breit.
    Wenn ich bei [COLOR=#333333]width=300px; das = in ein : umändere kann ich auch mit den werten spielen. es ist dann zwar zentriert aber nicht mehr nebeneinaner sondern untereinander. :([/COLOR]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden