Reputation: 1

How can I make the images in a row

Hey I'm programming for the first time a Website and I have a little problem. The Problem is that I cant make the images in a row.

How it should be:

desired

How it is:

actual

Here is my code:

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(35, 50, 64);
  color: white;
}

.social-images {
  text-align: left;
}

#logo-name {
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 2200px;
  padding-top: 44px;
}

#top {
  text-align: right;
  padding-top: -20px;
}

#navigation a {
  text-align: right;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
  text-align: right;
}

#navigation a:hover {
  color: rgb(90, 176, 247);
}

#image img {
  >width: 100%;
  >margin-top: 16px;
  >margin-bottom: 16px;
  >height: auto;
}

#main {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

#footer {
  text-align: center;
  padding: 25px;
  color: grey;
}

html {
  scroll-behavior: smooth;
}

<!DOCTYPE html>

<html>

<head>
  <title>Leon Kannenberg</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, intial-scale=1">
</head>

<body>
  <div id="top">
    <div id="logo-name">Leon Kannenberg</div>
    <div id="navigation">
      <a href="#top">Startseite</a>
      <a href="#about-us">Über mich</a>
      <a href="#projects">Projekte</a> <a href="#social">Social</a>
      <a href="#contacts">Kontakt</a>
    </div>
    <div id="image">
      <img src="image.jpg" alt="Ein sehr schönes Bild">
    </div>
  </div>
  <div id="main">
    <section id="main">
      <section id="about-us"></section>
      <h2>Über mich</h2>
      <p>
        Hallo! Mein Name ist Leon Kannenberg. Ich bin 18 Jahre alt und ein Inforamtik interessierter Mensch. Dementsprechend habe ich diese Website komplett alleine Programmiert. Die Website soll meine Begeisterung für die Inforamtikwelt wiederspiegeln. Ich habe
        bereits mehrere Projekte in bearbeitung die bald bei dem Gleichnamigen Berreich reingestellt werden. Hoffentlich gefällt dir meine Website und ich wünsche dir hier noch viel Spaß drauf!
      </p>
      <section id="projects"></section>
      <h2>Projekte</h2>
      <p>
        Coming Soon!
      </p>
    </section>
    <section id="social"></section>
    <h2>Social</h2>
    <p>
      <div class="social-images">
        <img class="img-instagram" src="instagram.png" width="500" height="400" alt="Instagram von Leon Kannenberg" />
        <img class="img-facebook" src="facebook.png" width="500" height="400" alt="Facebook von Leon Kannenberg" />
        <img class="img-twitter" src="twitter.png" width="500" height="400" alt="Twitter von Leon Kannenberg" />
      </div>
    </p>
    <section id="contacts"></section>
    <h2>Kontakt</h2>
    <p>
      Kontakt page Coming Soon!
    </p>
  </div>
  <div id="footer">
    Copyright 2021 | Leon Kannenberg
  </div>
</body>

</html>

Upvotes: 0

Answers (4)

GlitchKittyy

Reputation: 3

You have no flex-direction added so it will not work as you intented.

.social-images {
  text-align: left;
  display: flex;
  flex-direction: row;
  /* justify-content: center; This is optional this just centers the div*/
  /* align-items: center; This is optional this just centers the div*/
}

Upvotes: 0

David Kristek

Reputation: 55

Study flexbox or grid in css for example on w3 schools:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp

Upvotes: 0

T J

Reputation: 43156

You can use flexbox:

.social-images{
  display: flex;
}

display: inline-block would also work. Visit CSS - Display for more info.

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(35, 50, 64);
  color: white;
}

.social-images {
  display: flex;
  justify-content: space-around;
  text-align: left;
}

#logo-name {
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-right: 2200px;
  padding-top: 44px;
}

#top {
  text-align: right;
  padding-top: -20px;
}

#navigation a {
  text-align: right;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
  text-align: right;
}

#navigation a:hover {
  color: rgb(90, 176, 247);
}

#image img {
  >width: 100%;
  >margin-top: 16px;
  >margin-bottom: 16px;
  >height: auto;
}

#main {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 16px;
}

#footer {
  text-align: center;
  padding: 25px;
  color: grey;
}

html {
  scroll-behavior: smooth;
}

<!DOCTYPE html>

<html>

<head>
  <title>Leon Kannenberg</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, intial-scale=1">
</head>

<body>
  <div id="top">
    <div id="logo-name">Leon Kannenberg</div>
    <div id="navigation">
      <a href="#top">Startseite</a>
      <a href="#about-us">Über mich</a>
      <a href="#projects">Projekte</a> <a href="#social">Social</a>
      <a href="#contacts">Kontakt</a>
    </div>
    <div id="image">
      <img src="image.jpg" alt="Ein sehr schönes Bild">
    </div>
  </div>
  <div id="main">
    <section id="main">
      <section id="about-us"></section>
      <h2>Über mich</h2>
      <p>
        Hallo! Mein Name ist Leon Kannenberg. Ich bin 18 Jahre alt und ein Inforamtik interessierter Mensch. Dementsprechend habe ich diese Website komplett alleine Programmiert. Die Website soll meine Begeisterung für die Inforamtikwelt wiederspiegeln. Ich habe
        bereits mehrere Projekte in bearbeitung die bald bei dem Gleichnamigen Berreich reingestellt werden. Hoffentlich gefällt dir meine Website und ich wünsche dir hier noch viel Spaß drauf!
      </p>
      <section id="projects"></section>
      <h2>Projekte</h2>
      <p>
        Coming Soon!
      </p>
    </section>
    <section id="social"></section>
    <h2>Social</h2>
    <p>
      <div class="social-images">
        <img class="img-instagram" src="https://picsum.photos/200/300" width="500" height="400" alt="Instagram von Leon Kannenberg" />
        <img class="img-facebook" src="https://picsum.photos/200/300" width="500" height="400" alt="Facebook von Leon Kannenberg" />
        <img class="img-twitter" src="https://picsum.photos/200/300" width="500" height="400" alt="Twitter von Leon Kannenberg" />
      </div>
    </p>
    <section id="contacts"></section>
    <h2>Kontakt</h2>
    <p>
      Kontakt page Coming Soon!
    </p>
  </div>
  <div id="footer">
    Copyright 2021 | Leon Kannenberg
  </div>
</body>

</html>

Upvotes: 1

wanjd

Reputation: 11

parent container

display: flex;

img containers

display: flex;
flex-direction: column;
flex-wrap: nowrap; /* you can use wrap in case you want it to overflow*/

Upvotes: 0

How can I make the images in a row

Answers (4)

Related Questions