Hilfe bei Text-Widget: Bilder richtig anordnen!

everydayliz · 27. Januar 2014

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:

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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!

Maria-Anne · 27. Januar 2014

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.

everydayliz · 27. Januar 2014

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

everydayliz · 27. Januar 2014

So sieht es aus nachdem ich alles kopiert und eingefügt habe von dir...
http://s7.directupload.net/images/140127/8cqvrx6k.png

everydayliz · 27. Januar 2014

Okay das <div id="bilderfeld"> hab ich jetzt über jedes bild mit balken einzeln eingefügt und nicht als ganzes. nun ist es aber auch nicht zentriert.
http://s14.directupload.net/images/140127/f52xno4q.png

everydayliz · 27. Januar 2014

Meine Sidebar ist 250 breit.
Wenn ich bei 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.

WPDE.org

Hilfe bei Text-Widget: Bilder richtig anordnen!

everydayliz Member

Maria-Anne Well-Known Member

everydayliz Member

everydayliz Member

everydayliz Member

everydayliz Member

Nützliche Suchen

Hilfe bei Text-Widget: Bilder richtig anordnen!

everydayliz Member

Maria-Anne Well-Known Member

everydayliz Member

everydayliz Member

everydayliz Member

everydayliz Member