CODEWITHSUNDEEP
htmlcsscss-selectors
X.Feliers
X.Feliers

Reputation: 47

CSS class won't work

I am slightly new to html and css and want to create my own portfolio. I have some problems with the classes though. Whenever I try to call them in css it doesn't seem to do what its supposed to do.

When I call it without using classes it works perfectly fine.

Hope somebody can help and find my mistake, thanks in advance.

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

CSS

body{
  background-color: #f1f6fe;
}

.header_nav{
  list-style-type: none;
  margin: 0;
  padding: 25px;
  overflow: hidden;
  background-color:#78aefa;
  width: 250 px;
}

li.header_nav{
  float: right;
  padding-right: 20px;
}

a.header_nav {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

UPDATE

Changed css but still doesn't work.

enter image description here

Upvotes: 1

Views: 9494

Answers (4)

SouXin
SouXin

Reputation: 1564

This class won't work. You pointed to the link with class header_nav. But you don't have it.

a.header_nav {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

It should be (link inside the class .header_nav)

.header_nav a {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

UPDATE:

I've included the snippet. Is it what you want?

body{
  background-color: #f1f6fe;
}

.header_nav{
  list-style-type: none;
  margin: 0;
  padding: 25px;
  overflow: hidden;
  background-color:#78aefa;
  width: 250 px;
}

li.header_nav{
  float: right;
  padding-right: 20px;
}

.header_nav a {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

UPDATE 2 Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.) 

.header_nav a {
  font-family: arial;
  display: block;
  color:white!important;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none!important;
 }

Upvotes: 2

Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

Make the following changes:

From 

a.header_nav { 

}

To: 

.header_nav a {

}

and also you can make change to html for easiness 

body{
  background-color: #f1f6fe;
}

ul.header_nav_container {
    float:right;   
    padding: 20px;
}


ul.header_nav_container li.header_nav {
    list-style-type: none;
    float: left;
    padding: 0 20px
    
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav_container">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

Upvotes: 0

A.D
A.D

Reputation: 374

enter image description here If class doesn't work you can specify ids and pass the styles similarly

Upvotes: -1

Dale Maurice
Dale Maurice

Reputation: 26

I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,

.header_nav li { your styles }
.header_nav a { your styles }

Upvotes: 0

Related Questions