zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css - Bild im <div> zentrieren ...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.09.2018, 15:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2018
Beiträge: 3
gerabel befindet sich auf einem aufstrebenden Ast
Standard css - Bild im <div> zentrieren ...

Hallo zusammen,
habe eine Frage zu meinem CSS, welches ich gerade für meine Website erstellen.

Zum Aufbau / Hintergrund:
Ich habe eine "Weiche" erstellt, die auf verschiedenen Websites führen soll.
Dazu habe ich 2 Kästen mit Bildern und Text aufgebaut.

Zu meiner Frage.
Im linken Kasten sind oben zwei Bilder (1. Bild und 2. Bild) zu sehen.
Diese sollen beide zentriert nebeneinander stehen.
Aktuell ist es so, das Bild 2 zentriert im <div> steht, das linke (1. Bild) aber links am Rand klebt.
Diese linke Bild bekomme ich einfach nicht zentriert …

Bitte hier live anschauen

Habe z.B. das hier probiert:
Wenn ich in Zeile 24 „align="left“ eingebe, stehen die beiden Bilder zwar nebeneinander, aber das 1. Bild klebt links am Rand.
Wenn ich in Zeile 24 „align=„center“ eingebe, stehen die beiden Bilder wieder untereinander.

(Das ganze soll auch responsiv funktionieren …)

Hat jemand einen Tipp für mich, was an meinem Code nicht stimmt?


Vielen Dank
Gerhard

Geändert von gerabel (19.09.2018 um 09:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.09.2018, 17:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

align gibt es nicht mehr und hat auch nichts mit CSS zu tun. Wenn du etwas ausrichten willst, dann verwende doch bitte auch CSS dafür.
Wozu brauchst du hier so viele verschachtelte divs, räume hier deinen Code doch etwas auf.

Zentrieren kannst du ein Bild, indem du text-align: center verwendest. Für einfaches zentrieren von mehreren Elementen verwende Flexbox.

Code:
<div style="
    display: flex;
    justify-content: space-around;
">	
					<img src="Files_Startseite/img/1.jpg" width="150"
"><img src="Files_Startseite/img/2.jpg" width="150">
					
                    </div>

______
CSS to add: 

img {height: 100%}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.09.2018, 18:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Als Erstes solltest du deinen Code überprüfen... zB gleich in Zeile 6 hast du ein ..
HTML-Code:
content=#"
stehen. Es fehlt dort ein doppeltes Anführungszeichen!!!
Richtig wäre
HTML-Code:
content="#"
So wie es da steht hast du den gesamten restlichen Code in Anführungszeichen gesetzt... eigentlich müsste der Browser das unzerkaut wieder ausspucken !

Nutze am besten mal den w3c Validator.
https://validator.w3.org/
Mit Zitat antworten
  #4 (permalink)  
Alt 18.09.2018, 20:11
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

und die anderen Zeilen wo eine rote Zahl vorsteht beinhaltet auch Fehler. In deinen Fall ist das meistens ein ; zu viel, oder halt ein anderer Fehler wie hier schon gesagt wurde
Mit Zitat antworten
  #5 (permalink)  
Alt 19.09.2018, 09:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2018
Beiträge: 3
gerabel befindet sich auf einem aufstrebenden Ast
Standard

Danke "cloned" für den Code-Schnipsel, und danke "Sailor56, basti1012" für den Tipp mit dem w3c Validator. Der ist wirklich sehr hilfreich.

Habe den Code jetzt mal überarbeitet und muss nun nur noch rausfinden, wie ich den beiden zentrierten Bildern im linken Kasten etwas Abstand nach oben gebe.

Viele Grüße
Gerhard
Mit Zitat antworten
  #6 (permalink)  
Alt 19.09.2018, 10:08
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gerabel Beitrag anzeigen
etwas Abstand nach oben gebe.

Viele Grüße
Gerhard



wie wäre es mit margin-top:25px; bzw padding-top; jenachdem was du genau vor hast

Geändert von basti1012 (19.09.2018 um 10:10 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 19.09.2018, 10:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von gerabel Beitrag anzeigen
Danke "cloned" für den Code-Schnipsel,
schön, dass es funktioniert. Du kannst natürlich auch das ganze mit einer Klasse lösen und der Klasse diese inline-styles hinzufügen, ich habe das nur quick & dirty gelöst.

Den Abstand kannst du erreichen indem du den Bildern einen margin-top gibst oder hier würde ich es fast besser finden, dem Container der Bilder ein padding-top geben, da der Abstand ja zum Container sein soll und unabhängig vom Inahlt sein soll. Dann kannst du auch mal einen Paragraph, etc. einfügen und hast immer den Abstand.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.09.2018, 10:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2018
Beiträge: 3
gerabel befindet sich auf einem aufstrebenden Ast
Standard

Nochmals danke
Jetzt sieht es gut aus.

Euch allen einen schönen Tag!
Mit Zitat antworten
Antwort

Stichwörter
css, zentrieren

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
CSS Tabs wie zentrieren? sele CSS 11 25.03.2013 13:16
CSS Menü (Liste) zentrieren SansArt CSS 1 17.02.2013 13:41
Ein mit HTML eingebundenes Bild mit CSS ausblenden marcp CSS 4 25.09.2010 19:08
Mouseover Bild Zentrieren superwasi CSS 4 13.07.2008 20:45
Bild vertikal zentrieren Cheops07 CSS 6 14.10.2006 11:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:36 Uhr.