navbar doesn t wanna work

23 Replies

timoOP•11mo ago

timoOP•11mo ago

and this is my css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Napoleon</title>
    <link rel="cssconnectie" href="website.css" type="text/css">
    <link rel="jsconnectie" href="website.js" type="js">
    <link rel="lettertype" href="https://fonts.googleapis.com">
    <link rel="lettertype" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap" rel="lettertype">
</head>
<body>
    <nav class="navbar"><ul>
        <li><a href="introductie.html">introductie</a></li>
        <li><a href="opdrachten.html">opdrachten</a></li>
        <li><a href="info_Napoleon.html">info_napoleon</a></li>
    </ul></nav>
    <article aria-label=""><h1>Timo's portfolio</h1>
    <img id="afbeelding1" src="napoleon.png" alt="napoleon_afbeelding"></article>
    <footer aria-label=""></footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Napoleon</title>
    <link rel="cssconnectie" href="website.css" type="text/css">
    <link rel="jsconnectie" href="website.js" type="js">
    <link rel="lettertype" href="https://fonts.googleapis.com">
    <link rel="lettertype" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap" rel="lettertype">
</head>
<body>
    <nav class="navbar"><ul>
        <li><a href="introductie.html">introductie</a></li>
        <li><a href="opdrachten.html">opdrachten</a></li>
        <li><a href="info_Napoleon.html">info_napoleon</a></li>
    </ul></nav>
    <article aria-label=""><h1>Timo's portfolio</h1>
    <img id="afbeelding1" src="napoleon.png" alt="napoleon_afbeelding"></article>
    <footer aria-label=""></footer>
</body>
</html>

Jochem•11mo ago

rel isn't a freely filled out field, you can't just put dutch words in there and expect it to work https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel these are the valid values css needs to be imported using rel="stylesheet", javascript can't be imported using <link> tags

timoOP•11mo ago

oh ok tought rel was just something to give a comment in how can i change all in one in vsc used to pycharm

Jochem•11mo ago

nope, you have to use the proper thing, otherwise the browser doesn't know what to do with your files

timoOP•11mo ago

Jochem•11mo ago

<script src="website.js"></script>, and the first two google fonts ones should be rel="preconnect" the one with the href first is fine the way it is though

timoOP•11mo ago

Jochem•11mo ago

script tag should be like this: <script src="website.js"></script>

timoOP•11mo ago

Jochem•11mo ago

not sure what you mean by "better"

timoOP•11mo ago

want it to be more like this

timoOP•11mo ago

this mobile

timoOP•11mo ago

and this for pc

Jochem•11mo ago

you probably want to set it as the background image on the body tag using css then

body {
  background-image: url(napoleon.png);
}

body {
  background-image: url(napoleon.png);
}

and remove the img tag altogether

timoOP•11mo ago

i see looks awful tho😅

timoOP•11mo ago

mobile

Jochem•11mo ago

you'll have to position it using media queries, there's no other way for the browser to know that Napoleon is the focus of the image

timoOP•11mo ago

how does that work😞

Jochem•11mo ago

That's a very broad question, you may want to just do some research on positioning background images for various screen sizes yourself.

timoOP•11mo ago

yeah watching some yt rn seems annoying😅 thx for your time and help tho

Jochem•11mo ago

Glad to help

Gaming

Programming

navbar doesn t wanna work