Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

Bild zum Beitrag

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

3 Antworten

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

25.02.2023, 13:58

Text unter Bild in HTML hinzufügen?

<style>
figure { width:1000px; }
img, figcaption { width:100% }
</style>

<figure>
    <img src="..." alt="">
    <figcaption>Hier der Text</figcaption>
</figure>

Alex

NackterGerd

25.02.2023, 14:13

Wieso 1000px ?

EinAlexander

25.02.2023, 14:14

@NackterGerd

Wieso 1000px ?

Weiß ich doch nicht, warum er das Bild 1.000px breit haben will.

NackterGerd

29.09.2023, 04:18

@EinAlexander

Macht aber keinen Sinn, bei kleinerer Display Größe wäre das Bild zu groß

Zwnow

25.02.2023, 13:56

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}



p {
    max-width: 1000px;
}

Guck dir am besten mal an was Flexbox ist, dann wird das mit dem Design ganz easy^^

Woher ich das weiß:Berufserfahrung – Ich bin Entwickler.

NackterGerd

25.02.2023, 13:50

Du musst halt mit DIV oder GRID arbeiten damit der Text an das Bild angepasst werden kann

Z.b.

https://www.w3schools.com/css/css_grid.asp

ArdaS716

Beitragsersteller

25.02.2023, 13:51

gott das wird ja immer komplexer. aber danke dir, werde mich dort mal umsehen.

NackterGerd

25.02.2023, 14:12

@ArdaS716

Wieso komplex

Eigentlich reicht hier wohl schon ein DIV mit

margin left auto 
margin right auto

Ähnliche Beiträge

Hi mr robot Betriebstsystem?

Hi hat jemand die Ahnung welches betriebssystem Elliot in mr robot verwendet

...zum Beitrag

Gute Hacker/Cyber Serien und Filme ähnlich Mr Robot?

Hallo Leute hab Mr Robot durchgeschaut und fand mega geil weil eben auch echte Tools verwendet wurden also alles mit echten Tools war und Darleen eif Legenden aber kennt ihn andere Filme Serien mit Hacker oder so Hacker Teams die was planen und machen?

...zum Beitrag

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zum Beitrag

Wie bekomme ich mit "js" alle Elemente/Klassen eines Dokuments?

Frage steht im Titel. Mehr gibts dazu erstmal nicht zu sagen.

...zum Beitrag

Mr. Robot erste Folge Ron hack Erklärung?

Was macht Elliot um den Traffic zu kontrollieren bzw. Was bedeutet das eig. ? Ist nicht Tor übels sicher? Was für Methoden könnte er verwendet haben um Zugriff darauf zu kriegen. Einzelne Stichpunkte ohne Erklärung würden reichen ich würd selber auch herausfinden was das dann entsprechend ist, also eine Erklärung der Begriffe ist nicht nötig. Ich würde nur gerne Wissen wie Elliot vorgegangen sein könnte, da gibt es ja mehrere Möglichkeiten.

Meine Theorie:

Er könnte Zugriff auf sein Gerät sich durch Phishing geholt haben, daraufhin hat er wahrscheinlich gesehen wo er sich mit was eingeloggt hat und hat damit Zugriff auf alles, aber das macht für mich keinen Sinn, weil dieser Ron ja Leute hat die für eine Sicherheit sorgen oder nicht?

...zum Beitrag

Unterschied <DIV> und <Selection>, <Header>, <Fooder>?

Sind das alles Container? Was ändert sich dabei jeweils? Ist es egal, welches man nimmt und es geht nur um die Lesbarkeit im Code?

...zum Beitrag

Footer ganz unten, wie?

Hey! Ich möchte meinen footer ganz unten haben und in oller breite! Wie mache ich das?

Hier die Skripte:

...zum Beitrag

HTML, wie Footer ganz nach unten?

Mit Position absolute passt es nicht, weil wenn die Seite 100vh übersteigt, dann ist es nicht ganz unten

        footer{
            margin: 0cm;
            padding: 0cm;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: palevioletred;
        }

...zum Beitrag

Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Kommentar JavaScript/CSS/HTML?

Hallo,

ich arbeite mit der VSC und weiss immer noch nicht wie man schnell mit den Tasten auf der Tastatur Kommentare erstellt. Könnt ihr helfen? dankeschön im Voraus!
LG

...zum Beitrag

Microsoft Edge zeigt HTML Code nur in html an und nicht so wie´s eig. sein soll?

Wie kann ich das ändern?

Habe das auf Visual Studio Code gemacht.

...zum Beitrag

Bild Datei ins selbe Verzeichnis bringen wie html Datei?

Wie schaffe ich das wenn meine html Datei in VS drin ist? Ich hab keine ahnung wie ich die in einen externen Ordner tun soll.

Wie soll ich den Pfad angeben?

(Bild ist im Ordner namens Pegasus, Bild heißt landschaft.jpg)

Ist kein Problem das Bild woanders hin zu tun damit es einfacher geht, ich weiß nur nicht wie.

So habe ich das gemacht:

body {
        font-family: helvetica, arial;
        font-size: 90%;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        justify-content: center;
        text-align: center;
        background-image: url(Pegasus/landschaft.jpg);
        background-attachment: fixed;
        background-size: cover;
      }

...zum Beitrag

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen