Chrome shows absolutely nothing [duplicated]

Question

Chrome shows absolutely nothing [duplicated]

Navigation

#1 by (3 votes)
#2 by (3 votes)

1

I have a problem, I started 0 page and I wrote the html code with the css but when I open it in the chrome I do not see anything. Only white I leave below the html and the css:

<!DOCTYPE html>
<html>

<head>
        <meta http-equiv="Content-Type" content="text/html" />
        <meta charset="utf-8">
        <link reel="stylesheet" href="estilo.css" type="text/css"/>
        <title> NIAGARA </title>
</head>
<body>
        <header id="cabecera">
        </header>

        <section id="contenido">
        </section>

        <footer id="pie">
        </footer>
</body> 
</html>

style.css

body {
    background-color: white;
    margin: 0px;
}

#cabecera {
    background-color: blue;
    width: 960px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#contenido {
    background-color: red;
    width: 960px; 
    height: 500px;
    margin-right: auto;
    margin-left: auto;
}

#pie {
    background-color: green;
    width: 960px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
}

Maybe I wrote something wrong, I'm studying, but I never had any errors and I do not see any in the syntax. I understand that it may be something else that makes my page look blank but I do not know what. I also tried to open it from the localhost with xampp although I have not added php yet but the same thing appears to me. AIUDA.

html css chrome

asked by Ditar_ 22.11.2017 в 16:07

source

2 answers

3

You have a very serious error on your <link> tag, the reel attribute does not exist, it should be rel with only one e .

body {
    background-color: white;
    margin: 0px;
}

#cabecera {
    background-color: blue;
    width: 960px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}

#contenido {
    background-color: red;
    width: 960px; 
    height: 500px;
    margin-right: auto;
    margin-left: auto;
}

#pie {
    background-color: green;
    width: 960px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
}

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html" />
   <meta charset="utf-8">
   <link rel="stylesheet" href="estilo.css" type="text/css"/>
   <title> NIAGARA </title>
</head>
<body>
        <header id="cabecera">
        </header>

        <section id="contenido">
        </section>

        <footer id="pie">
        </footer>
</body> 
</html>

answered by 22.11.2017 в 16:10

Save JSON values obtained from Google Directions Allow only input of an input type="number"

score 3 · Accepted Answer

Surely it is because the route to the css is not the correct one. Your css is called estilo.css and is in the same folder as your html code?

Additionally, you have the rel attribute badly written on the tag. It should be rel and not reel .

Try your code in CodePen and it works fine: link

For what I'm sure it's a mistake how you linked your css.