Zwei kleine HTML / CSS fragen

**aebian** · 23. August 2015

1. Warum wird kein Bild angezeigt wenn ich folgendes setze:

HTML

<verisign />

Der CSS-Code dafür sieht so aus:

CSS

versign { background: url(https://assets-cdn.aebian.org/aebian.org/verified18.png) no-repeat;}

_____________________________________________________________________________________________________________________________________________

2. Wie kriege ich es am besten dazu das mein Bild richtig skaliert wird? Aktuell sieht das so aus: https://aebian.org/story/arma-codelist
CSS-Code dafür ist:

CSS

.featured-images {width: 1137px; width: 58vw; max-width: 1137px;  max-width: 60vw; height:372px; height:18vw;max-height:372px; max-height:20vw; border: solid 2px; resize: auto; overflow: hidden;}

Caglar · 23. August 2015

1) Du musst, wenn du eine Division für das Anzeigen von Bildern nutzt auch eine Breite und Höhe festlegen, ansonsten kannst du auch den img Tag nutzen.
2) Am besten mit der background-size Eigenschaft.

PHP

.features-images {
	background-size: 100% 100%;
}

**aebian** · 23. August 2015

Caglar:
Dein Code bewirkt rein garnichts. Mir geht es darum das Bild welches im featured-images container ist automatisch auf die Werte zu resizen die oben in meinem CSS Code stehen.
Und wo nutz ich da bitte eine Division?

Caglar · 23. August 2015

Zitat von Deadalus

wo nutz ich da bitte eine Division?

verisign ist eine Division (ein Bereich) und wenn das Element keine Höhe und Breite hat, wird es auch nicht angezeigt (außer es hat einen Inhalt, welches die Maße wiederrum festlegt).

**aebian** · 23. August 2015

@@Caglar::

Ich sprach aber für Nummero 2, da dein Post nicht ganz ersichtlich war.

Caglar · 23. August 2015

Zitat von Deadalus

@@Caglar::

Ich sprach aber für Nummero 2, da dein Post nicht ganz ersichtlich war.

Erkläre es verständlich, weil ich verstehe dein Vorhaben nicht.

Edit:
Der Code kann auch nicht's bewirken, wenn das Bild als ein img Tag in featured-images ist.
Das hättest du aber besser erklären können.

Versuch's mal so

PHP

.featured-images img {
	width: 100%;
}

**aebian** · 23. August 2015

Caglar:

[tabmenu]

[tab=Info]
Vorhaben gibts in Zwei Tabs
[tab=Zu Frage 1]
Ich will das Bild () angezeigt bekommen, wann immer ich <versign /> im Markup eintippe.
Der CSS-Code dazu sieht so aus:

CSS

versign { background-image: url(https://assets-cdn.aebian.org/aebian.org/verified18.png) no-repeat; width: 100%; height: 100%; background-size: 100% 100%;}

[/tabmenu]

E://

Frage Zwei hat sich somit erledigt, thx

Caglar · 23. August 2015

1)

Du nutzt background-image, bei dieser Eigenschaft kannst du nur das Hintergrund festlegen, also am besten nutzt du background.

PHP

versign { 
	background: url(https://assets-cdn.aebian.org/aebian.org/verified18.png) 50% no-repeat;
	width: 18px;
	height: 18px;
}

2)

Habe ich dir bereits einen Lösungsweg gezeigt (falls ich es richtig verstanden habe).

**aebian** · 23. August 2015

Caglar:

Der Code scheint wohl doch zu gehen aber irgendwie dann manchmal doch nicht.

z.B. hier (https://aebian.org/) hab ich unten neben dem Logo den Code <versign /> benutzt, das Bild ist aber irgendwie nicht da.

HTML

<img src="https://assets-cdn.aebian.org/aebian.org/logo.png" /> <versign />

Caglar · 23. August 2015

Wahrscheinlich fehlt das hier

PHP

versign { 
    background: url(https://assets-cdn.aebian.org/aebian.org/verified18.png) 50% no-repeat;
    width: 18px;
    height: 18px;
    display: block;
}

**aebian** · 23. August 2015

Caglar:

Kacke block xD display: inline-table; did the Job.

Danke für deine Hilfe, Problems solved und nun geh ich ins Bett

Caglar · 23. August 2015

Zitat von Deadalus

Caglar:

Kacke block xD display: inline-table; did the Job.

Danke für deine Hilfe, Problems solved und nun geh ich ins Bett

Da habe ich um dieser Uhrzeit auch meine Schwierigkeiten beim Nachdenken.
Immerhin ist's nun gelöst.

breadfish.de 12. März 2022