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

Won't load CSS structure when the link is correct, what am I doing wrong? – Html

CSS doesn’t load into HTML file. Attempted to load the allmight image and it didn’t work, flexbox is also not loading. Should I make it as an inline CSS, I would like to keep it seperate. Any some suggestions? Could I improve on the code?

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="/CSS/Flexbox.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
</head>
<body>
    <div id="körper">
        <div id="anzeige">
            <div id="logosuche">
                <div id="logo">
                    <div id="symbol"></div>
                    <div id="name"></div>
                </div>
                <div id="suche">
                    <div id="g_logo"></div>
                    <div id="eingabefeld">
                        <input id="eingabe" type="text" value="Search with Google or enter address">
                    </div>
                </div>
            </div>
            <div id="icons">
                <div class="hover" id="umbruch1"><div class="icon"><img src="/Website_Images/allmight.png.png" alt="1" width="40px"><span>All Might</span></div></div>
                <div class="hover" id="umbruch2"><div class="icon"><img src="fortnite.png" alt="2" width="40px"><span>Donnerstag</span></div></div>
                <div class="hover" id="umbruch3"><div class="icon"><img src="fortnite.png" alt="3" width="40px"><span>Access</span></div></div>
                <div class="hover" id="umbruch4"><div class="icon"><img src="fortnite.png" alt="4" width="40px"><span>schmarn</span></div></div>
                <div class="hover" id="umbruch5"><div class="icon"><img src="fortnite.png" alt="5" width="40px"><span>i bin a bayer</span></div></div>
                <div class="hover" id="umbruch6"><div class="icon"><img src="fortnite.png" alt="6" width="40px"><span>pornos</span></div></div>
                <div class="hover" id="verschwinden1"><div class="icon"><img src="fortnite.png" alt="7" width="40px"><span>8 Euro</span></div></div>
                <div class="hover" id="verschwinden2"><div class="icon"><img src="fortnite.png" alt="8" width="40px"><span>spam</span></div></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS file for reference, name of file is simply "Flexbox"

body {
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    --background-color: rgb(229, 219, 246);
    --background-color-secondary: rgba(255, 255, 255, 1);
    --text-primary-color: rgba(0, 0, 0, 1);
}

#körper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--background-color);
}

#anzeige {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#logosuche {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#symbol {
    height: 82px;
    width: 82px;
    background: url('logo.png') no-repeat center;
    background-size: 82px;
}

#name {
    height: 82px;
    width: 134px;
    background: url('name.svg') no-repeat center center;
    background-size: 134px;
    margin: 20px;
}

#suche {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 50px;
    width: 725px;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

#g_logo {
    height: 30px;
    width: 30px;
    background: url('g_logo.svg') no-repeat center center;
    background-size: 20px;
    margin-right: 15px;
}

#eingabefeld {
    height: 25px;
    width: 650px;
}

#eingabe {
    width: 100%;
    height: 100%;
    border: none;
    font-family: Arial;
    font-size: 16px;
    font-weight: lighter;
    color: grey;
}

#icons {
    display: flex;
    width: 1000px;
    max-width: calc(100% - 25px);
    flex-wrap: wrap;
    justify-content: center;
}

.hover {
    display: flex;
    margin-top: 70px;
    height: 140px;
    width: 120px;
    border-radius: 10px;
}

.hover:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.icon {
    height: 80px;
    width: 80px;
    margin: 20px; 
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

span {
    display: block;
    text-align: center;
    font-size: 12px;
    font-family: Arial;
}

img {
    margin: 20px;
}

input {
    outline: none;
}


@media screen and (max-width: 800px) {
    
    #suche {
        width: 625px;
    }

    #g_logo {
        margin-left: 10px;
    }

    #eingabefeld {
        width: 550px;
    }

}

@media screen and (max-width: 650px) {
    
    #suche {
        width: 525px;
    }

    #g_logo {
        margin-left: 20px;
    }

    #eingabefeld {
        width: 450px;
    }

}

@media screen and (max-width: 550px) {
    
    #suche {
        width: 325px;
    }

    #g_logo {
        margin-left: 10px;
    }

    #eingabefeld {
        width: 250px;
    }

}

Expected CSS file to cooperate and load structre with images and flexbox

Tags:

3

Answers


  1. 0

    Try removing the first slash in the link

    <link rel="stylesheet" href="CSS/Flexbox.css">
    Login or Signup to reply.
  2. 0

    Your HTML file assumes the following directory structure:

    index.html
CSS
 _ Flexbox.css
Website_Images
 _ allmight.png.png

    with your HTML file the CSS folder and the Website_Images all inside the webroot of your webserver. If youre not using a server and open the html file directly, it will use the file system root (/ on linux, probably C:/ on windows)

    Also make sure the file extensions are all correct, as Nico pointed out make sure the file is named "Flexbox.css" not "Flexbox" without file extension, also
    "allmight.png.png" seems suspicious

    Login or Signup to reply.
  3. 0

    Check the file well before linking it to HTML.

    If The "css" file is located in the same folder as the current page
    Use this-: flexbox.css

    If The "css" file is located in the images folder in the current folder.
    Use this:-
    Css/flexbox.css

    If The "css" file is located in the images folder at the root of the current web.

    Use this:- /css/flexbox.css

    If The "css" file is located in the folder one level up from the current folder.
    Use this:- ..flexbox.css
    I hope this might be able to help you out both on css files, js file and image. Thank you

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

Back To Top
Search