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

Änderungen bei hover und besuchtem link

Huitzlipochtli

Huitzlipochtli

Neues Mitglied
Hallo an alle,

ich will mit id="visiting" markierte Links schwarz vor weißem hintergrund darstellen (auch wenn hover aktiviert ist)
Das funktioniert aber nicht mehr, sobald der Link bereits genutzt wurde. Der Link wird lila der Hintergrund schwarz.

Außerdem soll #visiting bei jedem Link gleich aussehen. Schwarz auf völlig weißem Hintergrund.(So wie auf der index-Seite, siehe Quellcode)
Das Ergebnis auf der Seite fotographie.html (bei der der Link Fotogalerie mit #visiting markiert ist) ist jedoch, dass der weiße Hintergrund nicht die ganze Div füllt sondern am Rand ein Balken schwarz ist.
Zudem ist die Schriftart kleiner.

Der Rest ist in etwa so wie ich mir das vorstelle.

Hier der Code

index.html
Code: 
<html>
    <head>
        <title>WürZart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="main-style.css">
        <style>

        </style>
   
    <body>
   
        <div id="banner" style="">
            <img id="banner-img" src="tiger.jpg">
        </div>   
     
        <div id="navigation">
            <div class="navigation-div"><a class="div-link" href="index.html">Über uns</a></div>
            <div class="navigation-div"><a class="div-link" href="mitglieder.html">Mitglieder</a></div>
            <div class="navigation-div"><a class="div-link" href="texte.html">Texte</a></div>
            <div class="navigation-div"><a id="visiting">Fotogalerie</a></div>
            <div class="navigation-div"><a class="div-link" href="publikationen.html">Publikationen</a></div>
            <div class="navigation-div"><a class="div-link" href="kontakt.html">Kontakt</a></div>
        </div>
        <div id="main" >
</div>
    </body>


</html>




fotogalerie.html
HTML: 
<html>
    <head>
        <title>WürZart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="main-style.css">
        <style>

        </style>
  
    <body>
  
        <div id="banner" style="">
            <img id="banner-img" src="tiger.jpg">
        </div>  
    
        <div id="navigation">
            <div class="navigation-div"><a class="div-link" href="index.html">Über uns</a></div>
            <div class="navigation-div"><a class="div-link" href="mitglieder.html">Mitglieder</a></div>
            <div class="navigation-div"><a class="div-link" href="texte.html">Texte</a></div>
            <div class="navigation-div"><a id="visiting">Fotogalerie</a></div>
            <div class="navigation-div"><a class="div-link" href="publikationen.html">Publikationen</a></div>
            <div class="navigation-div"><a class="div-link" href="kontakt.html">Kontakt</a></div>
        </div>
        <div id="main" >
</div>
    </body>
</html>

main-style.css
Code: 
/* CSS Document */

#main {
   
}
<!--
#main {

}
-->
#banner {
   border: 1px solid;
    border-bottom-color: black;
    margin: 0px;
    padding: 0px;
    height: 20vh;
    width: 100%;
   
    background-color: black;
}

#banner-img {
    margin: 0px;
    padding: 0;
    height: 100%;
    width: 100%;
}

#navigation {
    padding-left: 0px;
    float: left;
    height: 80vh;
    background-color: black;
   
}

.text-main {
    padding-left: 180px;
}

a:link, a:visited {
    display: block;
    font-weight: bold;
    background-color: black;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}



.navigation-div {
   
    text-align: center;
   
    border-bottom: white;
    border: 1px solid white;
    font-size: 18px;
    font: bold;
    link: white;
}

.navigation-div :hover, navigation-div :active {
    background-color: white;
    color: black;
   
}
    .div-link:link, div-link:visited {
        color: white;
    }
   
    .div-link:hover {
        color: black;
    }
   


#visiting, #visiting:visited{
    background-color: white;
    color: black;
}
 
Ich habe im Moment keine Umgebung, um das nachzustellen. Aufgefallen ist ein ungültiger HTML Kommentar in der CSS https://wiki.selfhtml.org/wiki/CSS/Syntax#Kommentare, der hat aber relativ sicher keine Auswirkung. Ich benutze bei solchen Fällen meist die im Browser integrierten Entwickertools, um zu sehen, wo meine Margins und Paddings und Colors ihren Ursprung haben.
 
djheke schrieb:
Ach hier fehlt ein Punkt.
.div-link:link, div-link:visited {
color: white;
}
Zum Vergrößern anklicken....
Gilt auch für navigation-div :active. Das Leerzeichen zwischen Klassenbezeichner und Pseudoklasse sollte zudem vermieden werden.

Und Kommentare werden grundsätzlich in CSS nicht mit <!-- -->, sondern /* */ ausgezeichnet, um bspw. etwas zu deaktivieren.
CSS: 
/* falsch */
<!--
#main {

}
-->

/* richtig */
/*
#main {

}
*/
 
Danke :).
Aber es gibt noch Probleme.

Eigentlich sollte das ganze doch einfach sein oder?

Vielleicht ist es besser, wenn jemand den Quellcode frisch selbst schreibt.

Das ganze soll so aussehen:

.div-link, div-link besucht
schwarzer Hintergrund
weiße Schriftfarbe
.div-link hover
weißer Hintergrund
schwarze Schriftfarbe

#visiting, #visiting hover, #visiting besucht
weißer Hintergrund
schwarze Schriftfarbe

Wär super, wenn mir jemand den css Code dafür schreibt.
Bei meinem unübersichtlichen Quellcode wirds wahrscheinlich länger dauern, den Fehler zu finden ;)
 
Unwissend oder faul?

Einfaches Beispiel OHNE :visited, weil jeder Client diese Möglichkeit aus Sicherheitsgründen verhindern kann. Also unnötige Arbeit.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aktiven Link hervorheben mit CSS</title>
<style>
* {
 margin:0;
 padding:0;
}

nav {
 background:#fff;
 border:1px solid #000;
 float:left;
}
nav ul , nav li {
 list-style:none;
 width:200px;
 position:relative;
}

nav a , nav strong {
 text-decoration:none;
 background:#000;
 color:#fff;
 padding:10px;
 margin-top:1px;
 display:block;
 position:relative;
}

nav a:hover , nav strong {
 background:#fff;
 color:#000;
}

</style>
</head>

<body>
<h2>Startseite</h2>
<naV>  
 <ul>
  <li><strong>Startseite</strong></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
 </ul>
</nav>


</body>
</html>
 
Huitzlipochtli schrieb:
Das ganze soll so aussehen:

.div-link, div-link besucht
schwarzer Hintergrund
weiße Schriftfarbe
.div-link hover
weißer Hintergrund
schwarze Schriftfarbe

#visiting, #visiting hover, #visiting besucht
weißer Hintergrund
schwarze Schriftfarbe
Zum Vergrößern anklicken....
CSS: 
.div-link:link, .div-link:visited {
  background:black;
  color:white
}
#visiting, .div-link:hover {
  background:white;
  color:black
}
Für's Studium: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/dynamische_Pseudoklasse

Und damit #visiting auch die übrigen Link-Formatierungen erhält:
CSS: 
a:link, a:visited, #visiting {
  display: block;
  font-weight: bold;
  background-color: black;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
}
PS: Was das Markup für die Navigation angeht, orientiere Dich an dem HTML-Code von djheke, wie er mit einer unsortierten Liste (<ul>...</ul>) in der Praxis semantisch angewendet wird - Stichwort: "Vermeidung einer DIV-Suppe, die keinerlei Semantik (siehe https://de.wikipedia.org/wiki/Semantik) enthält".
 
Zuletzt bearbeitet:
Danke, das hat mir weitergeholfen. War keine Faulheit, mir fehlt einfach die Erfahrung und ich hatte bei meinem Quellcode den Überblick verloren. Gibt noch ein kleines Problem, aber soweit bin ich zufrieden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben