XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild mittig platzieren (http://xhtmlforum.de/showthread.php?t=74291)

Dachlatte 18.11.2021 00:29

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

cloned 18.11.2021 09:03

Was meinst du mit "mittig platzieren"? Das sind sie doch schon?

Dachlatte 18.11.2021 09:50

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. :(

cloned 18.11.2021 11:22

Meine Frage bleibt, wie möchtest du die Bilder zentrieren? Horizontal? Vertikal? Bezogen auf welchen Container? Wo sind sie es denn nicht?

Dachlatte 18.11.2021 11:39

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.

top 18.11.2021 12:17

Zitat:

Zitat von Dachlatte (Beitrag 554958)
...
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.)

Dachlatte 18.11.2021 22:00

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!!

top 19.11.2021 12:16

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/


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023