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

Frage Navigations-Einträge leuchten lassen

L

Lycia

Neues Mitglied
Hallo, wie bekomme ich es hin, dass die Einträge der Navigation eine andere Farbe bekommen, sodass man sieht auf welcher Seite man sich gerade befindet`?

HTML: 
<html>
   <head>
       <meta charset="UTF-8" />
       <title>
       Titelname
       </title>
       <style>
           body
           {
               margin: 0px;
               font-family: arial;
               background: #FFDD8A;             
               width: 1920px;
               height: auto;
           }         
           main2
           {
               margin-right: auto;
               margin-left: auto;
               background: #d2b48c;
               color: #444;
           }         
           header
           {
               padding: 10px;
               color: #080F41;
               background: #FAA14C;
               font-size: 25px;
               text-align:center;             
               height: auto;
           }
           nav
           {
               padding: 10px;
               color: #F5DA81;
               background: #EABE58;
               font-size: 26px; 
               height: auto;
           }         
           main
           {
               padding: 10px;
               color: #39C2E8;
               background: #E5ECD3;
               font-size: 26px; 
               height: 500px;
           }
           footer
           {
               padding: 10px;
               color: #F5DA81;
               background: #AB9346;
               font-size: 18px; 
               height: auto;
           }
           .CenteredContent
           {
               width: 1200px;
               margin-right: auto;
               margin-left: auto;
           }
           .navilist
           {
               display: flex;
               list-style: outside none none;
           }
           .navilist li
           {
               align-items: center;
               border-left: 1px solid #eee;
               display: flex;
               flex: 1 1 0;
               height: 60px;
               justify-content: center;
               margin: 0 auto;
               resize: both;
               width: 100%;
           }
       </style>
   </head>
   <body>
       <!-- KOPFBEREICH -->
       <header>
           <div class="CenteredContent">
               <h1>Seiten-Name</h1>
           </div>
       </header>
     
       <!-- NAVIGATION -->
       <nav>
           <div class="CenteredContent">
               <div class="index">
                   <ul class="navilist">
                       <li><home.html> Home</a></li>
                       <li><a...> Projekte</a></li>
                       <li><a...> ?</a></li>
                       <li><a...> Impressum</a></li>
                     
                   </ul>
               </div>
           </div>
       </nav>
     
       <!-- INHALT -->
       <main>
           <div class="CenteredContent">
               <h3>Empire Story</h3>
           </div>
       </main>
     
       <!-- FOOTER -->
       <footer>
           <div class="CenteredContent">
               <p>Designed by: Sue</p>
               <p>Contact information: </p>
           </div>
       </footer>
   </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Hallo,
verwende bitte diese
[.code][./code] ohne .
Zum Vergrößern anklicken....
Tags oder wie die heißen für deinen Code,

Füge dem passenden Link einfach die Klasse "active" hinzu und designe diese:

Also wenn du auf Home bist so in etwa :
HTML: 
<li><a href="home.html" class="active" > Home</a></li>
<style>
    .active {
        color: green;
    }
</style>
 
Super danke das hab ich hinbekommen. Jetzt steh ich vor den problem, dass der footer nicht ganz unten steht. Wie bekomm ich das bei meinen project hin?

sorry bin blutige Anfängerin
 
Hallo

Du suchst in der Suchmaschine deiner Wahl nach "sticky footer".

Das ist ein Oberbegriff, für den es verschiedene Lösungen gibt. Du musst dir dann die heraussuchen mit der du am besten zurecht kommst.

Ich selbst bevorzuge eine Lösung mit Flexbox.

Bei den Lösungen ohne Flexbox muss die Höhe des footers grundsätzlich fest angegeben werden. Dann muss durch geeignete Breakpoints dafür gesorgt werden dass die Höhe immer passt. Außerdem widerspricht das der Regel, dass die Höhe von Elementen durch ihren Inhalt bestimmt werden soll.

Bei den Lösungen mit Flexbox zickt der IE11 etwas rum, das ist für mich bei Lösungen mit dem Sticky Footer aber das geringste Problem. Die Besucher mit dem IE11 werden keineswegs abgeschreckt und viele werden nicht mal mitbekommen, dass die Seite in anderen Browsern etwas anders aussieht, da dies bei Responsive Layout in verschiedenen Fensterbreiten der Normalfall ist. Zudem ist der IE11 auf dem absteigenden Ast und hat nur noch eine relativ geringe Verbreitung.

Gruss

MrMurphy
 
jappi00 schrieb:
verwende bitte diese
[.code][./code] ohne .
Zum Vergrößern anklicken....
Tags oder wie die heißen für deinen Code
Zum Vergrößern anklicken....
@jappi00 Mit Hilfe des umschliessenden [plain][/plain]-Tags bedarf es keiner Hilfsmittel (Leerzeichen, Punkt, or whatever), damit die Tags der Code-Boxen vom System nicht interpretiert / ausgegeben werden :)

Und hier eine Liste der im Forum verbreitesten Sprachen:
  • HTML: [code=HTML][/code]
  • CSS: [code=CSS][/code]
  • JavaScript: [code=JavaScript][/code]
  • jQuery (JS-Framework): [code=jQuery][/code]
  • PHP: [code=PHP][/code]
  • ...
Eine Liste aller verfügbaren Tags finden sich unter https://www.html.de/help/bb-codes
 
jappi00 schrieb:
Sehr interessantes System, ich denke das schaue ich mir mal ab für meine Seite :)
Alternativ reicht auch:
PHP:
Zum Vergrößern anklicken....
Naja, man stelle sich nur vor, ich hätte vorhin die genannten Code-Boxen in ihrer vollen Pracht gezeigt, die ja nur einen kleinen Ausschnitt aller möglichen Sprachen repräsentieren.

Zumal der individuelle Code der unterschiedlichen Code-Boxen für's ungeschulte Auge dann noch immer nicht ersichtlich ist.

Da bleib' ich doch lieber beim umschliessenden [plain][/plain]-Tag :cool:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben