• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

aktuelle Seite anzeigen

kaepten

kaepten

Mitglied
Hallo,
Ich möchte das meine aktuelle Seite auch "dicke" Striche hat.
Ich habe es bis jetzt nur das wenn man drüber geht es dicke Striche gibt.

HTML: 
<nav>


<a class ="navi" href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/>
<a class="navi" href="informatik.html">Informatik</a>
<a class="navi" href="schulplan.html">Fächer</a>
<a class="navi" href="anmeldeformular.html">Anmeldeformular</a>
<a class="navi" href="kontakt.html">Kontakt</a>


</nav>


Code: 
a.navi
       {
         display: block;
         padding: 0.5rem;
         border-top: 0.1rem solid black;
         margin: 0.5rem;
         text-decoration: none;
         text-underline: none;
         color: 000000;
    }
a.navi:hover
      {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
   }
a.navi:visited
       {
     text-decoration: none;
     text-underline: none;
     color: 000000;
    }
a.navi:active
       {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
         color: red;
    }

Wie bekomme ich jetzt hin das der Strich von der aktuellen "Seite" dick wird.
Und die textfarbe rot?
 
Werbung:
kaepten schrieb:
Hallo,
Ich möchte das meine aktuelle Seite auch "dicke" Striche hat.
Ich habe es bis jetzt nur das wenn man drüber geht es dicke Striche gibt.

HTML: 
<nav>


<a class ="navi" href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/>
<a class="navi" href="informatik.html">Informatik</a>
<a class="navi" href="schulplan.html">Fächer</a>
<a class="navi" href="anmeldeformular.html">Anmeldeformular</a>
<a class="navi" href="kontakt.html">Kontakt</a>


</nav>


Code: 
a.navi
       {
         display: block;
         padding: 0.5rem;
         border-top: 0.1rem solid black;
         margin: 0.5rem;
         text-decoration: none;
         text-underline: none;
         color: 000000;
    }
a.navi:hover
      {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
   }
a.navi:visited
       {
     text-decoration: none;
     text-underline: none;
     color: 000000;
    }
a.navi:active
       {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
         color: red;
    }

Wie bekomme ich jetzt hin das der Strich von der aktuellen "Seite" dick wird.
Und die textfarbe rot?
Zum Vergrößern anklicken....

Mit einer serverseitigen Programmiersprache wie zB PHP.
Mit :active jedenfalls nicht.
 
Werbung:
kaepten schrieb:
Hast du den Code für CSS,vielleicht Focus?
Habe gefunden was active bedeutet.
Zum Vergrößern anklicken....

Es gibt keinen CSS Selektor dafür. Richtig wäre ein Klasse wie zB ".active" dem aktiven Menüpunkt hinzuzufügen - mit einer serverseitigen Programmiersprache.
Natürlich kannst du das auch hardcoded in jede Datei schreiben:
HTML: 
<li class="navi active">
 
Zuletzt bearbeitet:
Verstehe gerade nur Bahnhof.
hast du mir vielleicht was?
Ich dachte das mit CSS?
Das ich in CSS z.B. a.navi:richtigeklasse
und dann gebe ich dort alles ein und fertig ._.
 
kaepten schrieb:
Verstehe gerade nur Bahnhof.
hast du mir vielleicht was?
Ich dachte das mit CSS?
Das ich in CSS z.B. a.navi:richtigeklasse
und dann gebe ich dort alles ein und fertig ._.
Zum Vergrößern anklicken....

Wenn Informatik aktiv sein soll:

HTML: 
<a class="navi active" href="informatik.html">Informatik</a>
Code: 
.navi.active {
  border-top: .5rem solid black;
  padding-top: .1rem;
  color: #FF0000;
}
 
Werbung:
Hallo,

die Frage wurde doch bereits in einem anderen deiner Beiträge beantwortet.

Erst mal löscht du alle Klassen "navi", die sind überflüssig:

Code: 
class="navi"

Dann fügst du nur dem Link der aktuellen Seite eine Klasse hinzu, wenn "Informatik" die aktuelle Seite ist z. B.

Code: 
<nav>
   <a href="#">Index</a>
   <a class="aktiv" href="#">Informatik</a>
   <a href="#">Schulplan</a>
   <a href="#">Anmeldeformular</a>
   <a href="#">Kontakt</a>
</nav>

Im CSS fügst du dann noch folgende Angabe hinzu:

Code: 
a.aktiv {
   color: red;
   padding-top: 0.4rem;
   border-top: 0.2rem solid black;
}

Die gesamte Seite könnte dann folgendermaßen aufgebaut sein:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navi Layout</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      nav {
         display: flex;
      }
      a {
         display: block;
         padding: 0.5rem;
         border-top: 0.1rem solid black;
         margin: 0.5rem;
      }
      a:hover {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
      }
      a.aktiv {
         color: red;
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
      }
   </style>
</head>
<body>
   <nav>
      <a href="#">Index</a>
      <a class="aktiv" href="#">Informatik</a>
      <a href="#">Schulplan</a>
      <a href="#">Anmeldeformular</a>
      <a href="#">Kontakt</a>
   </nav>
   <main>
      <h1>Informatik</h1>
      <p>Und hier folgt der weitere Inhalt ...</p>
   </main>
</body>
</html>

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben