Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

Bild zum Beitrag

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Bild zum Beitrag

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

1 Antwort

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Webentwicklung

27.12.2023, 12:10

Hier wäre mal ein Beispiel, wie man das mit Flexbox gestalten kann:

HTML

<h3>Dienstleistungen</h3>

<div class="Dienstleistungen">
 <ul>
  <li><a href="#">Service</a></li>
  <li><a href="#">Revisionen</a></li>
  <li><a href="#">Tuning</a></li>
  <li><a href="#">Ersatzteile</a></li>
 </ul>

 <div class="service-images">
  <div class="service-left">
   <img class="image-service" src="https://loremflickr.com/500/500" alt="Service" title="Service">
  </div>
  <div class="service-right">
   <img class="image-rev" src="https://loremflickr.com/500/500" alt="Revision">
   <img class="image-tune" src="https://loremflickr.com/500/500" alt="Tuning">
   <img class="image-tool" src="https://loremflickr.com/500/500" alt="Ersatzteile">
  </div>
 </div>

</div>

CSS

.service-images {
 height: 400px;
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 gap: 10px;
}

img {
 width: 100%;
 height: 400px;
 object-fit: cover;
}

.service-left {
 width: 40%;
 height: 300px;
}

.service-right {
 width: 60%;
 height: 400px;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.service-right img {
 width: calc(50% - 10px);
 height: 195px;
}

.service-right img:last-child {
 width: calc(100% - 10px);
}

Beispiel

https://jsfiddle.net/Babelfisch/m6kzwqLc/30/

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

PinguSpeedy

Beitragsersteller

27.12.2023, 13:00

WOW! vielen Dank. hat mir sehr weiter geholfen :)

Ähnliche Beiträge

Customtkinter?

Ist es normal dass das erstellen von Labels, Textfelder oder Buttons in Klassen als Vorlage super viel Schreibarbeit ist oder geht das auch eleganter und sauberer?

main:

maclass Main(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.main_window()
        self.chatbot_output = InputBox(self, 1, 1, 10, 10, "s", 500, 500, "#202222", "red", "white", "Gib einen Text ein...")
        self.chatbot_output.grid(row=1, column=1, pady=10, padx=10, sticky="s")
        self.chatbot_input = InputBox(self, 2, 1, 0, 10, "n", 500, 50, "#202222", "red", "white", "Gib einen Text ein...")
        self.chatbot_input.grid(row=2, column=1, pady=0, padx=10, sticky="n")
        self.placeholder = Label(self, 0, 1, 0, 10, "n", 500, 320, "transparent", "transparent", "white", ".")
        self.placeholder.grid(row=0, column=1, pady=0, padx=10, sticky="n")
    def main_window(self):
        height = 920
        width = 1680
        x = (self.winfo_screenwidth()//2)-(width//2)
        y = (self.winfo_screenheight()//2) - (height//2)
        self.geometry(f"{width}x{height}+{x}+{y}")
        self.title("YourTerminal")
        self.grid_columnconfigure(0, weight=0)
        self.grid_rowconfigure(0, weight=0)



if __name__ == "__main__":
    main = Main()
    main.mainloop()
    sys.exit()

Vorlage in einer Klasse und in einer anderen Datei:

class InputBox(ctk.CTkFrame):
    def __init__(self, master, row, column, pady, padx, sticky, width, height, entry_fg_color,frame_fg_color, textcolor, placeholder, *args, **kwargs):
        super().__init__(master, fg_color=frame_fg_color, *args, **kwargs)
        self.set_setup(row, column, pady, padx, sticky, width, height, entry_fg_color, textcolor, placeholder)

    def set_setup(self, row, column, pady, padx, sticky, width, height, entry_fg_color, textcolor, placeholder):
        self.input = ctk.CTkEntry(self,
                                  width=width,
                                  height=height,
                                  fg_color=entry_fg_color,
                                  text_color=textcolor,
                                  placeholder_text=placeholder,
                                  )
        self.input.grid(row=row, column=column, pady=pady, padx=padx, sticky=sticky)

...zum Beitrag

Mein Fenster geht in pygame nicht auf??

Das hier ist mein code aber irgendetwas ist falsch, dennn mein pygame fenster geht nicht auf kann mir jemand den ganzen neu schreiben und mir antworten?

import pygame



class Game:
    def __init__(self, width, height):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("Space invaders")
        self.running = True

        while self.running:
            self.clock.tick(60)
            self.screen.fill((0, 0, 255))

            import pygame

            class Game:
                def __init__(self, width, height):
                    pygame.init()
                    self.width = width
                    self.height = height
                    self.dysplay = pygame.display.set_mode((self.width, self.height))
                    pygame.display.set_cation("Space invaders")
                    self.running = True

                    while self.running:
                        for event in pygame.event.get():
                            if event.type == pygame.QUIT:
                                self.running = False

            if __name__ == "__main__":
                game = Game(800, 600)


                if event.type == pygame.QUIT:
                    self.running = False


if __name__ == " main ":
    game = Game(800, 600)

...zum Beitrag

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zum Beitrag

Menü margin geht nicht?

Hallo,

ich habe folgenden Code:

HTML:

<div id="menu">
            <a href="euro-franken.html">Euro in Schweizer Franken</a>
            <a href="euro-krone.html">Euro in Schweizer Franken</a>
            <a href="euro-pfund.html">Euro in Schweizer Franken</a>
    </div>

CSS:

#menu {
  width: 45%;
  padding: 20px;
  display: none;
  min-height: 100%;
  background-color: rgb(71, 91, 107);
  position: fixed;
  z-index: 2;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}


#menu a {
  text-decoration: none;
  color: white;
  text-align: left;
  margin-bottom: 50px;
  border: 2px solid black;
  }

Nun macht der aber kein Abstand zwischen den Links. Warum nicht?

...zum Beitrag

Mein Fenster geht in Pycharm über pygame nicht auf?

Mein code ist so : aber mein fenster geht nicht auf

kann mir jemand helfen

import pygame



class Game:
    def __init__(self, width, height):
        pygame.init()
        self.width = width
        self.height = height
        self.dysplay = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_cation("Space invaders")
        self.running = True

        while running:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    self.running = False


if __name__ == " main ":
    game = Game(800, 600)

...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

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zum Beitrag

Div Box ragt über Rand hinaus?

Hallo, mein Problem ist, dass wenn ich das Browserfenster verkleinere die Div über den Rand geht. Perfekte Lösung wäre, wenn der Text dann unter dem Bild erscheint, sobald er zu klein für das Fenster ist. Code:


                <div id="produkte">
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh"></div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                    </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                            </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                </div>
  } 
  @media screen and (min-width: 751px){
    #produkte {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
}
    .produkt {
        width: 700px;
        border: solid #e4e4e4;
        background-color: white;
        padding: 10px;
        margin: 20px;
        height: 200px;
        text-align: left;
        height: 200px;    
    }
    .produkt img {
        width: 180px;
        padding: 15px;
    }
    a {
        font-size: x-large;
        color:#3f79e6;
        display: flex;
        text-decoration: none;
}
    @media screen and (max-width: 750px){
      #produkte {
          display: flex;
          flex-direction: column;
          align-items: center;
          max-width: 100%;
          height: auto;
      }
      .produkt a {
          display: flex;
      }
    }

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!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>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

Java Processing Game over Screen erstellen?

Hey ich habe eine Version von Pong erstellt um mich ein wenig rumzuprobierem. Demnach ist es weder schön noch besonders ausgereift. Ich habe folgendes gecodet und Frage mich wie ich auf Knopfdruck ein neues Spiel starten kann. Ich hab schon was implementiert was aber nicht funktioniert hatt. Vielleicht ist der Ansatz ja auch richtig. Vielen Dank:

int screen = 0;
int end = 0;
float x = 0;
float y = 0;

int xball = 500;
int yball = 500;
int xdir = 1;
int ydir = 1;



void setup(){
  
 fullScreen();
 smooth();
  
}

void draw(){
 background(38,30,38);
 strokeWeight(5);
 stroke(39,255,36);
 fill(39, 181, 36);
 rect(25,(mouseY/25)*25,25,25);
 rect(25,((mouseY/25)*25)+25,25,25);
 rect(25,((mouseY/25)*25)-25,25,25);
 rect(25,((mouseY/25)*25)-50,25,25);
 rect(25,((mouseY/25)*25)+50,25,25);
  
  
 stroke(255,39,36);
 fill(181,39,36);
  
 
  
  
 fill(255,39,36);
 stroke(181,39,36);
 rect((xball/25)*25,(yball/25)*25,25,25);
 xball = xball+xdir*4;
 yball = yball+ydir*2;
  
  
  
  if (xball > width-25){
   xdir = xdir * -1;
  }  
 
 if (xball < 25){
  screen = 1;
 }
 
 if (xball < 75){
  if (xball > 25){
  if (yball > ((mouseY/25)*25)-50){
   if(yball < ((mouseY/25)*25)+50){
   xdir = xdir * -1;
  }}}}
  
  
 if (yball > height-25 || yball < 25){
   ydir = ydir * -1;
  }
   
 if (screen > 0){
  noStroke();
  fill(0);
  rect(0,0,width,height);
  stroke(255);
  fill(255);
  textSize(150);
  text("Game Over",width/4-100,height/2);
  fill(150);
  stroke(150);
  text("again?",width/4+100,height/2+260);
  end = 1;
 }
   
}



void mouseClicked (){
  
 background(38,30,38);
 if(mouseX > width/4+100){
  if(mouseX < width/4+600){
   if(mouseY > height/2+260){
    if(mouseY < height/+310){
     if(end > 0){
      screen = -1;
      end = 0;
      xball = 500;
      yball = 500;
      xdir = 1;
      ydir = 1;
      x = 0;
      y = 0;
      
 
 
 }}}}}
  
}

...zum Beitrag

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen