Wie der Titel schon sagt, muss sich mein Logo für diese Aufgabe in bestimmten Bereichen des Bildschirms in verschiedenen Bildschirmgrößen befinden. Ich habe die mobile Positionierung korrekt implementiert, aber ich kann anscheinend keine Lösung für die Positionierung des Logos für iPad und größere Bildschirme finden.

Bei großen Bildschirmen muss das Logo direkt über dem ersten .product -Element zentriert sein, in meinem Fall das A wie bei Apple

enter image description here

Bei iPad-Bildschirmen muss sich das Logo in der Mitte zwischen dem linken Bildschirmrand und dem zentrierten h1 -Element befinden

enter image description here

Egal was ich versuche, das Logo bleibt einfach links fixiert.

Mir ist klar, dass in css die Position auf float:left gesetzt ist, aber ich habe sie in display:flex und die verschiedenen flexbox -Eigenschaften geändert, aber es hat letztendlich mehr Probleme verursacht . Ich habe die Position des Logos in jedem @media query geändert, aber das Logo blieb immer an Ort und Stelle oder weit entfernt von der Stelle, an der es sein muss.

Ich verstehe, dass Google mein bester Freund ist, aber ich habe alle möglichen Methoden ausgeschöpft und meinen letzten Ausweg erreicht. Das Letzte, was ich tun wollte, war stecken zu bleiben und sofort hier zu posten, ohne es mindestens einige Stunden lang zu versuchen. Verzeihen Sie mir den Neuling und die wahrscheinlich offensichtliche Frage, aber ich bin am Ende und brauche wirklich Hilfe. Dankeschön.

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

body>i> {
  flex-grow: 0;
}

body>header> {
  flex-grow: 1;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  .logo {
    float: left;
  }
  .menu {
    display: none;
  }
  .logo {
    float: left;
  }
}

@media screen and (max-width: 500px) {
  .logo {
    float: none;
  }
  .menu {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
  .logo {
    position: absolute;
    left: 0;
    top: 25;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>
2
danuma 17 Feb. 2020 im 02:24

3 Antworten

Beste Antwort

Versuche dies:

Fragment-Header in 3 entspricht Teilen

header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Logo-Bildmitte erstellen

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

Überschrift Nowrap erstellen

header h1 {
  white-space: nowrap;
}

Schauen Sie in das Snippet, wie es aussieht. Ich habe alle Floatings und die absolute Positionierung in der Medienabfrage kommentiert.

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

body>i> {
  flex-grow: 0;
}

body>header> {
  flex-grow: 1;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

header h1 {
  white-space: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 700px) {
  /*.logo {
    float: left;
  }*/
  .menu {
    display: none;
  }
  /*.logo {
    float: left;
  }*/
}

@media screen and (max-width: 500px) {
  /*.logo {
    float: none;
  }*/
  .menu {
    display: none;
  }
  header {
    display: block;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
  /*.logo {
    position: absolute;
    left: 0;
    top: 25;
  }*/
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>
0
Aleksandr Belugin 17 Feb. 2020 im 16:10

Entschuldigen Sie zuerst mein Englisch, ich bin nicht fließend, mein Lösungsvorschlag, ich habe mir erlaubt, einige Dinge in Ihrem CSS zu ändern.

<html lang="en">
<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
     crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
</head>
<style>
    *{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
}
.navbar {
    display: flex;
    flex-direction: row-reverse;
    width: 100vw;
    background-color: rgb(105, 105, 105);
    color: white;
}
    
.hamburger {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-self: center;
    justify-content: flex-start;
    margin-right: 10px;
    display: none;
}
    
.social {
    display: flex;
    padding-top: 20px;
    flex-direction:row;
    justify-content:space-around; 
    border-top: 2px solid #e2e2e2;
    }
.menu{
    display: inherit;
    list-style: none;
}
    
    
.navbar ul li {
    display: inline;
    padding: 0 15px;
}
    
.product {
    border: 1px solid lightgray;
    border-radius: 10px;
    margin: 10px 30px;
    padding:10px;
}

header{
    display: flex;
    flex-direction: row;
    
    
}

header h1 {
    display: inherit;
    flex-grow: 1;
    align-content: center;
    align-self: center;
    align-items: center;
    justify-content: flex-start;
}



.logo{
    display: inherit;
    align-content: center;
    align-self: center;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    
}

.logo > img{
    width: 50px;
    height: 50px;
}

@media (max-width: 900px) {
    .hamburger {
      display: none;
    }
    main{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
    .product {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      align-self: center;
      align-content: center;
      border: 1px solid lightgray;
      border-radius: 10px;
      width: 50vw;
      text-align: center;
    }
}

@media (max-width:700px){
    .navbar ul li{
        display: none;
    }
    .hamburger{
        display: block;
    }
}

@media (max-width: 400px){
    header h1 {
        display: inherit;
        flex-grow: 1;
        align-content: center;
        align-self: center;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.5rem;
    }
}
</style>
<body>
  <header>
        <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg"/></div>
        <h1>The ABC Company</h1>
    </header>
    <nav class="navbar">
        <div class="hamburger">&#9776;</div>
        <ul class="menu">
            <li>Help</li>
            <li>Products</li>
            <li>About</li>
            <li>Home</li>
        </ul>
    </nav>
    <main>
    <section class="product">
         <i class="fas fa-apple-alt fa-5x"></i>
            <h2>A as in Apple</h2>
            <p>
            We take out fruit very seriously at ABC, that is why
            the A in ABC is for Apple. Try our new AppleBook App,
            the coolest new technology disrupting the fruit industry.
            This is the Uber of Apples! 
            </p>
        </section>
        <section class="product">
            <i class="fas fa-money-bill-wave fa-5x"></i>
            <h2>B as in Bail</h2>
            <p>
                Do you need Bail! Our new BailFace app will provide you
                with lawyers and bail money at the push of a button. Its the 
                Facebook of bail bonds!
            </p>
        </section>
        <section class="product">
            <i class="fas fa-utensils fa-5x"></i>
            <h2>C as in Curry</h2>

            <p>
                Fancy some curry! Our new HurryCurry app will provide curry
                cooked by Italian chefs right to your door. Its the AirBnB of curry!
            </p>
        </section>
    </main>
  <footer>
        <ul class="social">
            <li class="social_icon"><i class="fab fa-twitter"></i></li>
            <li class="social_icon"><i class="fab fa-facebook"></i></li>
            <li class="social_icon"><i class="fab fa-instagram"></i></li>
        </ul>
    </footer>
</body>
</html>
0
Carlos Daniel 17 Feb. 2020 im 00:53

Dies ist eine schöne Lösung mit Flexbox oder CSS-Grid:

Schritte zur Behebung des Problems:

  1. Entfernen Sie die Klasse .logo aus den Medienabfragen.

  2. Implementieren Sie die Lösung wie folgt im Header-Element:

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items:center;
  margin: 0 30px;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  .menu {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  header {
      flex-flow: column
  }
  .menu {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>

Wenn Sie den Text in der Mitte der Kopfzeile halten müssen, verwenden Sie stattdessen einfach das CSS-Raster.

* {
  box-sizing: border-box;
  text-align: center;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 0 2fr;
  grid-template-rows: 1fr;
  align-items:center;
  margin: 0 30px;
}

.logo>img {
  width: 50px;
}

p {
  text-align: left;
  padding: 15px;
}

.navbar {
  background-color: rgb(105, 105, 105);
  padding: 10px;
  color: white;
  width: 100%;
}

.hamburger {
  display: flex;
  flex-direction: row-reverse;
}

.social {
  display: flex;
  padding-top: 20px;
  flex-direction: row;
  justify-content: space-around;
  border-top: 2px solid #e2e2e2;
}

ul {
  list-style: none;
}

li {
  line-height: 5px;
  float: right;
  padding: 0 0 50px 0;
  margin-right: 30px;
  margin-top: -10px;
}

.product {
  border: 1px solid lightgray;
  border-radius: 10px;
  margin: 10px 30px;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  .menu {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  header {
    grid-template-columns: 1fr;
  }
  .menu {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 30px;
    margin-right: 30px;
    width: 50%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 0px;
  }
  main {
    display: inline-flex;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
    <h1>The ABC Company</h1>
  </header>
  <nav class="navbar">
    <div class="hamburger">&#9776;</div>
    <ul class="menu">
      <li>Help</li>
      <li>Products</li>
      <li>About</li>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <section class="product">
      <i class="fas fa-apple-alt fa-5x"></i>
      <h2>A as in Apple</h2>
      <p>
        We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-money-bill-wave fa-5x"></i>
      <h2>B as in Bail</h2>
      <p>
        Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
      </p>
    </section>
    <section class="product">
      <i class="fas fa-utensils fa-5x"></i>
      <h2>C as in Curry</h2>

      <p>
        Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
      </p>
    </section>
  </main>
  <footer>
    <ul class="social">
      <li class="social_icon"><i class="fab fa-twitter"></i></li>
      <li class="social_icon"><i class="fab fa-facebook"></i></li>
      <li class="social_icon"><i class="fab fa-instagram"></i></li>
    </ul>
  </footer>
</body>

</html>
0
Juan 17 Feb. 2020 im 12:30