CODEWITHSUNDEEP
htmlcss
Ted Mazer
Ted Mazer

Reputation: 15

Navbar Class in HTML won't show some CSS attributes

For some reason, the only CSS attributes going through in the nText class are the inline display and font size. The border attributes, padding, and text-decoration will not respond to being changed. The code is as follows: 

<!DOCTYPE html>
<html>
<head>
<title>Ted's Lawn Care</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
    <a href="index.html"> <img id="headText" src="headerLeftImage.jpg"/>
    <img id="headImage" src="headerImage.jpg"/></a>         
</div>
<div id="navbar">
    <img id="navImage" src="navBackground.jpg"/>
    <div id="navText">
        <p class="nText" id="home"><a href="index.html">Home</a></p>
        <p class="nText" id="services"><a href="services.html">Services</a></p>
        <p class="nText" id="rates"><a href="rates.html">Rates</a></p>
        <p class="nText" id="contact"><a href="contact.html">Contact Us</a></p>
        <p class="nText" id="about"><a href="about.html">About</a></p>
    </div>
</div>
</body>
</html>

And the CSS:

 *{-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;

}
#header{
background-color: #BDB76B;
height: 20%;
width: 100%;
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
border-bottom: 10px;
border-top: 0;
border-left: 0;
border-right: 0;
border-color: black;
border-style: solid;
}
#headText{
position: relative;
float: left;
height: 100%;
width: 15%
}
#headImage{
position: relative;
float: right;
height: 100%;
width: 85%;
}
#navImage{
background-color: #66CD00;
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navBar{
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navText{
z-index: 1;
position: absolute;
top: 20%; left: 0; right: 0;
text-align: center;
}
.nText{
display: inline;
border-width: 2px;
border-color: #9ACD32;
border-top-left-radius: 5px;
border-top-right-radius: 80px;
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;`
}

Thanks for any and all help.

Upvotes: 1

Views: 71

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Define your nText inline-block; border-style:solid and your link text display:inline-block; and text-decoration none;

As like this 

    .nText{
    display: inline-block;
        vertical-align:top;
border-style: solid;
    }
    .nText a{
        display:inline-block;
        vertical-align:top;
        text-decoration:none;
    }

and correct your id in css change this #navBar into this #navbar

Demo

*{-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;

}
#header{
background-color: #BDB76B;
height: 20%;
width: 100%;
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
border-bottom: 10px;
border-top: 0;
border-left: 0;
border-right: 0;
border-color: black;
border-style: solid;
}
#headText{
position: relative;
float: left;
height: 100%;
width: 15%
}
#headImage{
position: relative;
float: right;
height: 100%;
width: 85%;
}
#navImage{
background-color: #66CD00;
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navbar{
width: 100%;
height: 8%;
position: absolute;
top: 20%; left: 0; right: 0;
}
#navText{
z-index: 1;
position: absolute;
top: 20%; left: 0; right: 0;
text-align: center;
}
.nText{
display: inline-block;
    vertical-align:top;
    border-style:solid;
border-width: 2px;
border-color: #9ACD32;
border-top-left-radius: 5px;
border-top-right-radius: 80px;
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;`
    
}
.nText a{
    display:inline-block;
    vertical-align:top;
    text-decoration:none;
}
<div id="header">
    <a href="index.html"> <img id="headText" src="headerLeftImage.jpg"/>
    <img id="headImage" src="headerImage.jpg"/></a>         
</div>
<div id="navbar">
    <img id="navImage" src="navBackground.jpg"/>
    <div id="navText">
        <p class="nText" id="home"><a href="index.html">Home</a></p>
        <p class="nText" id="services"><a href="services.html">Services</a></p>
        <p class="nText" id="rates"><a href="rates.html">Rates</a></p>
        <p class="nText" id="contact"><a href="contact.html">Contact Us</a></p>
        <p class="nText" id="about"><a href="about.html">About</a></p>
    </div>
</div>

Upvotes: 0

Zedrian
Zedrian

Reputation: 909

See here for corrections http://jsfiddle.net/16qx41k2/1/

There is a typo.

You wrote your id in camel case in the css. It is case sensitive. change

#navBar {
...
}

to 

#navbar {
...
}

Same rule applies to everywhere.

For the border, you have to add the border-style: solid if you wish to see the border. You can of course have other styles such as border-style:dashed.

Upvotes: 0

user4264877
user4264877

Reputation:

All you have to do is border style wihout it border attributes dont work 

.nText{
border-style: solid;
}

Upvotes: 1

Related Questions