HTML - problema con <!DOCTYPE HTML>

problema con <!DOCTYPE HTML>

Publicado por Eduardo (4 intervenciones) el 22/08/2020 17:28:52

Saludos expertos.

Luego de validar mi proyecto en la página validator.w3.org me indicó que al inicio de mis páginas le faltaba el tag <! DOCTYPE HTML>.

Se lo coloqué a las páginas que faltaban y luego al recargar el proyecto me di con la sorpresa que el ALTO de las páginas se habia modificado haciendo que el contenido de la página ocupe solo la parte superior del navegador, dejando en blanco más del 70% del disponible.

Sin el <!DOCTYPE HTML>:

login-doctype-sin

Con el <!DOCTYPE HTML>:

login-doctype

¿ Alguien me podria indicar porque ocurre esto y como solucionarlo sin quitar el tag ?

Gracias anticipadas.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

-1

Responder

Pos: 3

Val: 886

problema con <!DOCTYPE HTML>

Publicado por Lopez (271 intervenciones) el 23/08/2020 01:33:36

Hola Eduardo,

Si la estructura/codigo inicial de tu HTML (Hasta la apertura del body al menos) no sabría decirte,
si es un tema de declaraciones, CSS u otro.

Quedamos atentos,
Saludos.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 1

Val: 1.453

problema con <!DOCTYPE HTML>

Publicado por joel (460 intervenciones) el 23/08/2020 10:42:27

Como dice Lopez, faltaría ver el código...

Ten en cuenta, que dependiendo de la cabecera que tuvieras, estas utilizando una u otra versión de HTML...

Valora esta respuesta

Comentar

Pos: 100

Val: 13

problema con <!DOCTYPE HTML>

Publicado por Eduardo (4 intervenciones) el 24/08/2020 21:25:37

Saludos amigos,

Primero agradecer su tiempo y atención. Esta es la página con el problema del tag:

<html lang="es">

   <head>

      <title>Login</title>

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

      <meta name="viewport" content="width=device-width, initial-scale=1">

   </head>

   <body>

      <div class="login_layout">

         <div class="secc1">

         </div>

         <div class="secc2">

         </div>

         <div class="secc3">

         </div>

         <div class="secc4">

         </div>

         <div class="secc5">

            <div class="login_form">

               <form action= "login_validar.php" method="GET">

                  <div class="row-logo">

                     <img src="imagen/logo.png" alt="Inversiones Farmacom S.A.">

                  </div>

                  <div class="row-titu">

                     ACCESO A LA WEB DE PEDIDOS

                  </div>

                  <div class="row-2-fields">

                     <div class="field-label">

                        <label for="usercod">Usuario:</label>

                     </div>

                     <div class="field-input">

                        <input type="text" id="usercod" name="get_clicod" maxlength="4" required>

                     </div>

                  </div>

                  <div class="row-2-fields">

                     <div class="field-label">

                        <label for="userpas">Clave:</label>

                     </div>

                     <div class="field-input">

                        <input type="password" id="userpas" name="get_clipas" required>

                     </div>

                  </div>

                  <div class="row-cent">

                     <input type="submit" value="ACCEDER">

                  </div>

               </form>

            </div>

         </div>

         <div class="secc6">

         </div>

         <div class="secc7">

         </div>

         <div class="secc8">

         </div>

         <div class="secc9">

         </div>

      </div>

   </body>

</html>

Estaré a la espera de sus observaciones,

Cordiales saludos.

Valora esta respuesta

Comentar

Pos: 117

Val: 12

problema con <!DOCTYPE HTML>

Publicado por Donnovan (3 intervenciones) el 24/08/2020 21:38:55

<!DOCTYPE html>

<html lang="es">

  <head>

    <title>Título de la WEB</title>

    <meta charset="UTF-8">

    <meta name="title" content="Título de la WEB">

    <meta name="description" content="Descripción de la WEB">

    <link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>

  </head>

  <body>

    <header>

      <h1>Título de la WEB</h1>

    </header>

    <nav>

      <a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>

      <a href="http://dominio.com/seccion2.html">IR SECCIÓN 3</a>

    </nav>

    <section>

      <article>

        <h2>CONTENIDO PRINCIPAL</h2>

        <p>Este es el contenido principal de mi web</p>

        <div>

          <p>Aquí tenéis una imagen.</p>

          <img src="http://dominio.com/imagen.jpg" alt="paisaje">

        </div>

      </article>

    </section>

    <aside>

      <h3>Banner de publicidad</h3>

      <a href="http://dominio-externo.com">

        <img src="http://dominio.com/banner-publicidad.png" alt="banner de publicidad">

      </a>

      <h3>Testimonios</h3>

      <p>Me gusta mucho esta página.</p>

    </aside>

    <footer>

      <h4>Avisos legales</h4>

      <a href="http://dominio.com/aviso-legal">Política de cookies</a>

      <h4>Redes sociales</h4>

      <a href="http://facebook.com/mi-pagina-de-facebook">Mi Facebook</a>

    </footer>

  </body>

</html>

Valora esta respuesta

Comentar

Pos: 3

Val: 886

problema con <!DOCTYPE HTML>

Publicado por Lopez (271 intervenciones) el 25/08/2020 07:28:02

Hola Eduardo,

En tus lineas 5 y 6 debes invertir el orden, quedando así:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

La respuesta a esto esta basado en que el meta viewport detecta las dimensiones de la pantalla primero,
por ello debe cargarse antes, así las hojas de estilo actúan sobre el HTML ya renderizado.

Saludos cordiales ;)

Valora esta respuesta

Comentar

Ocultar un código en versión movil

banner de cookies