Bild links neben Text plazieren

[Luis Peter]

Hallo, ich habe eine HTML Website erstellt und diese hat auch ein Menü, welches wie folgt aussieht: Dies ist der Menü-Code dazu:

<div class="logo-section smooth-scroll">
	<div class="brand"><a href="#banner"><b>LPCHax</b>		</a></div>								
</div>

Ich möchte nun, dass links neben der Schrift LPCHax ein bestimmtes Bild ist (das Bild habe ich bereits). Wie heißt der Code um dieses so einzufügen, dass es links neben LPCHax steht

Mit freundlichen Grüßen, LPCHax

[Gunnar Bittersmann]

@@Luis Peter

Ich möchte nun, dass links neben der Schrift LPCHax ein bestimmtes Bild ist (das Bild habe ich bereits).

Gehört das Bild zum Seiteninhalt oder ist es Verzierung?

Wie heißt der Code um dieses so einzufügen, dass es links neben LPCHax steht

Das hängt von der Antwort auf obige Frage ab.

LLAP 🖖

[Jörg Reinholz]

Moin!

Gehört das Bild zum Seiteninhalt oder ist es Verzierung?

Die Kristallkugel hat sich eindeutig und auch nach hochnotpeinlicher, in dieser Weise (Zeigen des Hammers!) nur in den USA und bei der IS erlaubter Befragung beharrlich auf "Verzierung" fest gelegt.

Jörg Reinholz

[Luis Peter]

@@Luis Peter

Ich möchte nun, dass links neben der Schrift LPCHax ein bestimmtes Bild ist (das Bild habe ich bereits).

Gehört das Bild zum Seiteninhalt oder ist es Verzierung?

Wie heißt der Code um dieses so einzufügen, dass es links neben LPCHax steht

Das hängt von der Antwort auf obige Frage ab.

LLAP 🖖

„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)

Hallo, es soll so sein, wenn man auf das Bild oder auf die Schrift LPCHax drückt, man zurück nach oben kommt.

PS.: Das Menü ist immer sichtbar, auch wenn man nach unten scrollt.

Mit freundlichen Grüßen, LPCHax

[Jörg Reinholz]

Moin!

<div class="logo-section smooth-scroll">
	<div class="brand"><a href="#banner"><b>LPCHax</b></a></div>
</div>

Korrigiere ich zu

<div class="logo-section smooth-scroll">
  <a class="brand" style="background-image:url('LPCHax.jpg')" ref="#banner">LPCHax</a>
</div>

und verwende im Groben folgendes CSS:

.logo-section a.brand {
   display: block;
   font-weight: bold;
   padding-left:2em;
   background-repeat: no-repeat;
}

display und font-weight ersetzen den hyperliquiden Extra-Div und den fast schon verbotenen bold-Tag. Das für jeden Link individuelle Bild (deshalb als Attribut im HTML) wird als Hintergrund angezeigt. Der Text mit padding nach rechts verschoben.

Das ist es, was Du hier brauchst.

Jörg Reinholz

[marctrix]

Hej Jörg,

<div class="logo-section smooth-scroll">
	<div class="brand"><a href="#banner"><b>LPCHax</b></a></div>
</div>

Korrigiere ich zu

<div class="logo-section smooth-scroll">
  <a class="brand" style="background-image:url('LPCHax.jpg')" ref="#banner">LPCHax</a>
</div>

Ich kaufe ein "h" für das href ;-)

display und font-weight ersetzen den hyperliquiden Extra-Div und den fast schon verbotenen bold-Tag.

Fast ganz schwanger...

Es gibt nur verboten oder erlaubt.

Das ist es, was Du hier brauchst.

Weißte Bescheid, Schätzelein ;-)

Marc

[Jörg Reinholz]

Moin!

Es gibt nur verboten oder erlaubt.

Naja. Es gibt noch "deprecated".

Das ist zwar nicht der Fall, aber das W3C schreibt über die Verwendung von <b>:

Allgemeines: Die Verwendung von b- und i-Elementen kann problematisch sein, denn sie verführt Autoren dazu, weiterhin darstellungsbezogen zu denken, anstatt sie auf den Weg zu angemessenem semantischem Markup zu führen. Letztendlich verwischt es die dahinterstehenden Ideen. Ein Autor könnte schnell leichtfertig eines dieser Elemente benutzen, um Textpassagen anders darzustellen, anstatt innezuhalten und über Portabilität und Zukunftsgewandheit nachzudenken.

Bei der Internationalisierung können Probleme auftreten, denn die Darstellung wird für verschiedene Kulturen unterschiedlich sein müssen, insbesondere im Hinblick auf Fett- und Kursivschrift.

"fast verboten" ist hier eine nicht gänzlich unzutreffende Äußerung.

Weißte Bescheid, Schätzelein ;-)

Tja. "Isso".

Jörg Reinholz

[marctrix]

Hej Jörg,

Moin!

Es gibt nur verboten oder erlaubt.

Naja. Es gibt noch "deprecated".

Na und? tut doch hier nichts zur Sache, denn wie du selbst schreibst:

Das ist zwar nicht der Fall

Zwar schreibt das W3C

Allgemeines: Die Verwendung von b- und i-Elementen kann problematisch sein, [...]

"fast verboten" ist hier eine nicht gänzlich unzutreffende Äußerung.

Finde ich nicht sinnig. Das gilt ja für jedes Element: wird ein Tag unsachgemäß verwendet, ist sein Einsatz problematisch. Setzt man sich mit der Bedeutung von b und i auseinander und verwendet sie nur da, wo es Sinn macht, spricht auch nichts dagegen.

Ich gebe Dir aber recht, wenn du "fast" nicht im Sinne von "beinahe", sondern von "möglicherweise in Zukunft" verwendet hast. Aus Gründen der Zukunftssicherheit ist natürlich zu überlegen, ob man sich b und i noch antun sollte...

Weißte Bescheid, Schätzelein ;-)

Tja. "Isso".

Du bist ja auch ein lecker Häschen! Hömma - hasse mal deine Telefonnummer parat?

Marc

[Gunnar Bittersmann]

@@marctrix

Das gilt ja für jedes Element: wird ein Tag unsachgemäß verwendet, ist sein Einsatz problematisch.

Das gilt ja für jeden Begriff: wird ein Wort unsachgemäß verwendet, ist sein Einsatz problematisch. ;-)

Auch wenn in der englischsprachigen Literatur element und tag fast synonym verwendet werden, sollten wir sie im Deutschen auseinanderhalten.

Setzt man sich mit der Bedeutung von b und i auseinander und verwendet sie nur da, wo es Sinn macht, spricht auch nichts dagegen.

Ja, nichts gegen die Verwendung von b- und i-Elementen.

Aus Gründen der Zukunftssicherheit ist natürlich zu überlegen, ob man sich b und i noch antun sollte...

Aus Gründen der Abwärtskompatibilität werden Browser die Unterstützung dafür nicht aufgeben.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Das gilt ja für jedes Element: wird ein Tag unsachgemäß verwendet, ist sein Einsatz problematisch.

Das gilt ja für jeden Begriff: wird ein Wort unsachgemäß verwendet, ist sein Einsatz problematisch. ;-)

Auch wenn in der englischsprachigen Literatur element und tag fast synonym verwendet werden, sollten wir sie im Deutschen auseinanderhalten.

Auf jeden Fall. Ich achte da recht penibel drauf, habe hier auch (vielleicht zu kurz?) überlegt, ob ich den oben zitierten Satz so oder etwas anders schreiben soll.

Ich hatte wohl so was im Kopf: für ein Element entscheide ich mich, weil ich darüber nachgedacht habe, welches ich verwende. Zum Notieren benötige ich dann freilich Tags.

Tag benutzte ich in dem Satz schlechterdings als Synonym für die Handlung des (unüberlegten) Tippens, auch wilder Aktionismus.

Mir ist aber klar, dass das aus dem zitierten Satz nicht deutlich werden kann, darum danke für den Hinweis, denn du hast sehr(!) recht.

Setzt man sich mit der Bedeutung von b und i auseinander und verwendet sie nur da, wo es Sinn macht, spricht auch nichts dagegen.

Ja, nichts gegen die Verwendung von b- und i-Elementen.

Aus Gründen der Zukunftssicherheit ist natürlich zu überlegen, ob man sich b und i noch antun sollte...

Aus Gründen der Abwärtskompatibilität werden Browser die Unterstützung dafür nicht aufgeben.

Sehe ich genauso - ist halt unschön, wenn man ein Element einsetzt, dass offiziell vielleicht mal aus dem Standard verschwindet. Aber auch das kann ja theoretisch jedem Element passieren.

Selbst so etwas grundlegendes wie omg könnte mal zugunsten von picture oder so aufgegeben werden.

Insofern setze ich b und i dort ein, wo sie Sinn machen und unterrichte auch lieber die korrekte Verwendung in meinen Kursen, statt vor ihrem Einsatz zu warnen...

Marc

[marctrix]

Selbst so etwas grundlegendes wie omg könnte mal zugunsten von picture oder so aufgegeben werden.

Was die Rechtschreibkorrektur uns damit sagen wollte, ist mir ein Rätsel, aber ich meinte natürlich img... ;-)

Marc

[Gunnar Bittersmann]

@@marctrix

Was die Rechtschreibkorrektur uns damit sagen wollte, ist mir ein Rätsel, aber ich meinte natürlich img... ;-)

OMG, die Rechtschreibkorrektur macht img zu omg‽

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

OMG, die Rechtschreibkorrektur macht img zu omg‽

Ja, und ‚selfhtml‘ zu ‚seltsam‘.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

OMG, die Rechtschreibkorrektur macht img zu omg‽

Ja, und ‚selfhtml‘ zu ‚seltsam‘.

Und „barrierefrei“ zu „karrieregeil“. Netter Versuch.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und „barrierefrei“ zu „karrieregeil“. Netter Versuch.

Und ‚Gunnar‘ zu ‚Unnahbar‘. (T-Bird)

Bis demnächst
Matthias

[Der Martin]

Hallo,

Und „barrierefrei“ zu „karrieregeil“. Netter Versuch.

Und ‚Gunnar‘ zu ‚Unnahbar‘. (T-Bird)

ich erinnere mich an die originellen Vorschläge der Rechtschreibprüfung im alten MS Word 97. Hatte bei meinem damaligen Arbeitgeber mal ein technisches Handbuch zu einer Elektronik-Baugruppe zum Korrekturlesen. Für D-Sub-Steckverbinder hat Word generell D-Zug-Steckverbinder vorgeschlagen, und aus schraubbar wurde Schrubber. Nun ja ...

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Und „barrierefrei“ zu „karrieregeil“. Netter Versuch.

und aus schraubbar wurde Schrubber. Nun ja ...

Wir hatten schon mal einen Thread dazu …

LLAP 🖖

[Der Martin]

Hallo,

und aus schraubbar wurde Schrubber. Nun ja ...

Wir hatten schon mal einen Thread dazu …

naja, wie sagte einst unser geschätzter Kollege:
"Die Halbwertszeit meines Gedächtnisses macht mich regelmäßig fröhlich."

Oder etwas populärer: Täglich grüßt das Murmeltier.

So long,
 Martin

[Jörg Reinholz]

Moin!

Weißte Bescheid, Schätzelein ;-)

Tja. "Isso".

Du bist ja auch ein lecker Häschen! Hömma - hasse mal deine Telefonnummer parat?

Kann es sein, dass Du das mit dem Möhreneintopf irgendwie falsch verstanden hast?

Jörg Reinholz

[marctrix]

Hej Jörg,

Du bist ja auch ein lecker Häschen! Hömma - hasse mal deine Telefonnummer parat?

Kann es sein, dass Du das mit dem Möhreneintopf irgendwie falsch verstanden hast?

Ich komm auf jeden Fall probieren! ;-)

Marc

[Camping_RIDER]

Aloha ;)

Du bist ja auch ein lecker Häschen! Hömma - hasse mal deine Telefonnummer parat?

Kann es sein, dass Du das mit dem Möhreneintopf irgendwie falsch verstanden hast?

Ich komm auf jeden Fall probieren! ;-)

Ich nicht; ich würde zwar gern mal den Jörg auch persönlich kennen lernen, der Eintopf verschreckt mich aber etwas ;) Ich halts bezüglich Eintöpfen eher mit dem Gaisburger Marsch.

Grüße,

RIDER

[marctrix]

Hej Camping_RIDER,

Ich nicht; ich würde zwar gern mal den Jörg auch persönlich kennen lernen, der Eintopf verschreckt mich aber etwas ;) Ich halts bezüglich Eintöpfen eher mit dem Gaisburger Marsch.

Oh, tut mir leid Jörg, ich kann heute nicht. Ich gehe campen ;-)

Marc

[Der Martin]

Mahlzeit,

Ich halts bezüglich Eintöpfen eher mit dem Gaisburger Marsch.

den würde ich auch sicher nicht verschmähen, aber ich bin auch durchaus ein Freund einer ordentlichen Serbischen Bohnensuppe.
Nur die Beschreibung in Wikipedia verunsichert mich jetzt etwas. Ich kenne das aus der Kindheit als Eintopfgericht mit kleingewürfelten Kartoffeln, weißen Bohnen und geschnittenen Würstchen als Hauptbestandteile, das Ganze in einer dickflüssigen scharf gewürzten Brühe auf Paprika-Basis. Gab's bei uns früher manchmal als Konserven-Eintopf, den meine Mutter meist noch mit ein paar Extra-Zutaten aufgepeppt hat (heute würde man sagen "gepimpt").

Oder nennt sich das, was ich meine, noch anders?

So long,
 Martin

[Luis Peter]

Moin!

<div class="logo-section smooth-scroll">
	<div class="brand"><a href="#banner"><b>LPCHax</b></a></div>
</div>

Korrigiere ich zu

<div class="logo-section smooth-scroll">
  <a class="brand" style="background-image:url('LPCHax.jpg')" ref="#banner">LPCHax</a>
</div>

und verwende im Groben folgendes CSS:

.logo-section a.brand {
   display: block;
   font-weight: bold;
   padding-left:2em;
   background-repeat: no-repeat;
}

display und font-weight ersetzen den hyperliquiden Extra-Div und den fast schon verbotenen bold-Tag. Das für jeden Link individuelle Bild (deshalb als Attribut im HTML) wird als Hintergrund angezeigt. Der Text mit padding nach rechts verschoben.

Das ist es, was Du hier brauchst.

Jörg Reinholz

Hallo, kenne mich nicht so aus, aber habe jetzt die Sachen geändert, bzw. den Code für css hinzugefügt.

Sieht jetzt so aus:

Also was passt noch nicht?

PS.: Der Bildname für das Bild was eingefügt werden lautet LPCHax.jpg befindet sich im Ordner /images).

[Jörg Reinholz]

Moin!

Sieht jetzt so aus:

(Ich wollte gerade schreiben: "ich sehe nichts" da sah ich beim Beantworten die URL)

http://imgur.com/2UymiGQ

Also was passt noch nicht?

• Gib dem Hintergrundbild eine Position.
• Bestimme die Größe des Divs, auch die übrigen Padding - Angaben und die Zeilenhöhe.

Jörg Reinholz

[Der Martin]

Hallo,

Sieht jetzt so aus:

(Ich wollte gerade schreiben: "ich sehe nichts" da sah ich beim Beantworten die URL)

http://imgur.com/2UymiGQ

ja, Luis Peter hat leider ein komplettes HTML-Dokument angegeben, wo er eigentlich nur ein Bild hätte einbinden/referenzieren sollen. Ich frage mich, warum das so häufig vorkommt - er ist nicht der einzige und auch nicht der erste, der das macht.

So long,
 Martin

[Jörg Reinholz]

Moin!

http://imgur.com/2UymiGQ

ja, Luis Peter hat leider ein komplettes HTML-Dokument angegeben, wo er eigentlich nur ein Bild hätte einbinden/referenzieren sollen. Ich frage mich, warum das so häufig vorkommt - er ist nicht der einzige und auch nicht der erste, der das macht.

Weil es scheinbar geht. (Wenn auch nicht funktioniert.)

Abhilfe kann nur eine Prüfung sein, was der Server zurückliefert:

In PHP und Perl sollte etwas wie

$sys='wget -O /dev/null  -d ' . escapeshellarg('http://imgur.com/2UymiGQ') .' 2>&1 | grep -i -E "content-type.*image" | wc -l';
$isPic=`$sys`;

#Nur für Perl:
sub escapeshellarg { 
    my $str = @_ ? shift : $_;
    $str =~ s/((?:^|[^\\])(?:\\\\)*)'/$1\\'/g;
    return "'$str'";
}

funktionieren.

Freilich kann man auch curl in purem PHP benutzen:

<?php
function hasHTTPImageHeader($url) {
  $curl = curl_init();
  curl_setopt($curl, CURLOPT_URL, $url);
  curl_setopt($curl, CURLOPT_HEADER, true);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, false);

  ## Windows-Benutzer müssen sich hier mit tempnam() um eine Datei kümmern und diese dann mit unlink() auch wieder löschen!
  $fh = fopen('/dev/null', 'c');
  curl_setopt($curl, CURLOPT_FILE, $fh);

  $res = curl_exec($curl);
  $res = curl_getinfo ($curl);
  return (0 === strpos($res['content_type'], 'image/'));
}

if ( hasHTTPImageHeader('http://imgur.com/2UymiGQ') ) {
  echo "Ja";
} else {
  echo "Nein";
}
echo "\n";

Jörg Reinholz

[pl]

use HTTPRequest;

print HTTPRequest->common(
    host => 'imgur.com',
    uri  => '/2UymiGQ',
    method => 'HEAD'
)->response_header->{'Content-Type'};

fertisch ;)

text/html; charset=utf-8

[Jörg Reinholz]

Moin!

node.js:

// need npm install request

var request = require('request');
request('http://imgur.com/2UymiGQ', function (error, response, body) {
  if (!error && response.statusCode == 200) {
    headers=(response.headers);
    console.log(headers['content-type']);
  }
})

Jörg Reinholz

[Jörg Reinholz]

Moin!

Meine Frau hat heute Möhren gekauft.

Man erhitze in einem ausreichend großem Topf:

250gr Schinkenwürfel

• 1 Tasse Öl
• 75gr Schweineschmalz
• 1 gehackte Zwiebel (nicht zu klein, sonst 2 oder 3)

Dann schnipple man nach und nach 1 Kg Möhren (gewaschen, eventuell um Übles beschnitten - aber in keinem Fall geschält!) zu Stücken von 0,5 Kubikzentimeter und brate die im Topf mit an.

Dann schäle und schnipple man nach und nach 1 Kg (oder mehr) Kartoffeln zu Stücken von 0,5 Kubikzentimeter und brate diese im Topf mit an.

Am Ende kippe man einen knappen 1 Liter kochendes Wasser darüber noch 2 (oder mehr) große geschälte (nicht zerteilte) Zwiebeln und lasse das Ganze kochen bis es gut schmeckt. Pfeffer, Salz, Petersilie ist ein Muss, weitere Gewürze sind natürlich optional.

Hat man mehr als 2 Männer zu versorgen muss man selbstverständlich einen größeren Topf haben und größere Mengen planen…

Jörg Reinholz

[Der Martin]

Hallo,

Meine Frau hat heute Möhren gekauft.

Man erhitze in einem ausreichend großem Topf:

250gr Schinkenwürfel

• 1 Tasse Öl
• 75gr Schweineschmalz
• 1 gehackte Zwiebel (nicht zu klein, sonst 2 oder 3)

und wie nennt sich dann das, was am Ende des Prozesses entsteht?

Ich habe nämlich den Eindruck, wenn man die Möhren weglässt, könnte das durchaus genießbar, vielleicht sogar wohlschmeckend sein. Was fehlt, ist eventuell etwas Käse.
Möhren sind allerdings nur roh genießbar. Ob geschält oder nicht, ist nicht so entscheidend; nur grob gewaschen sollten sie sein.

So long,
 Martin

[Jörg Reinholz]

Moin!

und wie nennt sich dann das, was am Ende des Prozesses entsteht?

Ohne Wasser: "Fettige Möhrenpampe". Mit Wasser: 3 Liter Möhreneintopf.

Jörg Reinholz

[Matthias Apsel]

Hallo Der Martin,

ja, Luis Peter hat leider ein komplettes HTML-Dokument angegeben, wo er eigentlich nur ein Bild hätte einbinden/referenzieren sollen. Ich frage mich, warum das so häufig vorkommt - er ist nicht der einzige und auch nicht der erste, der das macht.

Das ist mir auch schon ein paar mal aufgefallen. Vielleicht hat der @Christian Kruse eine zielführende Idee. Die von @Jörg Reinholz lässt sich sicher aufgreifen.

Bis demnächst
Matthias