3 bilder mit text nebeneinander sotieren html und css?
hi Leute wie kann ich 3 Bilder mit Text dazu nebeneinander sortiert weil bei mir ist alles untereinander sortiert ihr ein Beispiel Bild und ihr auch ein beispiel was ich bisher programmiert habe
1 Antwort
<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.
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>
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>
also das <div class="box">
und habe noch eine frage muss ich denn befehl <sectionV> benutzen
<!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>
willst du mir das machen bro wenn ja dann vielen dank
Dein Code war mir zu unübersichtlich deswegen hab ich etwas eigenes gemacht.
Das Bild das ich benutzt habe:
<!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>
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>
<!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>
hab alles gemacht aber wie kann ich ein botten machen wo steht in warenkorb legen dsas wenn leute drauf klicken geht
ok aber ich kenne mich garnicht mit javascript aus ich kenne mich nur mit html und css aus
aber wie kann ich denn button mit einer website verbinden soll ich dazu einfach href benutzen
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
hättest du noch ein tipp wie ich das machen kann also meine das
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
<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.
Ok danke also wenn ich eins davon einfüge was dann also kann ich dann das mit denn Warenlieferungen und usw einfügen
und wie kann ich die Bilder von denn produkten größer machen
habe denn oberen genommen wie kann ich machen das man draufdrücken kann
das funktioniert nicht kannst du mir bitte helfen
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!
Sorry habs grad selbst rausgefunden :D manchmal hilft es wenn man sich paar tagen Pause gönnt :D schönen Abend noch :P
wo muss ich das eingeben bei style oder bei body