div in div mit bild

[PHP-Neuling]

HalliHalloHallöle !

ich habe mal wieder eine mittelschwere Schwierigkeit zu bewältigen und hoffe sehr auf konstruktive und vernichtende Kritik von euch Raketenwissenschaftlern, die mir hilft das DIV-Konstrukt besser zu verstehen

Ich habe Newsbeiträge gebastelt, die auch ein hinterlegtes Bild anzeigen sollen. Das funktioniert auch ziemlich gut. Allerdings wird das erste (das "parent") Div nicht vergrößert, sodass das Bild herauslugt. Bei Text funktioniert das Vergrößern selbstverfreilichst.

Mein HTML Quelltext

<div id="NewsContent">
			<?= $Datensatz['INHALT']?>
			<?php 			
			$anhangformat = substr($Datensatz['ANHANG'],-3);
			IF($anhangformat == "png" OR $anhangformat == "jpg" OR $anhangformat == "jpeg") {	?>	
			<div id="Image"><a href="<?= $Datensatz['ANHANG'] ?>" target="_blank">
			<img class="clear" id="NewsImage" height="128" src="<?= $Datensatz['ANHANG'] ?>">
			</a></div>			
			<?php } else {
						IF($Datensatz['ANHANG'] != "") { ?><a href="<?=$Datensatz['ANHANG']?>" target="_blank"> <i class="fa fa-paperclip"></i></a> <?php }} ?>
		</div> <?php } ?> 

Mein CSS

#NewsContent {
	margin-top: 3;
	margin-bottom: 3;
	font-family: Calibri;
	color: black;
	width: calc(95% - 23px);
	padding: 5;
	margin-left: 25px;
	border-radius: 10px 10px 10px 0;
	border: 1px #232f3f;
	border-style: dashed;
	background-color: #fff;
	display: block;
}
#NewsContent:hover {
	background-color: #fffff1;
}
#NewsImage{
		float: right;
		display: block;
		width: 128px;
#Image{
	position: relative;
	width: 99%;
}
	

Ich weiß jetzt nicht so recht wie ich DIV1 das erkläre, das es um DIV2 herumgebaut werden soll (oder so... ihr wisst schon was ich meine :D)

Ich danke im voraus fürs Lesen

bleibt gesund

[Gunnar Bittersmann]

@@PHP-Neuling

Mein HTML Quelltext

Nö, das ist PHP-Quelltext (ohne Deppenleerzeichen). Ich hab mir mal erlaubt, in deinem Posting die Sprachen der Codeblöcke (PHP bzw. CSS) anzugeben, damit Syntaxhighlighting gemacht wird.

Und was soll man mit dem Code anfangen? Einen lokalen Webserver starten, um da was zu sehen? Nö. Verlinke deine Testseite (auf deinem Server oder einem Service wie CodePen oder Dablett), damit man sich das Zeug ansehen kann.

Was man schon sagen kann ist, dass dein Zeug für etliche Nutzer nicht funktioniert, weil deine Links keine Beschriftung haben:

			<div id="Image"><a href="<?= $Datensatz['ANHANG'] ?>" target="_blank">
			<img class="clear" id="NewsImage" height="128" src="<?= $Datensatz['ANHANG'] ?>">
			</a></div>	

Das Bild muss einen Alternativtext haben, der das Linkziel angibt. Oder das Linkziel so angeben wie beim nächsten Link.

						IF($Datensatz['ANHANG'] != "") { ?><a href="<?=$Datensatz['ANHANG']?>" target="_blank"> <i class="fa fa-paperclip"></i></a> <?php }} ?>

Hier ist der Linktitel in einem span-Element unterzubringen, das visuell versteckt werden kann. Eine Alternative wäre aria-label bzw. aria-labelledby, aber per span-Element ist die bevorzugte Variante.

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

PS: In deinem PHP-Code sollten keine geschweiften Klammern vorkommen, sondern die alternative Syntax für Kontrollstrukturen verwendet werden. S.a. diese Diskussion.

PPS: Wo kommt $Datensatz['ANHANG'] her? Wenn da ein Hauch von unsicherer Quelle drinsteckt, muss das vor der Ausgabe in HTML durch htmlspecialchars() laufen.

[Der Martin]

Hallo,

ergänzend zum bereits Gesagten:

Das aus dem Container ragende Bild ist vermutlich die Folge von unsachgemäß verwendeten float. Aber auch mir ist der Code-Schnipsel zu wirr, um das da theoretisch aufzudröseln.

Ach ja, und einige CSS-Definitionen sind ungültig: Längenangaben ohne Einheit. Ich meine mich zu erinnern, dass die für HTML 5 festgelegte Fehlertoleranz dann als Einheit px annehmen soll; falsch ist es dennoch.

Nicht falsch, aber unnötig ist auch die explizite Angabe von display:block für div-Elemente, denn das ist der Standardwert.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Ach ja, und einige CSS-Definitionen sind ungültig: Längenangaben ohne Einheit. Ich meine mich zu erinnern, dass die für HTML 5 festgelegte Fehlertoleranz dann als Einheit px annehmen soll; falsch ist es dennoch.

Nein, nicht ganz. Im Quirksmodus (keine DOCTYPE-Deklaration bzw. eine, die in den Quirksmodus schaltet) wird eine einheitslose Längenangabe bei einigen CSS-Eigenschaften (bspw. margin, padding) als Angabe in px gewertet. Aber nur bei einigen; bei vielen anderen nicht (bspw. border-radius).

Im Standards-compliant-Modus (<!DOCTYPE html> o.a. Deklaration, die in den Standards-compliant-Modus schaltet) passiert das nicht; die fehlerhafte Angabe wird ignoriert.

Siehe Testseite.

Fun fact: In der CSSBattle laufen die Targets im Quirksmodus. Da verwende ich ständig einheitslose Längenangaben, um Zeichen zu sparen.

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

[Rolf B]

Hallo PHP-Neuling,

$anhangformat = substr($Datensatz['ANHANG'],-3);
IF($anhangformat == "png" OR $anhangformat == "jpg" OR $anhangformat == "jpeg") {	?>	

Das ist jetzt erstmal auch nicht deine Frage, aber wenn Du die letzten 3 Stellen herausholst, wirst Du "datei.jpeg" nicht erkennen. Du wirst "datei.mypng" fälschlich als PNG erkennen. Und ein User, der seine Groß-/Kleinschrift genauso kreativ wählt wie Du, könnte die Abfrage mit einem "DAS_BILD.JPG" ebenfalls abschießen.

Du könntest substr_compare verwenden:

if (substr_compare($Datensatz['ANHANG'], '.png', -4, true) == 0 ||
    substr_compare($Datensatz['ANHANG'], '.jpg', -4, true) == 0 ||
    substr_compare($Datensatz['ANHANG'], '.jpeg', -5, true) == 0)
{
   // ...
}

oder Du könntest mit strrpos den letzten Punkt finden, den Text rechts davon herausholen und den case insensitive vergleichen

oder Du könntest preg_match verwenden, um den Test mit einem regulären Ausdruck einer Regex durchzuführen

if (preg_match("/.*\.(png|jpe?g)$/i", $Datensatz['ANHANG']) === 1) {
   // ...
}

Jetzt zu deinem Problem.

Dein Bild hängt aus dem DIV heraus, weil es gefloatet ist. Damit verlässt es den normalen Elementfluss. Ich nehme nicht an, dass Du das willst. Insbesondere wird das a Element dadurch 0 Pixel breit, was zu visueller Irritation führt wenn man mit Tab durch die Links läuft.

Als Mindestlösung sollte der Float vom Bild auf das a Element verschoben werden, damit die beiden beieinander bleiben.

Statt zu diskutieren, wie man ein float einfängt (Spoiler: Mit einem Blockformatierungskontext), würde ich lieber fragen, weshalb Du das Bild rechts floatest. Soll anderer Text drumherum fließen? Ggf. bräuchte man da mehr von der Seite, um das zu verstehen, einen visuellen Eindruck von der aktuellen Darstellung im Gesamtkontext und vielleicht auch eine Skizze, wie es eigentlich aussehen soll.

Rolf

[Gunnar Bittersmann]

@@Rolf B

oder Du könntest preg_match verwenden, um den Test mit einem regulären Ausdruck einer Regex durchzuführen

Hehe. Folie 3 f.

Statt zu diskutieren, wie man ein float einfängt (Spoiler: Mit einem Blockformatierungskontext)

Buh. Da ist das Wiki mal wieder auf ziemlich veraltetem Stand.

Das geht per CSS: display: flow-root

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

[Rolf B]

Hallo Gunnar,

irgendwie passt das, was Chrome mit flow-root treibt, nicht zur Spec.

Eigentlich sollte display:flow-root; die Kurzform von display: block flow-root; sein. Aber nein, letzteres wird von Chrome als ungültig missachtet.

Und es sollte auch display: inline flow-root; als Synonym zu display: inline-block ; geben. Wird aber ebenfalls ignoriert.

Deswegen habe ich mich davon bislang ferngehalten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Eigentlich sollte display:flow-root; die Kurzform von display: block flow-root; sein. Aber nein, letzteres wird von Chrome als ungültig missachtet.

Laut Tabelle Browser compatibility, Zeile Multi-keyword values sollte es in Firefox und Safari schon gehen, Chromia hinken hinterher.

Und es sollte auch display: inline flow-root; als Synonym zu display: inline-block ; geben. Wird aber ebenfalls ignoriert.

Deswegen habe ich mich davon bislang ferngehalten.

Als single-keyword value sollte es browserübergreifend einsetzbar sein.

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

[PHP-Neuling]

hey Rolf,

jawohl, vollkommen richtig. den float: right hat es gegeben, da ich das Bild innerhalb einer Box auf der rechten Seite haben wollte. Nun habe ich den Float entfernt und siehe da ... das Bild bleibt in der Box. Nun natürlich nicht rechts, aber immerhin.

Ich sehe mir nochmal die div konstrukte an. Irgendwo hatte ich da mal so eine Anleitung für das Erstellen von Boxen.

Soweit schon einmal großes Dankeschön. Der Fehler ist gefunden

[Matthias Scharwies]

Servus!

hey Rolf,

jawohl, vollkommen richtig. den float: right hat es gegeben, da ich das Bild innerhalb einer Box auf der rechten Seite haben wollte. Nun habe ich den Float entfernt und siehe da ... das Bild bleibt in der Box. Nun natürlich nicht rechts, aber immerhin.

Danke für Deine Rückmeldung!

Ich sehe mir nochmal die div konstrukte an. Irgendwo hatte ich da mal so eine Anleitung für das Erstellen von Boxen.

Könntest du mir diese mal (über PN oder [e-mail]) mal zukommen lassen? Ich hätte in der Diskussion oben eine andere HTML-Struktur (mit einem figure) vorgeschlagen. Dort könnte man noch eine figcaption einsetzen: ein alt-Attribut für das Bild muss aber immer dabei sein. Das wäre aber besser auf ein Tutorial hinweisen zu können, bzw dort zu unseren bereits vorhandenen Tutorials zu verlinken, falls die Frage nochmal so kommt.

Borisbaer hatte im Juni eine Diskussion zu Wie Darstellung und Inhalt trennen? angestoßen. Evtl. kannst Du da etwas rausziehen, wie man HTML notiert und mit PHP dann dort Daten einfügt.

Soweit schon einmal großes Dankeschön. Der Fehler ist gefunden

😀

Herzliche Grüße

Matthias Scharwies

[PHP-Neuling]

Hallo Zusammen,

ihr seid nach wie vor der einzige Laden wo ich mich nach tonnenweise Kritik und gemecker nicht schlecht fühle 😀

ich versuche euer gesagtes nachher mal zu verarbeiten und passe meinen Quellcode entsprechend an. Der Datensatz kommt aus einer eigenen SQL DB. htmlspecialchars fehlte noch, vollkommen richtig

Bis hierhin danke ich vielmals an Alle