Icon/Logo in obere Zeile bekommen HTML und CSS?

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
FinnB132
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
23.01.2020, 21:50

Du nimmst die entsprechende html Zeile mit dem Image Tag und platzierst die in der <ul></ul>.

Bitte in Zukunft Text statt schlechte Aufnahmen deines Monitors.

LG
Woher ich das weiß:Studium / Ausbildung – Gelernter Fachinformatiker, Freiberufl. Softwareentwickler
AitazzaFrage  23.01.2020, 21:52

Wenn man das Bild in voller Größe ansieht, muss sie/er nicht extra den gesamten Text hier rein kopieren...

verreisterNutzer  23.01.2020, 21:52

Und PS: wenn du die Fotos im Web aufsuchst dann kannst du alles lesen

verreisterNutzer  23.01.2020, 21:51

Hab ich schon probiert, funktioniert nicht. Oder ich habe es einfach falsch gemacht. Ich probiere es morgen noch einmal🙃

FinnB132  23.01.2020, 21:53
@verreisterNutzer

Wie gesagt, wenn du deinen Code als Text anhängst, können andere dir anhand dieses die Fehler/Verbesserungen zeigen.
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
23.01.2020, 22:15

Dein HTML Markup ist nicht valide; bevor du also weitermachst, solltest du erstmal für eine gescheite Grundlage sorgen und semantische Fehler beseitigen. Eingebundene Stylesheets gehörten in <head> Bereich deines Dokuments, der hier aber gänzlich fehlt.

HTML Markup: 

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="utf-8"/>
  <title></title>
  <link rel="stylesheet" href="path/style.css">
 </head>
 <body>
  <!-- content comes here!  -->
 </body>
</html>

Beispiel - Navigation:

<nav>
 <!-- Branding -->
 <h1 class="logo"><a class="logo__link" href="/">Logo</a></h1>
 <!-- Menu -->
 <ul class="list">
  <li class="list__item"><a class="list__link" href="#">Page 1</a></li>
  <li class="list__item"><a class="list__link" href="#">Page 2</a></li>
 </ul>
 <!-- Social Crap -->
 <a class="link" href="#"><img class="link__img"src="image.png"></a>
</nav>

LG medmonk

Woher ich das weiß:Berufserfahrung
regex9  23.01.2020, 23:15

Wobei der title-Tag auf jeden Fall mit Nicht-Whitespaces ausgefüllt (in der Antwort vermutlich ausgelassen, weil der FS über den Inhalt entscheiden muss) und das berühmt-berüchtigte alt-Attribut auf dem img-Tag nicht vergessen werden sollte. 😜

medmonk  24.01.2020, 02:16
@regex9

Alles was du geschrieben hast ist zutreffend. Ich wollte einen Umbruch des Editors umgehen, das alt-Attribut daher fehlt. Tags die vorhanden sind, sollte man dann auch verwenden – Ergo title ausfüllen 😉

AitazzaFrage
23.01.2020, 21:54

Würde mal versuchen das Logo in den Header zu packen(soll ja außerdem in den headbereich, also warum nicht gleich?:D) und dann etwas rumprobieren mit margin
Woher ich das weiß:eigene Erfahrung