Link übernimmt nicht die zugewiesenen CSS-Eigenschaften

Overdressed · 17.05.2018

Hallo zusammen,

ich arbeite mich gerade in html/css ein und baue als Übung von einem Tutorial die Startseite vom ARD nach. (Erstmal die Basics - das ist sicherlich nicht perfekt)

Leider ist es so, dass meine Links sich nicht über die ID #news ansprechen lassen. Ich packe euch den Code mal hier rein - vielleicht habe ich einfach was übersehen. Ich danke euch.

Code:

<!doctype html>
<html>
<head>
    <title>Tagesschau</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <style type="text/css">
       
        * {
            margin: 0px;
            padding: 0px;
        }
       
        body {
            background-image: url("blue-bend.jpg");
            background-position: center;
            min-height: 950px;
            background-size: cover;
        }
       
        nav {
            background-color: rgba(0,26,75,0.6);
            width: 100%;
            height: 35px;
            border-bottom: #fff 1px solid;
        }
       
        nav ul {
            max-width: 960px;
            text-align: center;
            padding: 12px 6px 4px 6px;
            list-style: none;
           
        }
   
        nav li {
            font-family: arial;
            color: white;
            float: left;
           
        }
       
        nav a {
            text-decoration: none;
            padding: 12px 6px 4px 6px;
            color: white;
           
        }
       
        nav a:hover {
            text-decoration: none;
            color: #001a4b;
            background-color: white;
            padding: 12px 6px 4px 6px;
            border-bottom: #fff 3px solid;
        }
       
        .nav_wrapper {
            max-width: 1080px;
            margin: 0 auto;
        }
       
        .body_wrapper {
            max-width: 1080px;
            margin: 0 auto;
        }
       
       
           
        .fontstyle_bold {
            font-weight: bold;
        }
       
   
        form {
            border-radius: 0;
            float: right;
            margin-top: 40px;
            height: 25px;
            width: 150px;
        }
       
        .search-input {
            margin-top: -200px;
            height: 30px;
            padding: 10px 5px;
            font-size: 14px;
            background-image: url(lupe_gross-2.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: 20px;
        }
       
        #ard_logo_nav {
            margin-top: -10px;
            height: 22px;
            float: right;
        }
       
        #navi_abstand_rechts {
            margin-right: 80px;
        }
       
        #abstand_logo {
            margin-right: -30px;
        }
       
        #box1 {
            margin-top: 100px;
            background-color: white;
            padding: 5px;
            height: auto;
            overflow: auto;
           
        }
       
        .nachrichten {
            text-transform: uppercase;
            color: white;
            background-color: cornflowerblue;
            font-family: arial;
            text-align: left;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-bottom: 5px;
         
        }
       
        .prehead {
            font-family: arial;
            margin-top: 10px;
            color: #24324c;
                                 
        }
           
        #bildfluss_links {
            float:left;
            padding-right: 10px;
           
        }
       
        p {
            font-family: arial;
            color: #24324c;
                     
        }
       
        .headline { 
            color: #24324c;
            font-family: arial;
            margin-top: 10px;
            margin-bottom: 10px;
            }
       
        hr {
            margin: 10px 0px 10px 0px;
        }
       
        #news a {
            text-decoration: none;
            color: #24324c;
            font-family: arial;
           
           
        }
       
        #news a:link {
            text-decoration: none;
            color: #24324c;
            font-family: arial;
           
           
        }
       
        #news a:visited {
            text-decoration: none;
            color: #24324c;
            font-family: arial;
            }
       
       #news a:hover {
            text-decoration: none;
            background-color: color: #24324c;
        }
       

           
           
       
               
    </style>
   

   
</head>
<body>
   
    <nav>
        <div class="nav_wrapper">
        <ul>
            <li><a href="http://www.ard.de">ARD Home</a></li>
            <li><a href="http://www.tagesschau.de">Nachrichten</a></li>
            <li><a href="https://www.sportschau.de">Sport</a></li>
            <li><a href="https://boerse.ard.de/index.html">Börse</a></li>
            <li><a href="http://www.ard.de/home/ratgeber/ARD_Ratgeber/22630/index.html">Ratgeber</a></li>
            <li><a href="http://www.ard.de/home/wissen/ARD_Wissen/23160/index.html">Wissen</a></li>
            <li><a href="http://www.tagesschau.de">Kultur</a></li>
            <li><a href="https://www.sportschau.de">Kinder</a></li>
            <li><a id="navi_abstand_rechts" href="https://boerse.ard.de/index.html">Die ARD</a></li>
            <li><a class="fontstyle_bold" href="http://www.ard.de">Fernsehen</a></li>
            <li><a class="fontstyle_bold" href="http://www.tagesschau.de">Radio</a></li>
            <li><a id="abstand_logo" class="fontstyle_bold" href="https://www.sportschau.de">ARD Mediathek</a></li>
        </ul>
       
        <img id="ard_logo_nav" src="ard_weis.png">
        </div>
    </nav>
       
    <div class="body_wrapper">
       
            <a href="http://www.ard.de/home/ard/ARD_Startseite/21920/index.html"><img style="margin-top: 10px; height:70px; float: left"  src="logo_base.png"></a>
           
            <form>           
                <input type="search" placeholder="Suche" class="search-input">
               
            </form>
       
    </div>
       
   
   
    <div class="body_wrapper" id="box1" >
        <h3 class="nachrichten">nachrichten</h3>
               
        <img id=bildfluss_links src="512.jpg" alt="Ein Bild">
       
        <h6 class="prehead">Luftverschmutzung</h6>
        <h3 class="headline" >EU-Kommission verklagt Deutschland</h3>
        <p>Ermahnungen allein haben offenbar nicht ausgereicht - nun verklagt die EU-Kommission Deutschland wegen zu schlechter Luft vor dem EuGH. Zu oft wurden Grenzwerte überschritten und zu wenig gegen die Hauptverursacher unternommen. | <span class="fontstyle_bold">mehr</span></p>
        <hr>
        <p><a href="http://www.tagesschau.de/inland/schulze-diesel-101.html" id="news">Schadstoffe in Städten: EU-Kommision plant Klage, 01.04.2018 </a></p>
        <hr>
        <p><a href="http://www.tagesschau.de/inland/schulze-diesel-101.html" id="news">Schadstoffe in Städten: EU-Kommision plant Klage, 01.04.2018 </a></p>
        <hr>
        <p><a href="http://www.tagesschau.de/inland/schulze-diesel-101.html" id="news">Schadstoffe in Städten: EU-Kommision plant Klage, 01.04.2018 </a></p>
        <hr>
       
    </div>
           
</body>
</html>

lachender_engel · 17.05.2018

Nicht alle Browser unterstützen die von Dir verwendete Methodik. Schreibe das anders herum

Code:

a:link#news
a:visited#news

dn3d_fanboy · 18.05.2018

Es müsste doch auch a#news heißen. Bei dir müsste es vor dem Link ein Element mit der ID "news" geben. ;-)

Und nebenbei: eine ID sollte auch nur EINMAL im Dokument auftauchen. Verwende stattdessen bei den Links eine Klasse (.news).

Overdressed · 18.05.2018

Ah ok vielen Dank,

er hat es auch so in dem Kurs verwendet -.-
Warum kommt a vor der ID? Die Schreibweise hab ich so noch gar nicht gesehen - probiere es gleich mal aus.

Danke für die Tips

Overdressed · 18.05.2018

Habs ausprobiert, eine klasse draus gemacht und andersrum gestellt - funktioniert leider auch nicht.

noltehans · 18.05.2018

Code:

<!doctype html>
<html>
<head>
    <title>Tagesschau</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <style type="text/css">
       
        * {
            margin: 0px;
            padding: 0px;
        }
       
        body {
            background-image: url("blue-bend.jpg");
            background-position: center;
            min-height: 950px;
            background-size: cover;
        }
       
        nav {
            background-color: rgba(0,26,75,0.6);
            width: 100%;
            height: 35px;
            border-bottom: #fff 1px solid;
        }
       
        nav ul {
            max-width: 960px;
            text-align: center;
            padding: 12px 6px 4px 6px;
            list-style: none;
           
        }
   
        nav li {
            font-family: arial;
            color: white;
            float: left;
           
        }
       
        nav a {
            text-decoration: none;
            padding: 12px 6px 4px 6px;
            color: white;
           
        }
       
        nav a:hover {
            text-decoration: none;
            color: #001a4b;
            background-color: white;
            padding: 12px 6px 4px 6px;
            border-bottom: #fff 3px solid;
        }
       
        .nav_wrapper {
            max-width: 1080px;
            margin: 0 auto;
        }
       
        .body_wrapper {
            max-width: 1080px;
            margin: 0 auto;
        }
       
       
           
        .fontstyle_bold {
            font-weight: bold;
        }
       
   
        form {
            border-radius: 0;
            float: right;
            margin-top: 40px;
            height: 25px;
            width: 150px;
        }
       
        .search-input {
            margin-top: -200px;
            height: 30px;
            padding: 10px 5px;
            font-size: 14px;
            background-image: url(lupe_gross-2.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: 20px;
        }
       
        #ard_logo_nav {
            margin-top: -10px;
            height: 22px;
            float: right;
        }
       
        #navi_abstand_rechts {
            margin-right: 80px;
        }
       
        #abstand_logo {
            margin-right: -30px;
        }
       
        #box1 {
            margin-top: 100px;
            background-color: white;
            padding: 5px;
            height: auto;
            overflow: auto;
           
        }
       
        .nachrichten {
            text-transform: uppercase;
            color: white;
            background-color: cornflowerblue;
            font-family: arial;
            text-align: left;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            margin-bottom: 5px;
         
        }
       
        .prehead {
            font-family: arial;
            margin-top: 10px;
            color: #24324c;
                                 
        }
           
        #bildfluss_links {
            float:left;
            padding-right: 10px;
           
        }
       
        p {
            font-family: arial;
            color: #24324c;
                     
        }
       
        .headline {
            color: #24324c;
            font-family: arial;
            margin-top: 10px;
            margin-bottom: 10px;
            }
       
        hr {
            margin: 10px 0px 10px 0px;
        }
       
        .news a {
            text-decoration: none;
            color: #24324c;
            font-family: arial;
           
           
        }
       
        .news a:link {
            text-decoration: none;
            color: #24324c;
            font-family: arial;
           
           
        }
       
        .news a:visited {
            text-decoration: none;
            color: #24324c;
            font-family: arial;
            }
       
       .news a:hover {
            text-decoration: none;
            color: #fff;
            background-color: #24324c;
        }
       
           
           
       
               
    </style>
   
   
</head>
<body>
   
    <nav>
        <div class="nav_wrapper">
        <ul>
            <li><a href="http://www.ard.de">ARD Home</a></li>
            <li><a href="http://www.tagesschau.de">Nachrichten</a></li>
            <li><a href="https://www.sportschau.de">Sport</a></li>
            <li><a href="https://boerse.ard.de/index.html">Börse</a></li>
            <li><a href="http://www.ard.de/home/ratgeber/ARD_Ratgeber/22630/index.html">Ratgeber</a></li>
            <li><a href="http://www.ard.de/home/wissen/ARD_Wissen/23160/index.html">Wissen</a></li>
            <li><a href="http://www.tagesschau.de">Kultur</a></li>
            <li><a href="https://www.sportschau.de">Kinder</a></li>
            <li><a id="navi_abstand_rechts" href="https://boerse.ard.de/index.html">Die ARD</a></li>
            <li><a class="fontstyle_bold" href="http://www.ard.de">Fernsehen</a></li>
            <li><a class="fontstyle_bold" href="http://www.tagesschau.de">Radio</a></li>
            <li><a id="abstand_logo" class="fontstyle_bold" href="https://www.sportschau.de">ARD Mediathek</a></li>
        </ul>
       
        <img id="ard_logo_nav" src="ard_weis.png">
        </div>
    </nav>
       
    <div class="body_wrapper">
       
            <a href="http://www.ard.de/home/ard/ARD_Startseite/21920/index.html"><img style="margin-top: 10px; height:70px; float: left"  src="logo_base.png"></a>
           
            <form>         
                <input type="search" placeholder="Suche" class="search-input">
               
            </form>
       
    </div>
       
   
   
    <div class="body_wrapper" id="box1" >
        <h3 class="nachrichten">nachrichten</h3>
               
        <img id="bildfluss_links" src="512.jpg" alt="Ein Bild">
       
        <h6 class="prehead">Luftverschmutzung</h6>
        <h3 class="headline" >EU-Kommission verklagt Deutschland</h3>
        <p>Ermahnungen allein haben offenbar nicht ausgereicht - nun verklagt die EU-Kommission Deutschland wegen zu schlechter Luft vor dem EuGH. Zu oft wurden Grenzwerte überschritten und zu wenig gegen die Hauptverursacher unternommen. | <span class="fontstyle_bold">mehr</span></p>
        <hr>
        <p class="news"><a href="http://www.tagesschau.de/inland/schulze-diesel-101.html" >Schadstoffe in Städten: EU-Kommision plant Klage, 01.04.2018 </a></p>
        <hr>
        <p class="news"><a href="http://www.tagesschau.de/inland/schulze-diesel-101.html" >Schadstoffe in Städten: EU-Kommision plant Klage, 01.04.2018 </a></p>
        <hr>
        <p class="news"><a href="http://www.tagesschau.de/inland/schulze-diesel-101.html" >Schadstoffe in Städten: EU-Kommision plant Klage, 01.04.2018 </a></p>
        <hr>
       
    </div>
           
</body>
</html>

dn3d_fanboy · 18.05.2018

Overdressed schrieb:
Ah ok vielen Dank,

er hat es auch so in dem Kurs verwendet -.-
Warum kommt a vor der ID? Die Schreibweise hab ich so noch gar nicht gesehen - probiere es gleich mal aus.

Danke für die Tips

Das a kommt vor die ID (oder jetzt Klasse) weil du sonst nicht das a mit eben dieser ID/Klasse ansprichst sondern nach deiner Schreibweise ein Element oberhalb von a mit der ID "news".

Wenn es jetzt bei dir heißt:

HTML:

<a href="#" class="news">Link</a>

Müsste das CSS so z.B. heißen:

Code:

a.news {
color: red;
}

dn3d_fanboy · 18.05.2018

Hier hast du es mal korrekt auf JSfiddle:

https://jsfiddle.net/feqrm0ep/