0

I am having this following code:

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Accueil</title>

    <link rel="stylesheet" href="css/header-search.css" />
    <link rel="stylesheet" href="css/header.css" />

</head>

<body>

    <header class="header-two-bars">

        <div class="header-first-bar">
            <div class="header-limiter">
                <h1><a href="#">Jeannot<span>Boutique</span></a></h1>

                <div class="member-area-buttons">
                    <a href="form-register.html" class="signup-button">Sign Up</a>
                    <a href="form-login.html" class="login-user">Log In</a>
                </div>


                <div class="container-1">
                    <span class="icon"><i class="fa fa-search"></i></span>
                    <input type="search" id="search" placeholder="Search..." />
                </div>
            </div>

            <div class="clear"></div>
        </div>

        <div class="header-second-bar">
            <div class="header-limiter">
                <nav>
                    <a href="#"><i class="fa fa-male"></i> Accueil</a>
                    <a href="#" class="selected"><i class="fa fa-female"></i> Chaussures</a>
                    <a href="#"><i class="fa fa-folder-o"></i> Vêtements</a>
                    <a href="#"><i class="fa fa-pencil"></i> Accessoires</a>
                    <a href="#"><i class="fa fa-check"></i> Sur mesure</a>
                    <a href="#" style="color: pink;"><i class="fa fa-pencil"></i> Blog</a>
                    <a href="#" style="color: pink;"><i class="fa fa-check"></i> Promo</a>
                </nav>
                <div class="nav-social-media">
                    <a href="#" style="background-color:#3b5998;"><i class="fa fa-facebook"></i></a>
                    <a href="#" style="background-color:#55acee;"><i class="fa fa-twitter"></i></a>
                    <a href="#" style="background-color:#dd4b39;"><i class="fa fa-google-plus"></i></a>
                    <a href="#" style="background-color:#125688;"><i class="fa fa-instagram"></i></a>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </header>
</body>

Basically, I am have a folder where my css files are. When I load the file header.css from the css folder, it does not have any effect, but once is in the same location with the index.html, everything is perfect.

I have struggling to find the answer but no way. My file system structure is the following:

File System Structure

Please kindly help me find out what is wrong with my code.

PS: I have used the W3 Validator and everything is ok.

Improve this question
5
  • where is your index.html located. Is it in the same folder where css folder is present.. Commented Apr 16, 2016 at 8:34
  • What's your folder structure? Commented Apr 16, 2016 at 8:34
  • Please check your directories... where is your css file saved and where are you calling this css file from? Solution : open Inspect Element / Inspect in your browser then click on console to watch the error.. Have you written correct spelling of your file name in your html source file? Commented Apr 16, 2016 at 8:35
  • | -css ---header.css ---footer.css -images -index.html Commented Apr 16, 2016 at 8:47
  • I have tested with dummy styles and they work perfectly fine. Try clearing your browser history and refresh the page. Commented Apr 16, 2016 at 9:44

2 Answers 2

Reset to default
0

https://stackoverflow.com/a/9480801

Add

type="text/css"

to your link tag

While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.

and you may try this:

specify href="./style.css" which the . specifies the current directory

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Use

<link rel="stylesheet" href="/css/header-search.css" />
<link rel="stylesheet" href="/css/header.css" />

instead of

<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.