Frage zu 2 verschiedenen Listen HTML/CSS

Klérâd² · 07/09/2018, 12:03

Moin Leute, bin derzeit dabei mit BlueGriffon was in meiner Ausbildung zu lernen, jedoch hab ich derzeit das Problem, das ich ja schon eine Liste (also meine Nav Leiste) habe und über CSS angepasst hab, jetzt möchte ich gerne eine unabhängige Liste erstellen, die nicht von den Navigationsleisten Werten beeinflusst wird, klappt irgentwie aber nicht, habs schon mit id/class versucht. bleibt aber genau gleich.
Nicht wundern, sind alles nur Plathalter und zu lern zwecken, keines wegs für eine realistische Website.

Ich möchte gerne eine Liste mit vertikal links unter dem ersten Absatz haben.
HTML Code

Spoiler

Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Meine Tolle Firma</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <meta name="author" content="Daniel Mai">
    <meta name="description" content="Beispielseite zum Studienheft">
    <meta name="keywords" content="BlueGriffon, Beispiel">
    <script type="application/x-javascript"></script>
  </head>
  <body>
    <header>
      <h1><a href="index.html" id="header1">Meine tolle Firma</a></h1>
    </header>
    <div id="inhalt">
      <nav>
        <ul>
          <li> <a href="index.html">Startseite</a></li>
          <li> <a href="uebermich.html">Über mich</a></li>
          <li> <a href="leistungen.html">Leistungen</a></li>
          <li> <a href="kontakt.html">Kontakt</a></li>
        </ul>
      </nav>
      <section>
        <article>
          <p id="text1"> 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. 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>
          <br>
          <img id="bild1" src="bild1.jpg" style="width: 274px; height: 190px;">
          <p> 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. 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>
          <br>
          <img id="bild2" src="bild2.jpg" style="width: 223px; height: 154px;">
          <p id="text2"> 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. 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>
      </section>
      <footer>
        <p id="footer">©2019 Meine tolle Firma</p>
      </footer>
    </div>
    <br>
  </body>
</html>

CSS Code

Spoiler

Vielen Dank

florian0 · 07/09/2018, 12:34

Gewöhn dir allgemein an "lokale styles" auch lokal zu definieren. Derzeit gilt dein UL-Style für das ganze Dokument, soweit warst du sicher auch schon.
CSS erlaubt dir, das ganze auch auf z.b. den nav-tag zu beschränken.

Code:

nav ul {
    /* ... */
}

Das kannst du beliebig verschachteln

Code:

nav ul li a:hover {
    /* ... */
}

Oder ggf. sogar noch enger definieren. In dieser Form gilt der ul stil für alle ul in einem nav.

Code:

<nav>
    <ul>
        <li>Element
            <ul>
                <li>Sub Element</li>
            </ul>
        </li>
    </ul>
</nav>

Mit dem ">" definierst du eine Regel nur für direkte Unterelemente.

Code:

nav > ul {
    /* ... */
}

nav > ul > li > a:hover {
    /* ... */
}

laffel1337 · 07/12/2018, 11:08

Wo ist denn deine zweite Liste? Kannst sie normalerweise einfach mit einem <div> einfügen.

Klérâd² · 07/14/2018, 21:13

Quote:

Originally Posted by laffel1337

Wo ist denn deine zweite Liste? Kannst sie normalerweise einfach mit einem <div> einfügen.

Hat sich schon gelöst durch die vorherige Antwort, hab keine Liste im HTML Code drinnen gehabt zu dem Zeitpunkt. Aber hat alles geklappt jetzt.