0

Hola estoy aprendiendo a hacer mi primera pagina y mi codigo de CSS es este:

html{font-size:10px;font-family:'Open Sans',sans-serif;}
    page-container{
        position: relative;
        min-height: 100vh;
         h1{font-size:40px;text-align:center;
    p{font-size:20px;text-align:center;}
    li{display: inline; text-align: center;font-size: 20px}
    nav,header{text-align: center}
    }
    content-wrap{
        padding-bottom: 2.5rem;
    }
    footer{
        position: absolute;
        text-align: center;
        bottom: 0;
        width: 100%;
        height: 3.5rem;
        right: 8px;
    }

Segun yo lo escribi como salia en el tutorial de mozilla, pero a la hora de ver la pagina las lista de nav no queda en formato horizontal queda como lista normal, otra cosa que tiene es que el footer no está siendo alineado al medio. Lo que si, cuando lo abro en local me sale el formato bien pero el index corrido, como con margenes no puesto y básicamente todos los html que tengo en el servidor parten de la misma base asi que no deberia pasar eso, incluso todos usan el mismo style lo cual no sé si es correcto. Este es el codigo de la pagina como tal y en todos es practicamente el mismo cambiando los href de acuerdo a la pagina en la que estoy.

<!DOCTYPE html>
<html lang="es">
 <head>
      <meta http-equiv="cache-control" content="no-cache">
      <meta name="author" content="Author">
      <meta name="description" content="Aqui encontrarás la información de contacto.">
    <meta charset="utf-8">
      <link href="styles/style.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
      <title>Inicio</title>
      <link rel="shortcut icon" href="favicon.ico?v=2" type="image/x-icon"/>
<link rel="icon" href="favicon.ico?v=2" type="image/x-icon"/>
  </head>
<body>
    <div id="page-container">
        <div id="content-wrap">
            <header id="header"><h1>Contacto</h1>    
        </header>
        <nav id="nav"> 
        <ul>
    <li><a href="index.html">Incio</a></li>
    <li>Contacto</li>
    <li><a href="proyectos.html">Proyectos</a></li>
    <li><a href="descargas.html">Descargas</a></li>
    </ul>
    <hr>
</nav>
<p><a href="mailto:[email protected]">Enviame un correo</a></p>
    </div>
    <footer id="footer">©Copyright 2020.</footer>
    </div>
  </body>
</html>

1 respuesta 1

0

Al parecer no se han cerrado correctamente algunas definiciones de CSS, por lo que invalida el resto de las reglas. Siempre trata de usar un formato tabulado como el siguiente, cuidando de abrir y cerrar la definicion con { }

selector {
  regla1: valor1;
  regla2: valor2;
}

https://developer.mozilla.org/es/docs/Web/CSS/Syntax#Declaraciones_de_CSS

Ademas para el selector page-container, ya que es un id, debe escribirse #page-container.

html{
  font-size:10px;font-family:'Open Sans',sans-serif;
}
#page-container{
    position: relative;
    min-height: 100vh;
}
h1{
  font-size:40px;text-align:center;
}
p{
   font-size:20px;text-align:center;
}
li{
  display: inline; text-align: center;font-size: 20px;
}
nav,header{
  text-align: center
}
    
#content-wrap{
  padding-bottom: 2.5rem;
}
footer{
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 3.5rem;
  right: 8px;
}
<!DOCTYPE html>
<html lang="es">
 <head>
      <meta http-equiv="cache-control" content="no-cache">
      <meta name="author" content="Author">
      <meta name="description" content="Aqui encontrarás la información de contacto.">
    <meta charset="utf-8">
      <link href="styles/style.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
      <title>Inicio</title>
      <link rel="shortcut icon" href="favicon.ico?v=2" type="image/x-icon"/>
<link rel="icon" href="favicon.ico?v=2" type="image/x-icon"/>
  </head>
<body>
    <div id="page-container">
        <div id="content-wrap">
            <header id="header"><h1>Contacto</h1>    
        </header>
        <nav id="nav"> 
        <ul>
    <li><a href="index.html">Incio</a></li>
    <li>Contacto</li>
    <li><a href="proyectos.html">Proyectos</a></li>
    <li><a href="descargas.html">Descargas</a></li>
    </ul>
    <hr>
</nav>
<p><a href="mailto:[email protected]">Enviame un correo</a></p>
    </div>
    <footer id="footer">©Copyright 2020.</footer>
    </div>
  </body>
</html>

2
  • 1
    En ese caso el content-wrap igual deberia ir con #?
    – FuStrike
    Commented el 24 sept. 2020 a las 1:38
  • Asi es, corregi el codigo
    – F.Igor
    Commented el 24 sept. 2020 a las 1:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.