zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Divs mit 3 Bildern Inhalt (Abstand lässt sich nicht einstellen)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.03.2018, 15:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2018
Beiträge: 5
TimB. befindet sich auf einem aufstrebenden Ast
Standard Divs mit 3 Bildern Inhalt (Abstand lässt sich nicht einstellen)

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>

Geändert von TimB. (22.03.2018 um 15:11 Uhr) Grund: Code für Lesbarkeit angepasst
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.03.2018, 22:30
Benutzer
neuer user
 
Registriert seit: 23.01.2018
Beiträge: 49
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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

Habe dir mal 2 Beispiele gemacht.
Wenn die abstände kleiner sein sollen musst du width:100% verkleinern
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.03.2018, 22:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2018
Beiträge: 5
TimB. befindet sich auf einem aufstrebenden Ast
Standard


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
Mit Zitat antworten
  #4 (permalink)  
Alt 24.03.2018, 00:31
Benutzer
neuer user
 
Registriert seit: 23.01.2018
Beiträge: 49
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 24.03.2018, 08:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2018
Beiträge: 5
TimB. befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 25.03.2018, 05:07
Benutzer
neuer user
 
Registriert seit: 23.01.2018
Beiträge: 49
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 25.03.2018, 16:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.03.2018
Beiträge: 5
TimB. befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 28.03.2018, 08:55
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.11.2005
Beiträge: 1.221
AndreasB wird schon bald berühmt werden
Standard

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.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 28.03.2018, 09:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.807
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.03.2018, 09:26
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.11.2005
Beiträge: 1.221
AndreasB wird schon bald berühmt werden
Standard

@cloned

Ich bin nicht einig mit Dir.

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

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:40 Uhr.