3 bilder mit text nebeneinander sotieren html und css?

1 Antwort

indexhtml
23.05.2022, 21:19 
<head>
<style>#produkte{
display:flex;
justify-content: center; 
}  
</style> 
</head>


<body>

   <div id="produkte" >

   </div>  

</body>

dann pack alles in den Div Produkte rein was nebeneinander stehen soll.

Würde sagen du solltest dir mal eine lange Css Playlist ansehen bevor du damit weiter machst mit der Website für ein Restaurant.
Andi1988w  06.10.2022, 20:49

Sorry habs grad selbst rausgefunden :D manchmal hilft es wenn man sich paar tagen Pause gönnt :D schönen Abend noch :P

Andi1988w  06.10.2022, 20:36

Servus @indexhtml hab grad deine Antwort gesehen.. Kannste mir mal mal sagen wie ich ein Div Container mit 3 Objekten schreibe?

<div class="headup">

  

  <div class="image-container1">

    <img src="achtsamkeitlinks.jpg" height="750px"; width="750px";>

  </div>

  <div class="image-container2">

    <img src="tagebuchrechts.jpg" height="750px"; width="750px";>

  </div>

Da muss noch ein Text rein in die Mitte ein Bild ist links und eins rechts und in der Mitte brauch ich wie gesagt ein txt...

Über eine Antwort wäre ich voll dankbar :P!

R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:23

alles bei head rein machen

indexhtml  23.05.2022, 21:28
@R1Z3Mo

Nur das Style in den Head.

Div in den Body

und in den Div machst du deine ganzen Döner sachen rein.
Und Yasse benutz lieber Chrome statt Edge

R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:35
@indexhtml

das funktioniert nicht kannst du mir bitte helfen
R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:20

wo muss ich das eingeben bei style oder bei body

indexhtml  23.05.2022, 21:21
@R1Z3Mo

Den Div in dein body,

Und in style das display flex.
style ist immer im Head

R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:29
@indexhtml

muss ich ihr zwischen

"<div id="produkte" >

</div>"

also muss ich dann da zwischen dann das hin schreiben

<div class="box">

            <img src="Döner Teller.jpg" alt="">

            <h3> Döner Teller </h3>

            <div class="content">

                <span>6€</span>

                <a href="#">In den Warenkorb</a></div>

indexhtml  23.05.2022, 21:34
@R1Z3Mo 
"<div id="produkte" >

<!—- erstes Produkt —->
      <div class="box">
     <img src="Döner Teller.jpg" alt="">
            <h3> Döner Teller </h3>
            <div class="content">
                <span>6€</span>
      </div>
    <!--     Nächstes Produkt hier rein   —>


</div>


So zum Beispiel.
R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:36
@indexhtml

wie füge ich genau denn zweiten hin

R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:37
@indexhtml

also so

"<div id="produkte" >

<!—- erstes Produkt —->
      <div class="box">
     <img src="Döner Teller.jpg" alt="">
            <h3> Döner Teller </h3>
            <div class="content">
                <span>6€</span>
      </div>
    <!--     Nächstes Produkt hier rein   —>
<div class="box">
     <img src="Döner Teller.jpg" alt="">
            <h3> Döner Teller </h3>
            <div class="content">
                <span>6€</span>

</div>
indexhtml  23.05.2022, 21:38
@R1Z3Mo

Da fehlt das </div> Beim zweiten produkt. Und den kommentar von mir kannst du wegmachen.

<!— —>

indexhtml  23.05.2022, 21:40
@R1Z3Mo

Schick mir mal deinen gesamten code, bin gleich sowieso am pc xD

R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:40
@indexhtml

also das <div class="box">

und habe noch eine frage muss ich denn befehl <sectionV> benutzen

R1Z3Mo 
Beitragsersteller
 23.05.2022, 21:44
@indexhtml 
<!DOCTYPE html>
<html lang="de">
<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>Kebo Döner</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  


<style>
     .navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    a {
     color: black;
     text-decoration: none;
     margin-left: 16px;
     font-weight: bold;
    }
    a:hover{
        text-decoration: underline;
    }
    .header-image{
        width: 100%;
        height: 350px;
        object-fit: cover;
    }


body {
    font-family: 'Open Sans', sans-serif;
    padding-left: 100px;
    padding-right: 100px;
}


.image-container{
    background-color: black;
    padding: 16px;
}
a:hover{
    text-decoration: underline;
}
.heading{
    text-align: center;
    margin: 50px;


}
.heading h2 {
    font-size: 1,8rem;
    text-transform: uppercase;
}
.Produkte-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax (280px, auto));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .Produkte-container .box{
  position: relative;
  padding: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.5rem;
  box-shadow: var(--box-shadow);
  }
  .Produkte-container img{
  width: 30%;
  height: 250px;
  object-fit: contain;
  object-position: center;
  padding: 1px;
  background-color: #f1f1f1;
  border-radius: 0.5rem;
  }
  .Produkte-container .box h3 {
      font-size: 1rem;
      font-weight: 600;
      text-transform: uppercase;
      margin: 0.2rem 0 0.2rem;
  }
  .Produkte-container .box .content {
      display: flex;
      align-items: baseline;
      justify-content: space-around;
      padding-right: 24cm;
    }
    .Produkte-container .box .content span {
        padding: 0 1rem;
        color: var(--bg-color);
        background: var(--main-color);
        border-radius: 4px;
        font-weight: 500;
    }
    .Produkte-container .box .content a {
        padding: 0 1rem;
        color: var(--text-color);
        border: 4px;
        border-radius: 4px;
        text-transform: uppercase;
    }
    .Produkte-container .box .content a:hover{
        background-color: var(--main-color);
        color: var(--bg-color);
        transition: 0.2s all linear;
    }
 
</style>
</head>
<body>
    
    <div class="navbar">
    
    <h1>
        Kebo Döner
        </h1>
        <div>
            <a href="index.html">Home</a>
            <a href="öffnungszeiten.html">Öffnungszeiten</a>
            <a href="Standort.html">Standort</a>
            <a href="Über uns.html">Über uns</a>
        </div>
       </div>
        <div class="image-container">
        <img class="header-image" src="header.jpg">
    </div>
    <section class="Produkte" id="Produkte">
        <div class="heading">
            <h2> Unsere beliebten Produkte </h2>
        </div>


       <div class="Produkte-container">


        <div class="box">
            <img src="Döner Teller.jpg" alt="">
            <h3> Döner Teller </h3>
            <div class="content">
                <span>6€</span>
                <a href="#">In den Warenkorb</a></div>
            
        
        <div class="box">
            <img src="Döner.jpg" alt="">
            <h3> Döner </h3>
            <div class="content">
                <span>4,50€</span>
                <a href="#">In den Warenkorb</a></div>


            <div class="box">
                <img src="Kebab Döner.jpg" alt="">
                <h3> Kebab Döner </h3>
                <div class="content">
                    <span>4,50€</span>
                    <a href="#">In den Warenkorb</a></div>
            
                <div class="box">
                    <img src="Dürüm.jpg" alt="">
                    <h3> Dürüm </h3>
                    <div class="content">
                        <span>5€</span>
                        <a href="#">In den Warenkorb</a></div>
                </div>
                    <div class="box">
                        <img src="Döner Box.jpg" alt="">
                        <h3> Döner Box </h3>
                        <div class="content">
                            <span>5.50€</span>
                            <a href="#">In den Warenkorb</a></div>
             




        </div>
    
    


    </section>
    
</body>
</html>
R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:05
@indexhtml

willst du mir das machen bro wenn ja dann vielen dank

indexhtml  23.05.2022, 22:22
@R1Z3Mo

Dein Code war mir zu unübersichtlich deswegen hab ich etwas eigenes gemacht.

Das Bild das ich benutzt habe:

https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/D%C3%B6ner_kebab.jpg/767px-D%C3%B6ner_kebab.jpg .

<!DOCTYPE html>
<html lang="de">
<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">
    <link rel="icon" href="döner.jpg">
    <title>Kebo Döner</title>
<style>
    body{
    margin: 0;
    text-align: center;
    }    
    nav{
    background-color: black;
    padding: 4%;
    display:flex;
    justify-content: space-around;
    }
    #Kebo{
       color:white ; 
       font-size: x-large;
    }
    #produkte{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 2%;
    }
    img{
    width: 50%;
    }
    a{
    color: white;
    text-decoration: none;
    }
</style>
</head>
<body>
<nav>
    <span id="Kebo">Kebo Döner</span> 
    <a>Home</a>
    <a>Standort</a>
    <a>Contact</a>
    <a>Impressum</a>
</nav>
<h1>Unsere Beliebtesten Produkte</h1>
<div id="produkte">
        <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>                      
       </div>


       <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>                      
       </div>


       <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>         
       </div>


       <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>         
       </div>
</div>


<div id="produkte">
        <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>                      
       </div>

       <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>                      
       </div>

       <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>         
       </div>

       <div class="box">
        <img src="döner.jpg">
        <h3>Döner Teller</h3>
        <span>6€</span>         
       </div>
</div>
</body>
</html>
R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:25
@indexhtml

könnte man vielleicht so machen das 3 pro reihe und bilder bisschen größer und sie haben das mit in warenkorb legen vergessen

<a href="#">In den Warenkorb</a></div>

R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:30
@R1Z3Mo

das mit 3 produkte habe ich gemacht

indexhtml  23.05.2022, 22:37
@R1Z3Mo 
<!DOCTYPE html>
<html lang="de">
<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">
    <link rel="icon" href="döner.jpg">
    <title>Kebo Döner</title>
<style>
    body{
    margin: 0;
    text-align: center;
    }    
    nav{
    background-color: black;
    padding: 4%;
    display:flex;
    justify-content: space-around;
    }
    #Kebo{
       color:white ; 
       font-size: larger;
    }
    #produkte{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 2%;
    }
    img{
    width: 80%;
    }
    .nav-text{
    color: white;
    text-decoration: none;
    }
    .produkt-name{
        font-size: larger;
        font-weight: bolder;
    }
    button{
        padding: 2%;
    }


</style>
</head>
<body>
<nav>
    <span id="Kebo">Kebo Döner</span> 
    <a class="nav-text">Home</a>
    <a class="nav-text">Standort</a>
    <a class="nav-text">Contact</a>
    <a class="nav-text">Impressum</a>
</nav>
<h1>Unsere Beliebtesten Produkte</h1>
<div id="produkte">
        <div class="box">
        <img src="döner.jpg">
        <div class="produkt-name">Döner Teller</div class="produkt-name">
        <span class="preis">6€</span> <br>
        <button>Add To Cart</button>
       </div>


       <div class="box">
        <img src="döner.jpg">
        <div class="produkt-name">Döner Teller</div class="produkt-name">        
        <span class="preis">6€</span> <br>
        <button>Add To Cart</button>            
       </div>


       <div class="box">
        <img src="döner.jpg">
        <div class="produkt-name">Döner Teller</div class="produkt-name">
            <span class="preis">6€</span> <br>
            <button>Add To Cart</button>      
       </div>
</div>


<div id="produkte">
    <div class="box">
    <img src="döner.jpg">
    <div class="produkt-name">Döner Teller</div class="produkt-name">
    <span class="preis">6€</span> <br>
    <button>Add To Cart</button>
   </div>


   <div class="box">
    <img src="döner.jpg">
    <div class="produkt-name">Döner Teller</div class="produkt-name">        
    <span class="preis">6€</span> <br>
    <button>Add To Cart</button>            
   </div>


   <div class="box">
    <img src="döner.jpg">
    <div class="produkt-name">Döner Teller</div class="produkt-name">
        <span class="preis">6€</span> <br>
        <button>Add To Cart</button>      
   </div>
</div>
</body>
</html>
R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:37
@indexhtml

hab alles gemacht aber wie kann ich ein botten machen wo steht in warenkorb legen dsas wenn leute drauf klicken geht

indexhtml  23.05.2022, 22:38
@R1Z3Mo

<a href="#">In den Warenkorb</a></div>

wäre dumm wenn du etwas hinzufügen willst.

Da musst du schon einen Button nehmen und mit JavaScript Funktionen/Events arbeiten.
Zum Warenkorb selber zu gelangen ist <a href> gut zu

R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:40
@indexhtml

ok aber ich kenne mich garnicht mit javascript aus ich kenne mich nur mit html und css aus

R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:41
@indexhtml

aber wie kann ich denn button mit einer website verbinden soll ich dazu einfach href benutzen

R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:49
@R1Z3Mo

wie kann ich so ein warenkorb zeichen hinzufügen also ich habe versucht aber ging irgendwie nicht

R1Z3Mo 
Beitragsersteller
 23.05.2022, 22:54
@R1Z3Mo

habe versucht von der website ihr https://boxicons.com/

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAStJREFUSEvNld0RATEUhW0F6GBVgApQAR3glQdUYFXAC6+oAB2sClABKkAFnGOSnf2TZGbFuDNndse9uV9OsgknZzkcy/1zPwU8hZs7nito9A13YQcSIPs28OJnhaQt0RBNp9AOatkAFND0JhqX8LxkgXzaZO5BO0PjI8ZWOf4ToILcIQPgirGuCsAcZ1GGuuKrMuFJ5xMUezpABwVLAXrb1QT37gzxGeyd7qDxTOTFetKRKuSE9iiqy0IdYIbCAbSG2EAVPpI1KLKkOoArbLNxEaKjtJB1DyT5HtTpAGy2hZoQrw46SgsPP46hhFMTAE/zRr06QTZxvZgAOFp+sirOCUmen0iYAgwNJMtMAXMM7UELqB9ro8oZ/+GEr/L4pFQ5Y4B1B9b34H8BL2GZNBlJNF2RAAAAAElFTkSuQmCC"/>

und das <i class='bx bx-cart'></i>

raus kopiert und eingefügt aber ging nicht

Tea2Go  24.05.2022, 01:03
@R1Z3Mo

Ja natürlich geht das nicht. Schau dir doch mal den Pfad an. data:image? Das verweist nicht mal auf eine URL

Mein Tipp: Mach erstmal ein Grundlagenkurs in HTML. Gibt genug Videos auf Youtube. Dir fehlt einfach zu vielen Dingen das Verständnis.

R1Z3Mo 
Beitragsersteller
 24.05.2022, 07:33
@Tea2Go

Habe schon sehr viel Gramm und css Curie gemacht ich kenne mich auch recht gut aus aber bin noch Anfänger und weiß halt paar Sachen nicht

R1Z3Mo 
Beitragsersteller
 24.05.2022, 07:34
@Tea2Go

Wie kann ich das denn hinzufügen auf meine Website was für eine url brauche ich denn

Tea2Go  24.05.2022, 09:57
@R1Z3Mo

Was für Gramm den? Und von CSS Curie höre ich zum ersten Mal.

Das sind halt Grundlagen, die du nicht kennst. Ansonsten schau dir den img Tag genauer an

R1Z3Mo 
Beitragsersteller
 24.05.2022, 15:59
@indexhtml

hättest du noch ein tipp wie ich das machen kann also meine das

@R1Z3Mo

habe versucht von der website ihr https://boxicons.com/

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAStJREFUSEvNld0RATEUhW0F6GBVgApQAR3glQdUYFXAC6+oAB2sClABKkAFnGOSnf2TZGbFuDNndse9uV9OsgknZzkcy/1zPwU8hZs7nito9A13YQcSIPs28OJnhaQt0RBNp9AOatkAFND0JhqX8LxkgXzaZO5BO0PjI8ZWOf4ToILcIQPgirGuCsAcZ1GGuuKrMuFJ5xMUezpABwVLAXrb1QT37gzxGeyd7qDxTOTFetKRKuSE9iiqy0IdYIbCAbSG2EAVPpI1KLKkOoArbLNxEaKjtJB1DyT5HtTpAGy2hZoQrw46SgsPP46hhFMTAE/zRr06QTZxvZgAOFp+sirOCUmen0iYAgwNJMtMAXMM7UELqB9ro8oZ/+GEr/L4pFQ5Y4B1B9b34H8BL2GZNBlJNF2RAAAAAElFTkSuQmCC"/>

und das <i class='bx bx-cart'></i>

raus kopiert und eingefügt aber ging nicht

indexhtml  24.05.2022, 16:20
@R1Z3Mo 
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M21.822 7.431A1 1 0 0 0 21 7H7.333L6.179 4.23A1.994 1.994 0 0 0 4.333 3H2v2h2.333l4.744 11.385A1 1 0 0 0 10 17h8c.417 0 .79-.259.937-.648l3-8a1 1 0 0 0-.115-.921zM17.307 15h-6.64l-2.5-6h11.39l-2.25 6z"></path><circle cx="10.5" cy="19.5" r="1.5"></circle><circle cx="17.5" cy="19.5" r="1.5"></circle></svg>

oder

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAR5JREFUSEvN1cExBUEUheHvRYAMiAARIAIywJYFIkAEbNgiAmRABIgAESAC6qqeV2PevOmuGqOczSz6zv379JnbMzKwRgP396eAz+TmHZc4+A13dQcVoOq7hru+kLYj2scJbrExBGAWb6nxAl76QKaFHBls9mj8iOV4fxpgCQ89AK+Y7wLEWuxiEdvpqyrhVc6PcZQDbOEigb7tZhTZPSOe4+xygxYzMZPOMxx1qdrQPVarwhzgFHu4QjToUszMSvNIc4AIKmyH5hCO2lTVfaRwx3U5QDS7wXq6OsJRmyLQwzanJYCY5utcwml94nopAdQ/2S7OE2J+fqgUUGhgsqwUcIYdnGO30aZrrfiHU7/Km5vqWisGDO5g8Az+L+ALYZk0GaU3ojwAAAAASUVORK5CYII="/>

Benutz einfach eins von beiden und du kannst nichts falsch machen, es funktioniert bei mir

Für

<i class='bx bx-cart'></i>

Musst du wahrscheinlich ein Link Stylesheet in dein Head einbinden und den musst du selber auf der Website suchen.

R1Z3Mo 
Beitragsersteller
 24.05.2022, 16:51
@indexhtml

Ok danke also wenn ich eins davon einfüge was dann also kann ich dann das mit denn Warenlieferungen und usw einfügen

R1Z3Mo 
Beitragsersteller
 24.05.2022, 17:03
@indexhtml

und wie kann ich die Bilder von denn produkten größer machen

indexhtml  24.05.2022, 17:07
@R1Z3Mo

… Schau dir ein Css tutorial an dann weisst du es.
Ich gib dir mal einen Letzten Tipp 

img{

}
R1Z3Mo 
Beitragsersteller
 25.05.2022, 15:50
@indexhtml

habe denn oberen genommen wie kann ich machen das man draufdrücken kann