Thomas1981: drei Bilder mit Text über CSS positionieren

Benötige Hilfe bei CSS, bin absoluter Neuling.

Wollte drei Bilder mit Text über CSS positionieren so wie im Bild "BildEntwurf.JPG" aber irgendwie habe ich, da ein kleines Probleme siehe "BildBrowser.JPG" bei den ich Hilfe benötige.

  1. Die drei (id="indalt_xx") sollten alle von oben denn gleichen Abstand haben 25px und nicht versetzt sein.
  2. Der Text sollte nach 200px ein Zeilenumbruch machen macht er aber nicht. Die Breite von der (id="text_xx") ist 200px.

mfg Thomas

inhalt.css

#inhalt {
	width: 1280px;
	background-color: #ffffff;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#inhalt_1 {
	width: 250px;
	background-color: #ffffff;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: 132px;
}
#inhalt_2 {
	width: 250px;
	background-color: #ffffff;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: 515px;
}
#inhalt_3 {
	width: 250px;
	background-color: #ffffff;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: 898px;
}
#bild_1 {
	width: 200px;
	background-color: #ffffff;
	height: 125px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	background-image: url(bild_1.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#bild_2 {
	width: 200px;
	background-color: #ffffff;
	height: 125px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
    	border-radius: 20px;
	background-image: url(bild_2.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#bild_3 {
	width: 200px;
	background-color: #ffffff;
	height: 125px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	background-image: url(bild_3.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#text_1 {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding-left: 10px;
	background-color: #ffffff;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	width: 200px;
	padding-right: 10px;
}
#text_2 {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding-left: 10px;
	background-color: #ffffff;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	width: 200px;
	padding-right: 10px;
}
#text_3 {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding-left: 10px;
	background-color: #ffffff;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	width: 200px;
	padding-right: 10px;
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="inhalt.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>
<body>

<div id="inhalt">
	<div id="inhalt_1">
		<div id="bild_1"></div>
		<div id="text_1">
			TestTextTestTextTestTextTestText
		</div>
	</div>
	<div id="inhalt_2">
		<div id="bild_2"></div>
		<div id="text_2">
			TestTextTestTextTestTextTestTextTestText
		</div>
	</div>
	<div id="inhalt_3">
		<div id="bild_3"></div>
		<div id="text_3">
			TestTextTestTextTestText
		</div>
	</div>
</div>

</body>
</html>

BildBrowser.JPG

BildEntwurf.JPG

  1. Hallo

    Schwierig.

    Hauptproblem: Dein Wissensstand ist total veraltet. XHTML wurde so bereits vor 10 Jahren offiziell begraben und sollte seitdem nicht mehr verwendet werden.

    Verwende HTML5. Dann kannst du auch gleich die div-Suppe über Bord kippen.

    Das Layout dann mit Flexbox oder CSS-Grid.

    Für Zeilenumbrüche sind Leerzeichen erforderlich.

    Gruss

    MrMurphy

    1. Für Zeilenumbrüche sind Leerzeichen erforderlich.

      Jain.
      Siehe:

  2. Servus!

    Benötige Hilfe bei CSS, bin absoluter Neuling.

    👍 Dann hast Du dir noch nichts falsches angewöhnt!

    Zum Einstieg:

    Wollte drei Bilder mit Text über CSS positionieren so wie im Bild "BildEntwurf.JPG" aber irgendwie habe ich, da ein kleines Probleme siehe "BildBrowser.JPG" bei den ich Hilfe benötige.

    Tipp: Verwende semantisches HTML, damit dein Markup „lesbarer“ wird:

    <article class="gallery">
      <figure id="inhalt_1">
     		<img src="bild_1.jpg" alt="Beschreibungstext">
     		<figcaption>
     			TestTextTestTextTestTextTestText
     		</figcaption>
     	</figure>
      <figure id="inhalt_2">
      ...
    

    Für diese drei figure-Elemente benötigst du jeweils nur den gleichen CSS-Code.

    Ideen für die Präsentation findest du hier:

    1. Die drei (id="indalt_xx") sollten alle von oben denn gleichen Abstand haben 25px und nicht versetzt sein.

    Das geht mit grid Layout:

    .gallery {
      	display: grid;
      	grid-template-columns: repeat(3, 1fr);
      	grid-gap: 1em;
    }
    

    Damit legst du für das Elternelement article mit der class gallery (Kann man anstelle einer id mehrfach verwenden) 3 Spalten an, die je ein Drittel des verfügbaren Platzes einnehmen.

    Kindelemente verteilen sich jetzt automatisch ohne weiteres CSS.

    Was dieses Beispiel nicht macht: feste Pixelgrößen. Die kann man nämlich nicht vorhersehen.

    Mehr Info:

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. Hallo,

      danke an alle für eure Tipps. Werde mir die Sachen mal in Ruhe Anschauen und ausprobieren die ihr mir Geschrieben habt. Da ich neu in dem Bereich bin, wird es eine Weile dauern bis ich mich da eingelesen habe. Daher bitte ich Verständnis das es etwas dauern kann bis ich wieder melde.

      mfg Thomas

      1. Hier ein Vorschlag von mir wie ich es machen würde. https://codepen.io/basti1012/pen/rJoByB

        1. Hej basti1012,

          Hier ein Vorschlag von mir wie ich es machen würde.

          Nicht böse sein, aber ich denke das nützt so nicht viel.

          Klar kann man den code einfach übernehmen, aber ohne Erläuterungen

          • kann man später keine Anpassungen vornehmen, weil man nicht versteht, was man verwendet
          • man kennt die Vor- und Nachteile nicht von Deiner Flexbox-Lösung zu anderen Lösungen (grid (gut), Tabellen (nicht gut) oder floats (nicht gut))

          So ist eine informierte Entscheidung nicht möglich, um für das eigene Projekt die passendste Lösung zu nutzen.

          Marc

        2. @@basti1012

          Sieht nicht gut aus.

          Screenshot: Inhalte links und rechst abgeschnitten

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. mhh wieso sieht das bei dir den so aus? Da habe ich keine erklärung für. Wahrscheinlich fehlt mir dazu wohl die erfahrung.☹

            1. Hallo,

              mach mal das Browserfenster schmal oder verwende ein Smartphone.

              Gruß
              Jürgen

              1. Hallo JürgenB,

                ...Browserfenster schmal...

                oder in einer aktuellen FireFox-Installation die Tastenkombination [Strg]+[Shift]+[M].

                Grüße, Martl

                1. Hallo,

                  aktuellen FireFox-Installation

                  aktuell in Sinne von „weniger als 10(?) Versionen zurück“ 😀

                  Gruß
                  Jürgen

                  1. Hallo JürgenB,

                    seit etwa Anfang 2014; bei dem Tempo der FF-Versionen kommt man mit dem Zählen kaum noch mit. Mehr zu Thema siehe MDN Keyboard_shortcuts.

                    Grüße, Martl

                2. @@Martl

                  oder in einer aktuellen FireFox-Installation die Tastenkombination [Strg]+[Shift]+[M].

                  Da passiert nichts.

                  Ah, es ist [cmd]+[alt]+[M]. (macOS)

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. Hallo Gunnar Bittersmann,

                    (macOS)

                    Snob;)

                    Grüße, Martl

                    1. Hej Martl,

                      (macOS)

                      Snob;)

                      Ey — uffpasse! 😉

                      Marc