all the links are changing if I click on one link

StackOverflow https://stackoverflow.com/questions/23263997

  •  08-07-2023
  •  | 
  •  

Question

I am new here as well as at web designing. So I know little.

In my practice web design, I have setup 5 nav links and styled them using css. This is my CSS code:

body {
background-color: #f9f9f9;
margin: 0;
border-top: 2px solid #020202;
color: #1c1c1c;
font-family: "arial", "Helvetica", sans-serif;
}

.clear {
    clear: both;
}

li {
    font-weight: bold;
    margin-top: 15px;
    list-style-type: none;
    float: left;
    margin-left: 60px;
    height: 20px;
    text-align: center;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
}

nav {
    width: 960px;
    margin-top: 30px;
    float: right;
}


img {
    margin-right: 150px;
    width: 50px;
    float: right;
}

a {
    color: black;
}

a:visited {
    color: #15a02c;
}

a:hover {
    color: #97d586;
}


span {
    font-style: italic;
    color: #03da35;
}

h1 {
    font-size: 23px;
    margin-top: 80px;
    font-weight: bolder;
    margin-left: 5px;
}

#content img {
    width: 400px;
    float: left;
    margin-top: 50px;
}

h2 {
    font-weight: normal;
    font-size: 22px;
    margin-top: 10px
}

p {
    font-size: 13px;
    font-weight: bold;
    margin-top: 30px;   
}

footer img {
    width: 720px;
    height: 86px;
    margin-top: 100px;
    float: right;
}

#b_b {
    width: auto;
    height: 17px;
    background-color: black;
}

and this is my html:

    <!DOCTYPE HTML>

<html>
    <head>
        <title>Welcome to Example 1</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div class="wrapper">
            <nav>
                <ul>
                    <a href="#"><li>HOME</li></a>
                    <a href="#"><li>WORK</li></a>
                    <a href="#"><li>RESUME</li></a>
                    <a href="#"><li>FREELANCE</li></a>
                    <a href="#"><li>CONTACT</li></a>                
                </ul>
                    <a href="#"><img src="twitter.jpg" alt="follow me"></a>
            </nav>
                <div class="clear"></div>
        </div>

        <div class="wrapper">
            <div id="content">
                <h1>LOOKING FOR A FREELANCE FLASH/WEB DEVELOPER?</h1>
                <div class="clear"></div>
                <img src="logo.jpg" alt="RINGO LOGO">
                <div class="clear"></div>
                <h2>FREELANCE FLASH & WEB DEVELOPER</h2>
                <p>Look at my <span>work</span> and my <span>resume.</span> I am <span>available</span> as <span>freelance</span> Flash & Web Developer.</p>
            </div>
        </div>
        <footer>
            <div class="wrapper">
                <img src="footer.jpg" alt="footer image">
                <div class="clear"></div>       
            </div>
        <div id="b_b"></div>
        </footer>
    </body>
</html>

Now when I click one link like Home, all the links go green as if they all are visited.

Was it helpful?

Solution

Because all links' href attribute have same value: #.

Make them different, for example: 

<ul>
    <a href="#home"><li>HOME</li></a>
    <a href="#work"><li>WORK</li></a>
    <a href="#resume"><li>RESUME</li></a>
    <a href="#freelance"><li>FREELANCE</li></a>
    <a href="#contact"><li>CONTACT</li></a>               
</ul>

Also change your unordered list (ul). Do not nest list items (li) in anchor (a) eventhough it works well obey to standards. 

<ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#work">WORK</a></li>
    <li><a href="#resume">RESUME</a></li>
    <li><a href="#freelance">FREELANCE</a></li>
    <li><a href="#contact">CONTACT</a></li>           
</ul>

OTHER TIPS

Fix

Change the href value of the links to point to other locations, like www.google.com and www.stackoverflow.com etc.

Why When one link is clicked, that destination is stored as visited, not the link itself. By changing the destinations, you can fix your issue (which wouldn't show up in deployment, typically, anyway). This is required as multiple links to the same page should inform the user if they have been visited or not...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top