Frage Umsetzung Logo auf HTML

[Lightness4]

Hallo liebe Forumgemeinde,

ich bin ein Neuling im Bereich HTML und habe daher eine wahrscheinlich für viele triviale Frage jedoch scheitere ich an einer Aufgabe.
Ich würde gerne mein doch sehr simples Logo in html umsetzen um dieses leichter an einigen verschiedenen Stellen einbinden zu können.
Bei dem Logo handelt es sich um 3 Buchstaben:
RTC, wobei das Problem der 3. Buchstabe darstellt, da dieser bei meinem Logo von einem Kreis umschlossen ist.
Mein Problem ist jetzt, dass ich es schon hinbekommen habe, diesen Kreis zu schreiben, jedoch ist das C innerhalb des Kreises nach links verschoben und ich kriege partout nicht raus, wie ich dieses Problem beheben kann.
Zur Veranschaulichung packe ich das Logo unten rein.
Ich hoffe ihr könnt mir helfen und ich mute euch nicht zu viel Arbeit zu.
Ich bin wie gesagt ein HTML-Neugeborener und habe leider keine Ahnung. :/

Mit freundlichen Grüßen
Moritz

 

[Sailor]

Die Frage verstehe ich nicht... welche Vorteile bringt es dir, dieses Logo in HTML nachzubauen?
Warum nimmst du nicht einfach das Bild... hast du hier ja als Anhang eingefügt... machst im Zweifel daraus ein .png oder .svg mit transparentem Hintergrund und fügst das an beliebigen Stellen... in jeder Größe und deutlich einfacher ein, als es mit einem HTML Code möglich wäre.

 

[Lightness4]

Ich hatte vor einiger Zeit einige Kunden, die nur die Bildinformationen aufgeschlüsselt angezeigt bekommen haben.
Ich hoffe dieses Problem mit dem Code umgehen zu können.
Das Bild liegt mir in diversen, auch Vektordatei-, Formaten vor.

 

[Aaron3219]

Na siehst du, dann hast du doch alles was du brauchst. Logos sollten in der Regel in Vektorformaten eingebunden werden, um einfach dieses blöde Pixeln beim Heranzoomen zu verhindern. Das Bild könntest du theoretisch einfach als <img> einbinden. Doch einige Browser (z.B. der IE) unterstützen SVGs nicht.
Was also gemacht werden kann (und eigentlich auch sollte), ist, dass SVG in einen Font einzuarbeiten. Es also zu einer Schriftart zu machen.
Diese wird normal über <link> eingebunden.
Der Wrapper deines Logos muss dann nur noch auf die entsprechende Schriftart umgestellt werden.

Edit:
Ansonsten, solltest du mit position: relative; den Buchstaben verschoben bekommen.

 

[Aaron3219]

IE11 unterstützt schon SVG, siehe hier:

schon...
Die erste Version von SVGs kam im Jahre 2001 raus.
Und die meisten anderen Browser, die von der Allgemeinheit genutzt werden, unterstützen es schon deutlich länger.

Aber ich habe gerade mal nachgeschaut und es scheint wohl tatsächlich so zu sein, dass SVGs mittlerweile unterstützt werden:
https://caniuse.com/#search=SVG

Dennoch tendiere ich zu meiner Lösung.

 

[basti1012]

Warum nicht CSS?
*** Link entfernt, weil nicht mehr erreichbar ***
Kann man noch etwas verbessern, aber mit etwas Geschick könnte das auch klappen.

 

[Sailor]

Wenn du dich gar nicht mit den Lösungen mittels .svg und .png anfreunden kannst, dann versuche mal meine HTML / CSS Lösung.
Das CSS:

.logo {
  font-family: Palatino, Georgia, Tahoma, sans-serif;
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
}
.logo-left {
  color: #f00;
}
.logo-right {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
}
.logo-span {
  height: 2em;
  line-height: 2em;
}

Und das zugehörige HTML:

<div class="logo">
  <div class="logo-left">RT</div>
  <div class="logo-right">
  <span class="logo-span">C</span>
</div>

Die Größe des Logos solltest du durch Veränderung des Wertes für 'font-size' in der Klasse '.logo' einstellen können.

 

[Sailor]

uppsss... habe gerade festgestellt, dass meine Lösung so im Safari nicht funktioniert... bitte deswegen den CSS Teil wie folgt ändern/ergänzen:

.logo {
  font-family: Palatino, Georgia, Tahoma, sans-serif;
  display: table;
  display: -webkit-flex;
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
}
.logo-left {
  display: table-cell;
  color: #f00;
}
.logo-right {
  display: table-cell;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
}
.logo-span {
  height: 2em;
  line-height: 2em;
}

und leider noch ein Fehler... da fehlt das schließende </div> beim .logo-right!
Richtig wäre es so:

<div class="logo">
  <div class="logo-left">RT</div>
  <div class="logo-right">
    <span class="logo-span">C</span>
  </div>
</div>

 

[Lightness4]

Vielen vielen Dank schonmal für die Antworten, ihr seid echt absolut super!
Ich habe die Einstellungen jetzt soweit angepasst wie ich sie brauche:
Jetzt muss ich nur noch wissen, wie ich css in html reinbekomme wie gesagt ich bin ein totaler Anfänger:(

 

[Sailor]

Dann sag uns mehr über deine Seite - ein Link zur Seite wäre zum Beispiel sehr vorteilhaft. Dann könnte an sehen, wie deine Seite aufgebaut ist und wo du dein CSS gespeichert hast... und dir dann auch seriös weiterhelfen.

 

[basti1012]

wenn dann über externe datei einbinden

<link rel="stylesheet" type="text/css" href="link.css">

oder im head

<head>
<style>
hier der css code
</style>
</head>