Question 372908 in Html Question posted in
Some basic documentation can be found here.

Html – Why is css not accepting for header and navbar changes?

this is my first time creating a website using html and css. I am still in the beginning stages of creating it and I am stuck on the Header and Navbar portion. Everything else in the code works except the Header and Navbar. The changes are not seen when opening localhost in Chrome or Edge. This is the code I am using:

<!DOCTYPE html>
<html lang="en">

</html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" contant="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AB's Ecommerce Website</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stytlesheet" href="style.css">
</head>

<body>

    <section id="header">
        <a href="#"><img src="logo.gif" class="logo" alt=""></a>
        <div class="header">
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="cart.html"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </section>

    <script src="script.js"></script>
</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght!100;200;300;400;500;600;700;800;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan', sans-serif;

}

h1 {
    font-size: 50px;
    line-height: 64px;
    color: #222;
}

h2 {
    font-size: 46px;
    line-height: 54px;
    color: #222;
}

h4 {
    font-size: 20px;
    color: #222;
}

h6 {
    font-weight: 700;
    font-size: 12px;
}

P {
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;
}

.section-p1 {
    padding: 40px 80px;
}

.section-m1 {
    padding: 40px 0;
}

body {
    width: 100%;
}

/* Header */ 
#header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background-color: aqua;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);

}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

I have tried using .header (instead of #header) as well as clearfix to resolve the issue. I have also tried using different browsers as well as incognito mode for both. Like I said, I am relatively new to this so I may have been doing it wrong. I am also using Visual Studio Code and XAMPP to host it locally. Any guidance is appreciated.

Tags:

2

Answers


  1. 0

    You misspelled stylesheet in

    <link rel="stytlesheet" href="style.css">
    Login or Signup to reply.
  2. 0

    I am Govind Kumar Singh, also a very new beginner just joined learning HTML5 and CSS from today.

    I am seeing that you have used h1, h2, h3, and h4 tag which are of no use here.If you had you should have provided html code of that too.

    I am seeing code and found same like vishal that you have misspelled the stylesheet there.

    <link rel="stytlesheet" href="style.css">

    Also, I have written code in simple way for you. Modify it to make your webpage more clear.

    @import url('https://fonts.googleapis.com/css2?family=Spartan:wght!100;200;300;400;500;600;700;800;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan', sans-serif;

}

body {
    width: 100%;
}

h1 {
    font-size: 50px;
    line-height: 64px;
    color: #222;
}

h2 {
    font-size: 46px;
    line-height: 54px;
    color: #222;
}

h4 {
    font-size: 20px;
    color: #222;
}

h6 {
    font-weight: 700;
    font-size: 12px;
}

P {
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 60px;
    background-color: rgb(243, 137, 51);
    box-shadow: 0 5px 15px rgba(245, 161, 64, 0.06);
    margin: 0;
}

/* I found that you have to turn off header colour to orange too to make your website asthetic.*/
/*I am simply using ul tag to make your background look aqua as you stated there. I found that orange was not looking good. Let's try black.*/


#logo img{
    height: 100px;
    display: inline-block;
    vertical-align: middle;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(242, 156, 75)
  }
  

/* Now it's time to make your navigation bar in horizontal instead of vertical. That will work for you.*/

/* I am going to use float left property. Here.*/



li{
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AB's Ecommerce Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="logo"> <!--Using a div element to insert logo is cool idea.-->
        <a>
            <img src="logo.gif" class="logo" alt="logo" >
        </a>

    </div>
    <div id="navigation">
        <!--No need of section tag here as I can simply use header tag to make header for website.-->
        <header>
            <!--I am going to use header tag to make header simply.-->
            <nav>
                <!--I am going to use navigation to write your navigation bar for website.-->
                <ul>
                    <!--I copied your next code to create same file.-->
                    <li><a class="active" href="index.html">Home</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="cart.html"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a></li>
                </ul>
            </nav>


        </header>
    </div>
    
</body>
</html>

    Now brother. If you agree we can make a pair coding group and grow together. Just drop dm to me at instagram:- @official_govind_k

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search