1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage Navigations-Einträge leuchten lassen

Dieses Thema im Forum "Alles rund HTML und XHTML" wurde erstellt von Lycia, 20 Dezember 2016.

  1. Lycia

    Lycia Neues Mitglied

    Registriert seit:
    20 Dezember 2016
    Beiträge:
    4
    Punkte für Erfolge:
    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`?

    Code (html5):
    1.    <head>
    2.        <meta charset="UTF-8" />
    3.        <title>
    4.        Titelname
    5.        </title>
    6.        <style>
    7.            body
    8.            {
    9.                margin: 0px;
    10.                font-family: arial;
    11.                background: #FFDD8A;            
    12.                width: 1920px;
    13.                height: auto;
    14.            }        
    15.            main2
    16.            {
    17.                margin-right: auto;
    18.                margin-left: auto;
    19.                background: #d2b48c;
    20.                color: #444;
    21.            }        
    22.            header
    23.            {
    24.                padding: 10px;
    25.                color: #080F41;
    26.                background: #FAA14C;
    27.                font-size: 25px;
    28.                text-align:center;            
    29.                height: auto;
    30.            }
    31.            nav
    32.            {
    33.                padding: 10px;
    34.                color: #F5DA81;
    35.                background: #EABE58;
    36.                font-size: 26px;
    37.                height: auto;
    38.            }        
    39.            main
    40.            {
    41.                padding: 10px;
    42.                color: #39C2E8;
    43.                background: #E5ECD3;
    44.                font-size: 26px;
    45.                height: 500px;
    46.            }
    47.            footer
    48.            {
    49.                padding: 10px;
    50.                color: #F5DA81;
    51.                background: #AB9346;
    52.                font-size: 18px;
    53.                height: auto;
    54.            }
    55.            .CenteredContent
    56.            {
    57.                width: 1200px;
    58.                margin-right: auto;
    59.                margin-left: auto;
    60.            }
    61.            .navilist
    62.            {
    63.                display: flex;
    64.                list-style: outside none none;
    65.            }
    66.            .navilist li
    67.            {
    68.                align-items: center;
    69.                border-left: 1px solid #eee;
    70.                display: flex;
    71.                flex: 1 1 0;
    72.                height: 60px;
    73.                justify-content: center;
    74.                margin: 0 auto;
    75.                resize: both;
    76.                width: 100%;
    77.            }
    78.        </style>
    79.    </head>
    80.    <body>
    81.        <!-- KOPFBEREICH -->
    82.        <header>
    83.            <div class="CenteredContent">
    84.                <h1>Seiten-Name</h1>
    85.            </div>
    86.        </header>
    87.      
    88.        <!-- NAVIGATION -->
    89.        <nav>
    90.            <div class="CenteredContent">
    91.                <div class="index">
    92.                    <ul class="navilist">
    93.                        <li><home.html> Home</a></li>
    94.                        <li><a...> Projekte</a></li>
    95.                        <li><a...> ?</a></li>
    96.                        <li><a...> Impressum</a></li>
    97.                      
    98.                    </ul>
    99.                </div>
    100.            </div>
    101.        </nav>
    102.      
    103.        <!-- INHALT -->
    104.        <main>
    105.            <div class="CenteredContent">
    106.                <h3>Empire Story</h3>
    107.            </div>
    108.        </main>
    109.      
    110.        <!-- FOOTER -->
    111.        <footer>
    112.            <div class="CenteredContent">
    113.                <p>Designed by: Sue</p>
    114.                <p>Contact information: </p>
    115.            </div>
    116.        </footer>
    117.    </body>
    118. </html>
     
    Zuletzt von einem Moderator bearbeitet: 21 Dezember 2016
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. jappi00

    jappi00 Mitglied

    Registriert seit:
    7 Januar 2015
    Beiträge:
    119
    Punkte für Erfolge:
    18
    Hallo,
    verwende bitte diese
    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:
    1.  
    2. <li><a href="home.html" class="active" > Home</a></li>
    3.     .active {
    4.         color: green;
    5.     }
    6.  
     
  3. Lycia

    Lycia Neues Mitglied

    Registriert seit:
    20 Dezember 2016
    Beiträge:
    4
    Punkte für Erfolge:
    1
    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
     
  4. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.251
    Punkte für Erfolge:
    63
    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 gefällt das.
  5. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.445
    Punkte für Erfolge:
    83
    @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 gefällt das.
  6. jappi00

    jappi00 Mitglied

    Registriert seit:
    7 Januar 2015
    Beiträge:
    119
    Punkte für Erfolge:
    18
    Sehr interessantes System, ich denke das schaue ich mir mal ab für meine Seite :)
    Alternativ reicht auch:
    [PHP][/PHP]
     
  7. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.445
    Punkte für Erfolge:
    83
    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:
     
    jappi00 gefällt das.