Grafik zwischen zwei anderen Grafiken mit css zentrieren

Busdriver

Ich möchte ein Bild zwischen zwei anderen Bildern zentrieren. Hier die Codes:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Aussichtspunkte Stuttgart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="neu.css" />
  </head>
  <body>
    <div id="bild">
     <img src="stgtk.jpg" alt="Stutthart Titelbild" width="300"/>

     <img src="stgtk.jpg" alt="Stutthart Titelbild" width="300" style="text-align: center;"/>

     <img src="stgtk.jpg" alt="Stutthart Titelbild" width="300" style="float: right;"/>

    </div> <!-- bild -->
  </body>
</html>

Alles anzeigen

CSS Code

Code

body {
  margin: 0;
  padding: 0;
  background-color: #9900ff;
  color: black;
  background-image: url(bgas.gif);
  border: 0px;
  background-repeat: repeat;
  font: small Arial, Helvetica, Verdana, sans-serif;
}
#bild {
  background-color: white;
  color: white;
  margin: 40px 50px 40px 50px;
  padding: 10px;
}

Alles anzeigen

Mit "text-align: center;" funktionierts nich.

Bin noch Anfänger. Hat jemand eine Lösung?

d_spaete

CSS:

#bild {
background-color: white;
color: white;
margin: 40px 50px 40px 50px;
padding: 10px;
text-align:center;
}

HTML:

HTML

<img src="stgtk.jpg" alt="Stutthart Titelbild" width="300" style="float:right;"/>
<img src="stgtk.jpg" alt="Stutthart Titelbild" width="300" style="float:left;"/>
<img src="stgtk.jpg" alt="Stutthart Titelbild" width="300"/>

Wobei die float-Angaben bei Gelegenheit auch ins CSS wandern sollten.

Davon abgesehen sollten (müssen) Charset-Angaben vor dem <title>-Tag stehen, sofern nicht eh ein entsprechender Header vom Webserver geschickt wird.

MrMurphy

Hallo Busdriver

Dein Ansatz ist leider teils veraltet und teils auch sachlich falsch.

So ist XHTML bereits im Jahr 2008 offiziell begraben worden. Aktuelle Seiten sollten deshalb nur noch mit HTML5 erstellt werden.

Zum guten Stil gehört es Bilder so vorzubereiten, das sie in der größten gewünschten Größe eingelesen werden. Statt den Bildern per CSS eine Breite von 300px zuzuweisen sollten sie besser auf 300px Breite zugeschnitten werden. Das vermeidet grade auch im responsiven Design von vornherein viele Probleme.

float dient dazu um Text andere Elemente (meist Bilder) umfließen zu lassen. Float für andere Layoutaufgaben zu mißbrauchen ist bereits seit mehreren Jahren nicht mehr notwendig und sachlich falsch.

Nur um ein paar Beispiele zu nennen.

Ich würde zu diesem HTML

Code

<section class="bilderreihe">
         <figure>
            <img src="http://lorempixel.com/300/150/transport/5" alt="Beispielbild">
         </figure>
         <figure>
            <img src="http://lorempixel.com/300/150/city/3" alt="Beispielbild">
         </figure>
         <figure>
            <img src="http://lorempixel.com/300/150/transport/2" alt="Beispielbild">
         </figure>
      </section>

Alles anzeigen

dieses CSS verwenden

Code

body {
         background-color: #9900ff;
      }
      .bilderreihe {
         background-color: white;
         padding: 0.8rem;
         margin: 2.5rem 3rem;
         display: flex;
         justify-content: space-between;
      }
      .bilderreihe figure {
         max-width: 33.33%;
      }

Alles anzeigen

Eine komplette Beispielseite sieht dann so aus:

Beispielseite

Gruss

MrMurphy

d_spaete

Falls es nicht offensichtlich sein sollte: MrMurphys Lösung ist meiner Quick'n'Dirty-Lösung vorzuziehen

Busdriver

Ganz herzlichen Dank für eure Hilfe. Habe beides ausprobiert. Das von d_spaete funktioniert einwandfrei. Das von Dir MrMurphy zentriert mir die Bilder untereinander links. Irgendwas habe ich falsch gemacht. Was?
Hier nochmal beide Codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Aussichtspunkte Stuttgart</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="neu.css" />
</head>
<body>
<section class="bilderreihe">
<figure>
<img src="stgtk.jpg" width=300"alt="Beispielbild">
</figure>
<figure>
<img src="stgtk.jpg"width=300" alt="Beispielbild">
</figure>
<figure>
<img src="stgtk.jpg"width=300" alt="Beispielbild">
</figure>
</section>
</body>
</html>

body {
background-color: #9900ff;
}

}

.bilderreihe {
background-color: white;
padding: 0.8rem;
margin: 2.5rem 3rem;
display: flex;
justify-content: space-between;
}
.bilderreihe figure {
max-width: 33.33%;
}

Nochmals Dank für eure Hilfe!

MrMurphy

Hallo

Du verwendest immer noch XHTML. Das ist bereits seit 2008 mausetot. Entsprechend kennt es aktuelle Elemente wie figure oder section nicht. Wenn du aktuelle Webseiten erstellen willst musst du dich von XHTML trennen. Gleichzeitig solltest du von iso-8859-1 auf utf-8 umsteigen. Aktuelles CSS3 mit XHTML dürfte zu zusätzlichen Problemen führen.

Gruss

MrMurphy

Bandit

Busdriver
Bitte verwende die BBCodes des Forums, um Quellcodes leserlich zu posten.

[noparse]

Zitat

Zitat

[/noparse]
[noparse]

HTML

HTML-Code

[/noparse]
[noparse]

PHP

PHP-Code

[/noparse]

Busdriver

Also so:

HTML

<!DOCTYPE html>


<html>


  <head>
     <meta charset="iso-8859-1" />
    <title>Aussichtspunkte Stuttgart</title>
    <link rel="stylesheet" type="text/css" href="neu.css" />
  </head>


  <body>
     <section class="bilderreihe">
         <figure>
            <img src="stgtk.jpg" width=300"alt="Beispielbild">
         </figure>
         <figure>
            <img src="stgtk.jpg"width=300" alt="Beispielbild">
         </figure>
         <figure>
            <img src="stgtk.jpg"width=300" alt="Beispielbild">
         </figure>
      </section>
  </body>
</html>

Alles anzeigen

zentriert aber trotzdem übereinander?

MrMurphy

Hallo

Du hast einfache sachliche Fehler in deinen Quelltext eingebaut.

Mal abgesehen davon, dass das width-Attribut bereits seit Jahren überhaupt nicht mehr verwendet werden sollte und du an meinem Bespiel auch praktisch sehen kannst das es überflüssig ist:

Code

body {
background-color: #9900ff;
}
}
.bilderreihe {

Hier ist eine schließende Klammer zuviel.

Code

<img src="stgtk.jpg" width=300"alt="Beispielbild">

Hier fehlt das Anführungszeichen vor der 300 und ein Leerzeichen zwischen dem Anführungszeichen nach der 300 und vor alt.

Code

<img src="stgtk.jpg"width=300" alt="Beispielbild">

Hier fehlt das Leerzeichen vor width und das Anführungszeichen vor der 300.

Code

<img src="stgtk.jpg"width=300" alt="Beispielbild">

Auch hier fehlt das Leerzeichen vor width und das Anführungszeichen vor der 300.

Gruss

MrMurphy

Busdriver

Ha, super es funktioniert. ich danke Dir / Euch ganz herzlich für diese Lösung. Und natürlich auch für die aufgebrachte Geduld.
Ich werde mich jedoch nicht scheuen, wenns wieder mal nicht klappt, hier im Forum zu melden.
Danke nochmal

Tags