Divs mit 3 Bildern Inhalt (Abstand lässt sich nicht einstellen)

TimB. · #1 (**permalink**) 22.03.2018, 15:07

Hallo, meine letzte Hoffnung, das xHTML Forum.
Ich erstelle gerade für eine Freundin eine neue Website (Wordpress).
Auf einer Seite ist mir zuviel Weißer Space, also wollte ich mit einem DIV 3 Bilder einsetzten (Über Slider u.ä. gefällt mir die Lösung nicht).
Das hat auch ganz gut geklappt, aber um das einfach anschaulicher zu gestallten, soll zwischen den Bildern ein kleiner Abstand um den Hintergrund zu sehen...
Da sich meine html und CSS Kenntnisse in Grenzen halten, schaffe ich es einfach nicht dieses siplme Vorhaben um zu setzten.
Verschiedene Padding, float, magin befehlte habe ich schon ohne Erfolg probiert umzusetzten (evtl sogar einfach falsch umgesetzt.
Die Website mit den Bildern befindet sich hier: Schönheitsreich

Dort kann man sich die Bilderanordnung anschauen, den Code füge ich bei.
Evtl kann mir jemand einen Tipp geben wie ich das richtig umsetzten kann.
Bitte entschuldigt, falls der Code völlig falsch aufgebaut ist, freue mich jedoch über verbesserungen

Viele Grüße
Tim

HTML-Code:

<div style="background-color:#feebf8;padding:3px;border:solid 7px;">
<img src="https://xn--schnheitsreich-xpb.de/wp-content/uploads/2018/03/Schminkkurs-in-Mainz-Moll-1.jpg"/>

<img src="https://xn--schnheitsreich-xpb.de/wp-content/uploads/2018/03/Mainz-Schminkkurs-1.jpg"/>

<img src="https://xn--schnheitsreich-xpb.de/wp-content/uploads/2018/03/Schminkkurs-für-Visagisten-1.jpg"/>
</div>

basti1012 · #2 (**permalink**) 22.03.2018, 22:30

https://codepen.io/basti1012/pen/RMgKEB

Habe dir mal 2 Beispiele gemacht.
Wenn die abstände kleiner sein sollen musst du width:100% verkleinern

TimB. · #3 (**permalink**) 22.03.2018, 22:36

du hast mir schon ein fertigen Code geschrieben, der Hammer

1000 Dank dafür.

Das (bitte hau mich jetzt nicht für diese Anfänger Frage) CSS füge ich einfach dazu ein?

Gruß und danke dir noch mal.

Tim

basti1012 · #4 (**permalink**) 24.03.2018, 00:31

Fals du schon eine Css datei hast du fügst du die zeilen einfach dazu.
ansonsten machst du oben im head bereich

Code:

<head>
<style>
#div1{
width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

#div2{
width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
</style>
</head>

Die <head> solltest du schon haben. also dann von<style> bis </style>mit in den head einfügen.

Und dran denken das du im html bereich deinen Bilder bzw den divs die ids gibst die ich benutzt habe.Sonst weis der css Code ja nicht auf was er das anwenden soll.

Du brauchst aber nur div1 oder div2 nehmen ,weil sind ja 2 verschiedene Beispiele.Must du mal kucken welches Beispiel der am besten gefällt

TimB. · #5 (**permalink**) 24.03.2018, 08:07

Danke für deine Antowrt.
Ich hab`s hin bekommen

Jetzt werde ich schon ganz übermütig:
Wenn ich eine Mouseover- Funktion einfügen möchte (z.B. beim drüber fahren wird ein anderes Bild angezeigt oder verändert die Farbe etc) ist das ein HTML Code, oder muss sowas auch ins CSS oder sogar wieder jeweils ein Code.

Du siehst ich versuche dazu zu lernen

danke dir nochmal, Ergebnis kannst du dir gerne mal anschauen

Gruß Tim

basti1012 · #6 (**permalink**) 25.03.2018, 05:07

Mit der Maus andere Bilder einblenden beim Hovern geht zb so mit Css
https://codepen.io/basti1012/pen/yKorbY

Mit Javascript kann man es auch machen,aber immer wenn es auch ohne JS geht ist eine Css Lösung doch besser

TimB. · #7 (**permalink**) 25.03.2018, 16:18

Sehr cool, vielen dank.
ich versuche das mal umzusetzten.

Falls du eine Website hast, und mal Hilfe bei SEO benötigst, werde ich mich revanchieren

Gruß
Tim

AndreasB · #8 (**permalink**) 28.03.2018, 08:55

Aus reiner Neugier zu Wordpress:

Wisst ihr, warum Wordpress ein div statt eines figure als Container für Bilder verwendet?

Und warum werden immer diese endlos langen absoluten Pfade verwendet, statt kurzer relativer?

Oder Inlinestyles statt der Angabe im externen Stylesheet?

Ich rätsele über die Motive der Entwickler von Wordpress.

cloned · #9 (**permalink**) 28.03.2018, 09:09

Was hat das denn jetzt mit "Divs mit 3 Bildern Inhalt" zu tun? Auch wenn es für dich nur eine nebenfrage ist darf dazu doch ein eigenes Thema eröffnet werden denke ich. Es ist ja nicht so, dass die Anzahl an neuen Themen hier sonst unüberschaubar ist

AndreasB · #10 (**permalink**) 28.03.2018, 09:26

@cloned

Ich bin nicht einig mit Dir.

Hinweise zu sinnvollerem Markup sollte hier in jedem Thread ausdrücklich gewünscht sein.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
header verrutscht...	weblearner	CSS	6	03.12.2008 19:34
iframe alternative mit divs aber viel Inhalt	donhoolio	(X)HTML	3	12.03.2005 01:44
Browser-Problem bei Positionierung von DIVs	mickropixel	CSS	3	20.09.2004 16:25
Ratschläge bei Publizierung eines fertigen Layouts gesucht	Black Fladder	CSS	55	05.09.2004 14:30
Problem mit verschachtelten Div's	Sombreo	CSS	9	22.07.2004 21:49