Wie erstelle ich dieses css layout?

Element 1 on The left and 2 and 3 on the left vertically. Without Grid. I Made a paint :) sorry for my bad english. Im new to Programming and I tried this for days now.

Bild zum Beitrag

2 Antworten

elmex7

10.01.2023, 02:13

See Grid-Layout or Flex-Layout

instanceof

09.01.2023, 18:52

Erstelle ein HTML-Dokument und füge drei div-Elemente hinzu, um die quadratischen Elemente darzustellen.

Bild zum Beitrag

Erstelle eine CSS-Datei und verwende die folgende CSS-Anweisung, um die div-Elemente mit den entsprechenden Seitenlängen zu gestalten.

Bild zum Beitrag

Sollte so gehen. Hab nicht getestet

Woher ich das weiß:eigene Erfahrung – Bin fast 24/7 am PC...

Ähnliche Beiträge

Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

...zum Beitrag

Erpresst worden?

Habe gestern ne Mail bekommen, mit einem Screenshot meines eigenem Desktops. Und es war eine Text Datei angehängt.

der Text:

 Hey. I have bad news for you!

04.08.2022-On this day, I hacked your device's operating system and got full access to your account . I have been watching you closely for a long time.

I installed a virus on your system that allows me to control all your devices.
The virus software gives me access to all the controllers of your devices (microphone, video camera, keyboard, display). I have uploaded all your information, data, photos, browsing history to my servers. I have access to all your messengers, social networks, email, sync, chat history and contact list.

I learned a lot about you!

I thought what can I do with this data...
I recently came up with an interesting idea: to create a video clip in which you masturbate in one part of the screen and watch a porn site in the other, such videos are now at the peak of popularity!
What happened amazed me!

With one click, I can send this video to all your friends via email, social networks and instant messengers. I can also publish access to all your emails and instant messengers that you use.
In addition, I found a lot of interesting things that I was able to publish on the Internet and send to friends.

If you don't want me to do it, send me 850 $ (US dollar) in my bitcoin wallet. My BTC wallet address:
bc1q7gd0j3k8pxwnvw8jde99pqfeqxsnpw2zs6s6xv
If you do not know how to replenish such a wallet, use the Google search engine. There is nothing difficult in this. As soon as funds arrive, I will see this and immediately remove all this garbage. After that we will forget each other. I also promise to deactivate and remove all malware from your devices. Trust me, I keep my word. It's a fair deal and the price is pretty low considering I've been checking your profile and traffic for a while. 

I give exactly two days (48 hours) from the moment of opening this letter for payment.
After this period, if I do not receive the specified amount from you, I will send everyone access to your accounts and visited sites, personal data, and edited videos without warning.
Remember: I do not make mistakes, I do not advise you to joke with me, I have many opportunities.
There's no point complaining about me because they can't find me. Formatting the drive or destroying the device won't help because I already have your data.
It makes no sense to write back to me - I do not write from personal mail and do not look at the answers.

Good luck and don't get angry!
Everyone has their own job, you just got unlucky today.
P.S. In the future, I recommend that you follow the safety rules on the Internet and do not visit dubious sites.

Der screenshot der mir gesendet wurde, ist aber sehr sehr lange her, da es zu der Zeit noch die Twitch Desktop App gab, welche im April heruntergefahren wurde? Zudem habe ich nie vor den pc masturbiert und die webcam war immer zu?

was sollte ich jetzt machen?

Mehr=ergänzun

...zum Beitrag

At the left oder on the left?

at oder on in dem Satz : „ At/On the left side I can see a lot of children sitting on the floor and a teacher standing behind the children/Students“

...zum Beitrag

Wie findet ihr diesen legenden Metal Songtext?

Warum ist dieses Lied so unbekannt?

This sickness it burns inside me

It sticks in my throat I'm gonna choke I cannot speak

Besides it runs the fear of the unknown

Could this be some reckoning

Wrath for wrong I've done, comin' back to haunt me

The God I have denied his power shown

But now I can't protest although defiant heart it pounds deep in my chest

I know that this will have its way with me

For now I choose to go

I know it's just the mind tryin' to interrupt my flow

Intentions all fall down

My soul has died

Feed the greed, its not need I figure so what

Can you fix the hole

That resides deep in this gut

Right now I need a drink so

I'll fix myself whatever it takes I cannot wait

Now, this will not die they warned me in church when I was young I could rely

If there's a God, he's one I've never seen

& Now I just lament

Did not held the threat I played the cards that I've been dealt

Like putting out the fire with gasoline

For when I used I lose won't face the fear of life without something abused

That now I'm forced to find another way

My show your final show

A homicide I tried to warn, you should have known

Now I'll take you with me

Show you my pain

Feed the need it's not greed, I figure so what

You gonna tell me punk now uh-huh

Can you fix the hole

That resides deep in this gut

I'll fix myself whatever it takes I cannot wait

Come & get it, Come & get it, get some

I feed the need that twists my mind

Time & time again (gibberish) Come & get it

...zum Beitrag

Ist das richtig?

How i made my presentation:

At first i choosed the topic for my presentation.

I chose this one because I like New Zealand and I already know some things about it.

Then I searched the most important information from the internet.

First I wrote them down in German and then I cut them to size.

Then I translated my text into English.

It was not easy for me but I could translate a lot anyway.

The Google translator still had to help me sometimes.

I also asked a few friends if I had translated my text correctly.

Now I had the text to my topic ready.

Next I looked for pictures to my text from the internet.

I looked for an a2 sheet at home, but I couldn't find one.

So I had to go to Rossman again and buy a sheet.

I chose a ...... sheet because..........

Now I tried to print the pictures, but the printer was out of ink.

So I had to go to Mediamarkt again because we needed special cartridges.

I changed the cartridges and the printer worked again.

Next, I printed out the pictures and tried to arrange them on the poster.

When everything was in order, I glued the pictures onto my poster.

I wrote the title on the poster and then it was ready.

Now I had to learn the text.

I studied for about 1 hour a day.

That was my presentation, I hope you liked it, do you have any questions?

Danke^^

...zum Beitrag

7 days to die oder the forest?

Was findet ihr besser ?

...zum Beitrag

Frage zur Englisch Aufgabe "Wegbeschreibung"?

Ist das so okay wie ich es beschrieben habe? Finde es so eigentlich okay, aber wäre nicht schlecht wenn sich das jemand mal grob anschaut, der lust hätte.

Vielen dank für das Zeit nehmen.

Schreiben Sie die folgenden Wegbeschreibungen. (Write the following directions.)

1. Katrin can’t find the museum. She is in front of the cathedral.

You are in front of the cathedral. Go along the road and take the first street on the right. Turn at the next right corner. On your left side is the Town Hall. Take the first street on the left. Walk along the street and take the next left street. Go along the street. On your left side you can see the post office. On the right from you is the Museum.

2. Amandine is in front of the pub. She must go to the art gallery.

You are in front of the pub. Go along the street. Turn at the end at the first corner at the first right street. On the first left street you can see the post office. Go that way to the end of the street. Take the first right street. Walk along that street and take the first street on the left. On your left you will see the Art Gallery.

3. Claire is in front of the theatre and can’t find the car park.

You are in front of the Theatre. Go along that street. Take the first street on the left. On your right side you See a Café. Go to the end of the street. On your left side you see a Cinema and in front of you is the Shopping Centre. Take the right street. On your left you see the Car Park.

...zum Beitrag

Cartoon Analyse englisch?

schritt: alles aufschreiben was man sieht

The black and white cartoon drawn by Goddard shows in the front right corner of the picture a women who is wearing glasses and is standing in front of nine other people who are all looking different from each other. The people are sitting on chairs in front of tables and are looking down to their notebooks which are on the their tables. In the upper left corner you can see a poster on the wall where is standing „english class for immigrants“ and right in the middle of the picture is a man who is also holding a Poster where is standing „I have tried telling you several times, my name is Ken and I am from Glasgow“

kann mich vielleicht jemand verbessern und denkt ihr es ist wichtig aufzuschreiben dass pro Reihe nur 3 „Schüler“ sitzen.

danke!

...zum Beitrag

Suche horror /Rache Filme wie last house on the left , i spit on your grave, i saw the devil.

siehe oben (:

...zum Beitrag

Kann bitte jemand diesen Englisch Text berichtigen?

The media use in the USA

At all the population of the USA uses a lot of social media. 3,500 hours are taking from everybody for TV, radio and internet. That are 145 days and that are more days then somebody sleep. Maddison is 14 years old and she are active on a lot of social networks, for example Facebook or YouTube. She doesn’t hear radio very much but every morning she hears the Top 40. So, I think Maddison is like we are. We all use social networks (also Mr. riös😉) and for the youth world that is normal. When I am on my mobile when I’m at my grandmother she always says that I have to put the stupid mobile away (but she mean that funny, so she is not angry) and then you see that, that this is not normal for older people.

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Filme wie The Last House On The Left?

Hi. Ich bin ein riesen Fan von dem Horrorfilm The Last House On The Left. Kennt ihr so ähnliche Filme? Am Besten aber ohne irgendwelche Vergewaltigungsszenen

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen