Frage zu CSS und <img> Tag

[Passwort]

Hallo

Ich habe in meinem CMS-Template im HEader den <img> Tag, in etwa in dieser Form:

<header>
	<img src="Titelbild.jpg"> Text Text
</header>

Kann ich den <img> Tag via CSS eine Grösse zuweisen (gern auch relativ) und die zentrierte Darstellung erzwingen? Naben dem Titelbild steht dann auch noch Text, diesen würde ich gerne mittig und zentriert neben dem Bild anzeigen lassen. Dies könnte ich via Tabellen machen. Aber ist das noch zeitgemäss?

Danke & Gruss

[nix]

Man kann vieles. Und mancher Weg ist nicht der Leichteste. Aber mit dem leicht Nehmen ist es wie mit dem billig kaufen: man zahlt später um so mehr. Hier ein paar Verweise, die vielleicht helfen könnten:

• FlexBox
• Grid
• Zentrieren allgemein
• Bilder und CSS

Grid ist, momentan, „sehr angesagt“. FlexBoxen haben aber, wegen ein paar anderer Verhaltensweisen, durchaus ihre Berechtigung. Tabellen sind aber, so lange es nicht wirklich um tabellarisch dargestellte (und vom Benutzer dann auch so wahrgenommene) Informationen geht, „ziemlich bäh“.

[Matthias Scharwies]

Servus!

Hallo

Ich habe in meinem CMS-Template im HEader den <img> Tag, in etwa in dieser Form: <header> <img src="Titelbild.jpg"> Text Text </header>

Kann ich den <img> Tag via CSS eine Grösse zuweisen (gern auch relativ) und die zentrierte Darstellung erzwingen?

Ja, indem du den „Tag“/Elementnamen als Selektor nimmst und im CSS formatierst:

header img {
  ...

}

Hier findest du das Einstiegs-Tutorial:

• HTML/Tutorials/Einstieg
  • Gestaltung mit CSS

Naben dem Titelbild steht dann auch noch Text, diesen würde ich gerne mittig und zentriert neben dem Bild anzeigen lassen.

Am Ende des Einstiegs-Tutorials wird diese Seite präsentiert:

• src.selfhtml.org/kurse/html-einstieg/

Dort findest du so eine Kombination aus Bild (innerhalb eines Backlinks auf die Startseite) und Firmenname. Die Überschrift wäre dann die jeweils passende Überschrift der einzelnen Seite.

Dies könnte ich via Tabellen machen. Aber ist das noch zeitgemäss?

Gut erkannt. Tabellen sind out!

Herzliche Grüße

Matthias Scharwies

[Robert B.]

Moin Matthias,

Gut erkannt. Tabellen sind out!

… außer für tabellarischen Inhalt 😉

Viele Grüße
Robert

[Robert B.]

Moin,

Ich habe in meinem CMS-Template im HEader den <img> Tag, in etwa in dieser […]

mal schöner gestalteten

[…] Form:

<header>
	<img src="Titelbild.jpg"> Text Text
</header>`

Kann ich den <img> Tag via CSS eine Grösse zuweisen (gern auch relativ) und die zentrierte Darstellung erzwingen? Naben dem Titelbild steht dann auch noch Text, diesen würde ich gerne mittig und zentriert neben dem Bild anzeigen lassen.

Wie kann ich mir das denn vorstellen?

• Bild und Text sollen als Ganzes zentriert sein („(da)neben“):

  header
  +------------------------+
  |   +------+             |
  |   | Bild | Text Text   |
  |   +------+             |
  +------------------------+
  

• Das Bild soll zentriert sein und der Text soll auch zentriert sein („neben“ im Sinne von „zudem“):

  header
  +------------------------+
  |        +------+        |
  |        | Bild |        |
  |        +------+        |
  |        Text Text       |
  +------------------------+
  

Viele Grüße
Robert

[MudGuard]

Hi,

Wie kann ich mir das denn vorstellen?

• Bild und Text sollen als Ganzes zentriert sein („(da)neben“):

  header
  +------------------------+
  |   +------+             |
  |   | Bild | Text Text   |
  |   +------+             |
  +------------------------+
  

• Das Bild soll zentriert sein und der Text soll auch zentriert sein („neben“ im Sinne von „zudem“):

  header
  +------------------------+
  |        +------+        |
  |        | Bild |        |
  |        +------+        |
  |        Text Text       |
  +------------------------+
  

Ich hätte das so verstanden:

   +------------------------------------+
   |              +------+              |
   |              | Bild |     Text     |
   |              +------+              |
   +------------------------------------+

Also das Bild mittig, und im rechts daneben verbleibenden Platz der Text mittig.

cu,
Andreas a/k/a MudGuard

[Passwort]

• Bild und Text sollen als Ganzes zentriert sein („(da)neben“):

  header
  +------------------------+
  |   +------+             |
  |   | Bild | Text Text   |
  |   +------+             |
  +------------------------+
  

Entweder so oder auch:

+------------------------------------+
|              +------+              |
|              | Bild |     Text     |
|              +------+              |
+------------------------------------+

das muss ich dann entscheiden, wenn ich das Ergebnis sehe.

aber so nicht:

+------------------------+
|        +------+        |
|        | Bild |        |
|        +------+        |
|        Text Text       |
+------------------------+

Irgendwas ist mit den Links von Matthias, ich bekomme da immer einen Timeout. Wie würden denn die CSS tags lauten, um das Bild zu positionieren und Grösse zuzuweisen?

[Jonathan Harker]

Hallo Passwort,

Irgendwas ist mit den Links von Matthias, ich bekomme da immer einen Timeout.

Gehn bei mir:

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg/Gestaltung_mit_CSS

Wie würden denn die CSS tags lauten, um das Bild zu positionieren und Grösse zuzuweisen?

img

Das ist nicht die erwartete Antwort, ich weiß.

Du meinst, wie die CSS-Regelsätze lauten.

https://src.selfhtml.org/kurse/html-einstieg/preise.html

Dort im HTML:

    <header>
      <a id="backlink" href="/"><img src="img/logo.svg" alt="logo"></a>
      <p>Schreinerei Meier</p>
      <p>ihre Werkstatt für gutes Wohnen!</p>
    </header>

Dort im CSS:

header {
	height: 5em;
	padding: 0 1em;
	margin-bottom: 1em;
  	display: grid;
  	grid-template-columns: 6em 1fr 1fr;
}

header p:first-of-type{
  font-size: 2em;
  font-weight: bold;
}

header #backlink {
 display:inline-block;
 text-shadow: none; 
 color: transparent;
 background: transparent;
 background-size: contain;
 width: 5em;
 height: 3em;
}

Bis bald! Jonathan

[Gunnar Bittersmann]

@@Jonathan Harker

https://src.selfhtml.org/kurse/html-einstieg/preise.html

Dort im HTML:

<a id="backlink" href="/"><img src="img/logo.svg" alt="logo"></a>

Der Alternativtext „logo“ ist falsch. Das Bild dient als Link, und das muss der Alternativtext in dem Fall auch ausdrücken: alt="Startseite".

Context is for kings.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Passwort

• Bild und Text sollen als Ganzes zentriert sein („(da)neben“):

  header
  +------------------------+
  |   +------+             |
  |   | Bild | Text Text   |
  |   +------+             |
  +------------------------+
  

Entweder so

Da genügt im einfachsten Fall header { text-align: center }.

oder auch:

+------------------------------------+
|              +------+              |
|              | Bild |     Text     |
|              +------+              |
+------------------------------------+

Das ist ein Fall für CSS-Grid.

Flexbox, wenn das Bild in der Mitte des neben dem Text freien Platzes stehen soll.

Siehe Sildes 19 und 20 und die Codepens flexbox, grid.

aber so nicht:

+------------------------+
|        +------+        |
|        | Bild |        |
|        +------+        |
|        Text Text       |
+------------------------+

So nicht? Wie sonst? Hast du dir Gedanken gemacht, wie es auf schmalen Viewports aussehen soll, wenn Bild und Text nicht nebeneinander passen?

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Passwort

	<img src="Titelbild.jpg"> Text Text

Dem img fehlt das zwingend notwendige alt-Attribut mit dem entsprechenen Alternativtext. (Bei rein dekorativen Bildern ist alt="" zu setzen.)

🖖 Живіть довго і процвітайте