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

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

Fragesteller

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

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ß

Ähnliche Fragen

Hi mr robot Betriebstsystem?

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

...zur Frage

Computerkenntnisse wie in Mr. Robot lernen?

Hi, was muss man lernen, um so wie dieser Elliot aus Mr Robot an Servern, Terminals und PCs arbeiten zu können? Hat da jemand Internetseiten oder Bücher?

...zur Frage

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?

...zur Frage

Footer ganz unten, wie?

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

Hier die Skripte:

...zur Frage

Text Overlay bei Bildern: "live"-Version komplett falsch (CSS)?

Hallo,

ich versuche bei bestimmten Bildern ein Overlay als Text zu haben, welches am Bild oben rechts platziert wird. Ich habe ein bisschen was gebastelt und zusammen gesucht, aber der Overlay liegt nicht über dem Bild, sondern scheint sich am Bildschirm zu orientieren. Er soll eigentlich nur beim zweiten Bild erscheinen und die Bilder davor und danach sollen sich einreihen, das tut er aber nicht.

https://codepen.io/gooloonetwork/pen/MWQXzbd

Das Problem ist aber, dass es auf der Live-Webseite (www.gooloo.de/partner) so aussieht (die Bilder sind extrem klein und "zusammen gedrückt"):

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

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?

...zur Frage

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

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

...zur Frage

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.

...zur Frage

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

...zur Frage

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;
}

...zur Frage

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zur Frage

Wie ändere ich das HTML Standard Layout in VSC?

Ich habe ein Problem, ich mache viel mit HTML in Visual Studio Code und ich benutze immer den Befehl "!" und dann Tab, um das standard Layout von HTML zubekommen, aber leider ist dies immer in language = "en" und ich würde gerne dies zu Deutsch ändern. Weiß jemand wie das geht?

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen