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

Frage Navigations-Einträge leuchten lassen

Lycia

Neues Mitglied
20 Dezember 2016
4
0
1
36
#1
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 von einem Moderator bearbeitet:

Lycia

Neues Mitglied
20 Dezember 2016
4
0
1
36
#3
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
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.458
211
63
#4
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
 
Zustimmungen: jappi00

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#5
@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
 
Zustimmungen: jappi00

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#7
Sehr interessantes System, ich denke das schaue ich mir mal ab für meine Seite :)
Alternativ reicht auch:
PHP:
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:
 
Zustimmungen: jappi00
Top Bottom