Bilder Nebeneinander?

Hallo Leute,

ich hatte eine Frage bezüglich meines Codes. Ich habe 5 Bilder mit 5 Buttons darunter wie kann ich das alles zusammen in eine Reihe bringen so das unter jedem Bild ein Text steht.

1 Antwort

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren

05.03.2024, 19:22

Vermutlich ist sind Flexboxen die beste Lösung, das macht es dir einfach dein Layout anzupassen wenn nicht genügend Platz da ist.

So ordnest du die Container an in denen dein Bild und Button untereinander sind.

Und dann packst du in jedes Element eben dein Text und Button.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

Ähnliche Beiträge

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zum Beitrag

HTML, 2 Bilder in einer Reihe?

Hallo Leute,

Ich wollte gerade zwei Bilder in eine Reihe bringen. Des erste Bild auf die linke Seite zu bekommen und das zweite auf die rechte zu schieben, habe ich hinbekommen. Jetzt ist nur noch das Problem, dass die Bilder nicht nebeneinander, sondern untereinander sind.

Was muss ich hinzufügen, dass die Bilder in einer Reihe sind?

Pastebin.com/gccrXskr

...zum Beitrag

Was ist der Fehler hier im Code?

Hallo,

wie die Frage: Was ist der Fehler? Mich nervt dieser Rand darum. Ich habe einen Hintergrund eingefügt. Dann kam er um den Text und Buttons.

...zum Beitrag

Wie in einer HTML Website Text neben ein Bild machen?

Hi, ich programmiere gerade für eine Präsentation in der Schule eine Mini Website. Ich mach mal ein Bild vom Code des Bildes und von der ausgeführten Seite.

Ich will, dass das Bild rechts ist und links der Text, ohne das genau neben dem Bild Platz ist.

...zum Beitrag

Wie ändere ich einen Paragraph indem ich einen Button benutze mithilfe von HTML und Javascript?

Hallo zusammen,

ich benötige einen Code. Ich möchte einen Paragraphen anzeigen lassen mit einem Text, der sich auf Knopfdruck ändern lässt und immer eine Value weiter springt, wenn ich diesen Button anklicke. Wie schreibe ich diesen Code mit HTML und JS?

Ich finde leider nur Hilfe für einen Text, der sich nur einmalig per Knopfdruck ändert. Ich möchte aber, dass dieser sich jedes Mal ändert, sobald ich den Button nochmal anklicke.

...zum Beitrag

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zum Beitrag

Sobald <a> tag hinzugefügt wird verkleinert sich der Registrieren Button?

Hey also jeweils die ersten beiden Bilder zeigen wie ich es haben möchte und die letzten beiden was passiert sobald ich dies umsetze. Es klappt nicht dass der Registrieren Button auf normaler größe bleibt, sobald ich die angehängte HTML Datei in den Code tippe, schrumpft der Button. Hat irgendwer eine erklärung und ggf auch lösung.

Edit: liegt wohl nicht am A tag

...zum Beitrag

Abstand zwischen Bild und Text in CSS entfernen?

Also ich habe folgende Situation:

Der mittlere hellblaue Streifen soll direkt an die Bilder darüber und darunter sein, ohne diesen weißen Abstand dazwischen

Kann mir da jemand helfen?

...zum Beitrag

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zum Beitrag

HTML Akkordeon Problem?

Hallo

Ich habe ein Problem mit dem CSS:
- Ich möchte den HOVER des Buttons in dieser Farbe: #2C6194 und Text nicht blau
- und wäre es leicht das responsive anzupassen?
Bild oben und Text unten auf dem mobile?
Hier der Quelltext: HIER

Danke für die Mithilfe! Komme leider nicht weiter....

...zum Beitrag

QR Code Generator Download button API generietes Bild?

Hallo, ich möchte gerade einen QR Code Generator programmieren. Dafür benutze ich die Library qrserver und jetzt möchte ich auch einen Download button hinzufügen. Ich habe ja aber keine feste source also habe ich probiert dem download einfach die selbe ID wie dem Img ohne source zu geben. Das hat aber nicht funktioniert, hat jemand eine Idee?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QR Code Generator</title>


    <script src="js/script.js"></script>


    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>QR Code Generator</h1>


    <div class="container">
      <p>Enter URL</p>
      <div class="ButonInput">
        <input type="text" placeholder="Your URL" id="qrText" />
        <button onclick="GenerateQR()" id="btn">Generate</button>
      </div>
      <div id="imgBox">
        <img src="" alt="" id="QrImg" />
      </div>
      <a href="" download="QrImg.src " id="QrImg"> download</a>
    </div>


    <script>
      let imgBox = document.getElementById("imgBox");
      let QrImg = document.getElementById("QrImg");
      let qrText = document.getElementById("qrText");


      function GenerateQR() {
        QrImg.src =
          "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
          qrText.value;
      }
    </script>
  </body>
</html>

...zum Beitrag

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zum Beitrag

Wie kann ich zwei DIV-Elemente nebeneinander bekommen?

Hallo,

ich wollte eine Internetseite mit HTML erstellen, auf der ich mich im Kopfbereich vorstelle und rechts von mir ein Bild sein soll.

Kann mir jemand helfen, wie ich das hinbekomme? Wie bekomme ich die div-Elemente nebeneinander? Und wie kann ich dem div dann sagen, dass das Bild oben rechts sein soll und in dem anderen div der Text zentriert wird?

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen