zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild mittig platzieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.11.2021, 00:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard Bild mittig platzieren

Guten Abend,
ich versuche seit über einer Stunde meine Bilder innerhalb der Divs mittig zu platzieren, und bekomme es einfach nicht hin.
Momentan versuche ich mich an Baumhaus 1 auf dieser Seite:
https://www.wipfelglueck.de/nBaumhaus.php
Es scheint mittig platziert zu sein, aber wenn ich mir in der Konsole das CSS anschaue, und z.B. von Klasse "Normal" zur Klasse "HousePic" springe, dann passt da etwas nicht. Und so möchte ich das auf keinen Fall stehen lassen.
Stimmt da etwas mit der Vererbung der Parameter nicht? Spreche ich die Elemente falsch an?
Vielen Dank für Eure Hilfe!
Gruß
Stefan
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.11.2021, 09:03
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

Was meinst du mit "mittig platzieren"? Das sind sie doch schon?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.11.2021, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

Leider nur fast. Es ist einfach nicht sauber programmiert, und das stört mich.
Mit diesem Code habe ich allerhand Varianten versucht:
Code:
.HousePic
			{
				/* width: 90%; */
				/* height: auto; */
				/* float: top; */
				/* align: center; */
				/* padding: 40px ; */
				/* margin: 40px; */
				/* position: relative; */
			}
			
			.HousePic, img
			{
				width: 100%;
				height: auto;
				/* float: top; */
				align: center;
				padding: 40px ;
				/* margin: 40px; */
				position: relative;
			}
Ich habe zwar schon einiges mit CSS gemacht, auch Animationen, es kann aber trotzdem gut sein dass hier fürchterliche Anfängerfehler drinne sind. Ich hab's halt nie richtig gelernt.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.11.2021, 11:22
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

Meine Frage bleibt, wie möchtest du die Bilder zentrieren? Horizontal? Vertikal? Bezogen auf welchen Container? Wo sind sie es denn nicht?
Mit Zitat antworten
  #5 (permalink)  
Alt 18.11.2021, 11:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

Horizontal in dem Fall.
Die Überschrift steht z.B. mittig.
Wenn ich mir mit der Konsole der Firefox die CSS anschaue dann passt das auch noch für das Div mit der Klasse "Normal". Wenn ich dann auf das Div mit der Klasse "HousePic" gehe sehe ich dass das nicht mehr mittig ist (auch wenn das Bild dann letztendlich horizontal wieder in der Mitte zu sein scheint).
Verstehst Du was ich meine mit der Konsole? Die zeigt doch immer schön wenn ich im DOM das Div anwähle wie das Div im Browser dargestellt wird, mit allen Margin und Padding etc.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.11.2021, 12:17
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Zitat:
Zitat von Dachlatte Beitrag anzeigen
...
Code:
			...
			.HousePic, img
			{
			...
...
Durch das Komma werden nicht nur img-Elemente angesprochen, die sich innerhalb eines Elements deiner Klasse .HousePic befinden, sondern ALLE Elemente mit der Klasse .HousePic UND ALLE img-Elemente.

Ist das beabsichtigt?

Davor verpasst du durch
Code:
			.SinglePic, img
			{
				width: 40%;
				height: auto;
				float: right;
				padding: 30px;
			}
auch ALLEN Bildern ein float: right;

(Ach ja, "float: top" und "align: center" gibt es nicht. Für letzteres kannst du eventuell "text-align:" nutzen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 18.11.2021, 22:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2021
Beiträge: 24
Dachlatte befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank erst mal für die Hinweise!
Das war so nicht beabsichtigt. Wenn ich das Komma weg lasse, dann spreche ich nur das img innerhalb der jeweiligen Klasse an?

Ich hab es jetzt mit diesem Code so gemacht dass es passt:
Code:
<div class="HousePic"><a href='/nBarrierefreiesBaumhaus1.php'><img  width="600" height="300" src="/media/Platzhalter.webp" alt="Bad in unserem barrierefreien Baumhaus" /></a></div>
Code:
.HousePic img
{
width: 100%;
height: auto;
position: relative;
}
Vielen Dank!!
Mit Zitat antworten
  #8 (permalink)  
Alt 19.11.2021, 12:16
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Gerne doch.

Ganz nebenbei würde ich dir empfehlen deine Seite gelegentlich in den Validator zu schmeißen.

HTML:
https://validator.w3.org

CSS:
https://jigsaw.w3.org/css-validator/
Mit Zitat antworten
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
bild per css mittig setzen irmen CSS 4 25.08.2014 12:38
Bild mittig ausrichten heohni CSS 2 05.03.2012 15:19
Bild innerhalb eines Textfeldes platzieren thomas78 (X)HTML 13 17.12.2009 19:56
Text mittig neben Bild ausrichten prm CSS 5 10.02.2007 11:19
Bild im Container mittig positionieren... 18inch CSS 5 09.07.2005 15:48


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