CSS Hilfe - eilt sehr

Studentenfutter · 13. März 2023

Sehr geehrte Damen und Herren,

ich benötige Ihre Hilfe bei der Erstellung der sich im Anhang befindenden CSS Aufgabe.

Die Aufgabe ist teil meines Studienkurses zum Online-Marketing-Manager dass ich zur persönlichen Weiterbildung in meinem eigenem Unternehmen nutze,
jedoch konnte ich bei dieser Aufgabe im gesamten Heft keine hilfreichen Informationen zur Erstellung finden.

Mit freundlichen Grüßen,
Studentenfutter

nextuser · 13. März 2023

Hi Studentenfutter,

wo hakt es denn?

Einfach eine Aufgabe posten und um Hilfe bitten ist weder Zielführend, noch sind Fertiglösungen erlaubt!

Bitte versuche die Aufgabe und konkretisiere deine Frage auf die Stelle, an der du nicht weiter kommst...

m.scatello · 14. März 2023

Zitat

eilt sehr

Wenn es eilt, dann solltest du dir jemanden suchen, der dir bei entsprechender Gegenleistung hilft. In einem Forum hast du keinen Anspruch auf Hilfe und schon gar nicht auf schnelle Hilfe.

Außerdem solltest du zeigen, was du bisher versucht hast und nicht nur eine Aufgabe posten, die andere für dich erledigen sollen.

MrMurphy · 14. März 2023

Mal ein Lösungsansatz. Du musst nur noch den Inhalt zwischen den beiden style-Elementen in die externe CSS-Datei kopieren und die wie in der Aufgabe gefordert benennen. Zum Testen kannst du den Quelltext direkt in eine Datei übernehmen.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>CSS-Aufgabe</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="css-aufgabe.css" rel="stylesheet">

   <style>

   @media all {
      html {
         font-family: Verdana, Geneva, sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         max-width: 1200px;
         padding: 1rem;
         margin: 0rem auto 0rem auto;
      }
      h1 {
         font-size: 1.5rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p {
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      ul {
         padding: 0rem 0rem 0rem 0rem;
         margin: 0rem 0rem 0rem 0rem;
      }
      li {
         font-size: 1rem;
         font-style: normal;
         font-weight: bold;
         list-style-type: none;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      li a {
         color: white;
      }
      a {
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      a,
      a:link,
      a:visited {
      }
      a:hover,
      a:focus,
      a:active {
         text-decoration: underline;
      }
      .content {
         background-color: #F4E92B;
      }
      .text {
         background-color: #59DB01;
         padding: 1rem;
      }
      .grosstext {
         font-size: 1.4rem;
      }
      .kleintext {
         font-size: 0.8rem;
      }
      .navigation {
         background-color: #0050A1;
         padding: 1rem;
      }
   }
   @media only screen and (min-width: 900px) {
      .content {
         display: flex;
         align-items: start;
      }
      .text {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
         order: 1;
      }
      .navigation {
         width: 250px;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 250px;
         order: 2;
      }
   }

   </style>
</head>
<body>
   </header>
   <main class="content">
      <nav class="navigation">
         <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
         </ul>
      </nav>
      <article class="text">
         <h1>CSS Aufgabe</h1>
         <p class="grosstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         <p class="kleintext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </article>
   </main>
   <p>MrMurphy, 14.03.2023, 08-15</p>
</body>
</html>

Alles anzeigen

nextuser · 14. März 2023

Zitat von MrMurphy

Mal ein Lösungsansatz.

Na da geht das Lernen aber flöten...

Besonders, da es sich um eine eigens gewollte Weiterbildung handelt.

m.scatello · 14. März 2023

Zitat von MrMurphy

Zum Testen kannst du den Quelltext direkt in eine Datei übernehmen.

Genau, Copy/paste und nix gelernt, aber die Aufgabe ist zufriedenstellend gelöst. Warum muss man immer wieder Lösungen posten, anstatt Hinweise in die richtige Richtung zu geben?

CSS Hilfe - eilt sehr

Jetzt mitmachen!

Teilen

Tags