Zum Inhalt springen

Mehrere html Badges nebeneinander anordnen


cocktail92

Empfohlene Beiträge

Hi,

bin neu hier und eine kleine Randinfo zu mir: ich kenne mich in Sachen html, css, etc überhaupt nicht aus. 

Haben das Zeug vor Jahren in der Schule mal angesprochen und ein wenig rumgespielt, aber das ist einfach zu lange her.

Nun zu meiner Frage und gleichzeitigen Bitte, ich würde gerne die 3 Badges auf den Screenshots nebeneinander einbetten. 

Mit Float left, right, center habe ich es bereits geschafft sie zu Positionieren, nur leider links, mitte, rechts untereinander folgend, nicht in der selben Zeile bzw. Höhe.

Die angehängte txt Datei ist der Code, könnte mir hier zufällig jemand sagen wo ich was einfügen muss, oder mir den Code ggfs. sogar so schreiben,

damit sie wirklich alle auf selber Höhe nebeneinander angeordnet sind?

Viele Grüße

 

PS.: Falls es hier nicht hingehört, tut es mir Leid, dachte jedoch, dass sowas für erfahrene IT'ler nur eine Basicaufgabe ist 😅

Bild1.jpg

Code.txt

Bearbeitet von cocktail92
Link zu diesem Kommentar
Auf anderen Seiten teilen

vor 1 Minute schrieb Max112:

Wenn das für dich Spanisch ist empfehle ich dir erstmal ganz Basic anzufangen. Für badges anordnen empfiehlt sich eine tabelle

Hi, danke für deinen Beitrag, aber ich habe ja grundlegend nicht gesagt, dass ich einen Crashkurs etc. suche, sondern eher um eine einmalige Hilfestellung gebeten, da ich normalerweise nie mit sowas zu tun habe und grade einfach nicht weiter weiß :D

Link zu diesem Kommentar
Auf anderen Seiten teilen

Die Hilfestellung hast du, eigentlich, schon erhalten: Beschäftige dich mit den Basics.

Das ist wertvoller als wenn dir jemand eine Tabelle o.Ä. zusammen frickelt. Aber, bitte...

<table>
  <tr>
    <td>
      <script type="text/javascript">(function () {var e = document.getElementsByTagName("head")[0] || document.documentElement;var d = document.createElement("script");d.src= "https://widget.myhammer.com/tradesman/seal/fetch/2335041f-c548-11ea-af49-0a81bf13ed96";d.type = "text/javascript";d.async = true;d.defer = true;e.insertBefore(d, e.firstChild);})();</script><a id="myhammer-widget-2335041f-c548-11ea-af49-0a81bf13ed96" rel="nofollow" href="https://www.my-hammer.de">MyHammer - Handwerkerportal Nr. 1</a>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-fce3d9e5-d329-4513-95da-d5c45f4c8a69"></div>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-8a14d47e-01e6-4101-a44b-05fd8872084f"></div>
    </td>
  </tr>
</table>

Viel Vergnügen. 😉

Link zu diesem Kommentar
Auf anderen Seiten teilen

vor 43 Minuten schrieb Visar:

Die Hilfestellung hast du, eigentlich, schon erhalten: Beschäftige dich mit den Basics.

Das ist wertvoller als wenn dir jemand eine Tabelle o.Ä. zusammen frickelt. Aber, bitte...


<table>
  <tr>
    <td>
      <script type="text/javascript">(function () {var e = document.getElementsByTagName("head")[0] || document.documentElement;var d = document.createElement("script");d.src= "https://widget.myhammer.com/tradesman/seal/fetch/2335041f-c548-11ea-af49-0a81bf13ed96";d.type = "text/javascript";d.async = true;d.defer = true;e.insertBefore(d, e.firstChild);})();</script><a id="myhammer-widget-2335041f-c548-11ea-af49-0a81bf13ed96" rel="nofollow" href="https://www.my-hammer.de">MyHammer - Handwerkerportal Nr. 1</a>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-fce3d9e5-d329-4513-95da-d5c45f4c8a69"></div>
    </td>
    <td>
      <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-8a14d47e-01e6-4101-a44b-05fd8872084f"></div>
    </td>
  </tr>
</table>

Viel Vergnügen. 😉

Vielen Dank, hat mir sehr geholfen!

 

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dir wird beim Lesen ja aufgefallen sein, dass der Autor wenig bis keine Lust hat sich mit dem Thema auseinanderzusetzen. Dann wird die Lösung eben quick and dirty, bevor ich meine Zeit in Flexbox und ggf. noch die Suche nach einem passenden Polyfill investiere, sofern auch ältere IE-Versionen unterstützt werden sollen.

Sonst bin ich da ganz bei dir. Flexbox wäre passender, aber wenn er mit einer Tabelle genauso glücklich ist..

Link zu diesem Kommentar
Auf anderen Seiten teilen

vor 18 Minuten schrieb Visar:

[...] sofern auch ältere IE-Versionen unterstützt werden sollen.

Wenn man lieber 50% der mobilen Nutzer ausschließen möchte, nur um 1% der älteren Browser zu unterstützen... Kann man so machen ;)

vor 20 Minuten schrieb Visar:

Dir wird beim Lesen ja aufgefallen sein, dass der Autor wenig bis keine Lust hat sich mit dem Thema auseinanderzusetzen.

Naja, das hast du jetzt so interpretiert. Er möchte kein Bootstrap lernen (was ich nachvollziehen kann, weil es sich ja nur um ein einzelnes Problem handelt bei dem das komplette Bootstrap op wäre). Aber ein bisschen HTML/CSS Erfahrung hat er ja und da denke ich, dass ein wenig Flexbox doch möglich wäre. Uudem kann man mit dem richtigen Stichwort auch über Google einiges finden (zB "flexbox divs nebeneinander anordnen").

Link zu diesem Kommentar
Auf anderen Seiten teilen

vor 4 Minuten schrieb pr0gg3r:

Naja, das hast du jetzt so interpretiert.

Stimmt wohl, aber: Seine Erfahrung bezieht sich ausschließlich auf Gefrickel in der Schulzeit, die mehrere Jahre zurückliegt. Er selbst scheint nicht mehr zu wissen, wie eine Tabelle erstellt wird, weshalb soll ich da dann mit DIVs, Flexbox und CSS ankommen und ihn damit erschlagen? Könnte ich natürlich, aber...

Ich könnte ihn genauso gut an 'ne Seite wie https://www.cssportal.com/css-flexbox-generator/ verweisen, wo ihm HTML & CSS direkt ausgespuckt werden. Problem dabei ist, dass Flexboxen relativ viele Optionen beinhalten und solange er sich nicht damit beschäftigt, wird er nicht verstehen, was er da überhaupt macht - oder was ich ihm da zusammengestückelt habe. Tabelle ist nicht schick, nicht modern und für Mobilgeräte auch eher ein Krampf, aber sie ist einfach, geht schnell und erfüllt die Anforderungen. Wir wissen ja auch nicht, wo er das überhaupt benötigt. Im Zweifelsfall ist der Ansatz also vielleicht sogar vertretbar, insbesondere, sofern es gar keine für Mobilgeräte optimierte Version der Seite gibt.

Vielleicht ist es auch totaler Nonsens. Aus der Anfrage lässt sich das leider nicht weiter ableiten.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Also ums kurz zu erklären, ich bin im Grunde ein einfacher Kfz-Mechatroniker und Autoglaser, der mit IT eigentlich überhaupt nichts am Hut hat. Ich versuche nur nebenzu über Strato einen kleinen Online-Shop für Kfz-Ersatzteile aufzubauen und hier gibt es natürlich die Funktion verschiedene Seiteninhalte einzustellen, darunter auch HTML Felder. Da ich weiß, dass man mit HTML etc. natürlich Internetseiten gut aufhübschen kann, wollte ich mittels diesen einfach Bewertungsbadges von anderen Seiten auf denen meine Firma vertreten ist mit einbringen in den Online-Shop um dadurch eventuell mehr Vertrauen zu gewinnen und mehr Menschen dazu zu bringen auch was zu bestellen.

Ihr könnt natürlich gerne mal auf der Seite vorbeischauen und eventuell Vorschläge preisgeben wenn euch danach ist. Aber wie gesagt kann ich mit IT einfach absolut nichts anfangen. Ich bau euch gerne eure Motoren auseinander und wieder zusammen oder sonst was, da hat einfach jeder seine eigenen Stärken und Schwächen, zudem habe ich momentan auch nicht wirklich die Zeit dazu mich großartig mit so etwas komplexen zu beschäftigen, daher natürlich auch nur ein Website Baukasten und nichts spezielles.  Online-Shop

 

Edit: Wie weiter oben erwähnt wurde, ja die Badges werden auf dem Handy leider nicht so angezeigt wie auf dem normalen Bildschirm, aber momentan kann ich soweit damit Leben, daher nochmal ein Dankeschön!

Bearbeitet von cocktail92
Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...