HTML Help! CSS Not working?

Code Help HTML/CSS/JS
1

My code isn’t working I have NO clue why!
I attached a .zip of the code

2

Hi, what’s wrong with your code? Does this have to do with JavaScript or HTML? Can you provide some more information?

3

I don’t know it is being very stubborn and I have been Googling stuff for awhile

4

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Avioso</title>
        <meta name="description" content="AI trading crypto FOR you!">
        <meta name="keywords" content="AI chatgpt crypto free bitcoin btc etherium eth tether $ money">
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div class="nav">
            <h1>Avioso</h1>
        </div>
    </body>
</html>

CSS

html,body
{
    width: 100%;
    height: 100%;
}

.nav
{
    top: 0%;
    left: 0%;
    right: 0%;
    width: 100%;
    bottom: auto;
    height: 5%;
    background-color: #36454F;
    position: absolute;
    font-family: 'Anton', sans-serif;
}

What do you mean by being stubborn? What are you trying to achieve anyway?

5

Run the code look at what it is doing. I am trying to make a company.

6

Yea, this looks a bit odd from my end. Can you please explain what you want to be fixed though?

image
image1366×768 2.78 KB

7

The text won’t go in the grey area!

8

Make sure you include this in the head of your HTML

<link href="style.css" rel="stylesheet" type="text/css" />

and this just before the end of the body tag

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

You will need a file named script.js and style.css

1 Like
9

I think this is because your height is set to 5%, but I don’t have time to test this right now. Try editing that value and see if it varies.

10

The text seems like it is in a fixed postition

11

invite me to your replit and ill take a look

12

Yea, text elements can be weird sometimes. I don’t really have any solutions for this except editing the padding, but I’d recommend doing some googling on that specifically.

13

I can fix it i just need to see the code

14

wanna invite me to your replit so I can get it to work

15

It’s not in replit :confused:

16

where is your website then?

17

He seems to be working on it locally. He linked a Google Drive file and I also pasted the code in if you want to take a look.

18

copy and paste all your code into replit HTML program it’ll be easier to figure it out there

19

Alright, What is your replit username?

20

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="nav">
    <h1>Avioso</h1>
  </div>
  <script src="script.js"></script>
</body>

</html>

CSS:

html {
  height: 100%;
  width: 100%;
}

html,body
{
    width: 100%;
    height: 100%;
}

.nav
{
    top: 0%;
    left: 0%;
    right: 0%;
    width: 100%;
    bottom: auto;
    background-color: #36454F;
    position: absolute;
    font-family: 'Anton', sans-serif;
}