navbar doesn t wanna work

23 Replies

timoOP•12mo ago

timoOP•12mo 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•12mo 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•12mo 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•12mo ago

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

timoOP•12mo ago

Jochem•12mo 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•12mo ago

Jochem•12mo ago

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

timoOP•12mo ago

Jochem•12mo ago

not sure what you mean by "better"

timoOP•12mo ago

want it to be more like this

timoOP•12mo ago

this mobile

timoOP•12mo ago

and this for pc

Jochem•12mo 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•12mo ago

i see looks awful tho😅

timoOP•12mo ago

mobile

Jochem•12mo 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•12mo ago

how does that work😞

Jochem•12mo 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•12mo ago

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

Jochem•12mo ago

Glad to help

Gaming

Programming

navbar doesn t wanna work