Antworten auf deine Fragen:
Neues Thema erstellen

Link übernimmt nicht die zugewiesenen CSS-Eigenschaften

Overdressed

DerMatzeBLN

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>
 

dn3d_fanboy

Aktives Mitglied

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

DerMatzeBLN

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
 

noltehans

Aktives Mitglied

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

Aktives Mitglied

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;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben