0

Hola a toda la comunidad este es mi primer post espero que me ayuden, les cuento estoy aprendiendo css y hoy me encontré con un error a la hora de escribir exactamente todo lo que esta en el libro no me centra la fecha dentro de una caja y cuando le doy inspeccionar elemento me sale que el contenedor es de 960px y tendría que ser de 80px, esto se puede solucionar poniendo un width de 80px pero lo mas loco es que si copio el codigo de mi pdf al visual studio code no necesito poner esos 80px entonces me gustaría saber que estoy haciendo mal he revisado el código varias veces y linea por linea y no veo ningun error

introducir la descripción de la imagen aquí

* {
  margin: 0px;
  padding: 0px;
}

#cabeceralogo {
  width: 96%;
  height: 150px;
  padding: 0% 2%;
  background-color: #0f76a0;
}

#cabeceralogo>div {
  width: 960px;
  margin: 0px auto;
  padding-top: 45px;
}

#cabeceralogo h1 {
  font: bold 54px arial, sans-serif;
  color: #ffffff;
}

#menuprincipal {
  width: 96%;
  height: 50px;
  padding: 0% 2%;
  background-color: #9fc8d9;
  border-top: 1px solid #094660;
  border-bottom: 1px solid #094660;
}

#menuprincipal div {
  width: 960px;
  margin: 0px auto;
}

#menuprincipal li {
  display: inline-block;
  height: 35px;
  padding: 15px 10px 0px 10px;
  margin-right: 5px;
}

#menuprincipal li:hover {
  background-color: #6facc6;
}

#menuprincipal a {
  font: bold 18px arial, sans-serif;
  color: #333333;
  text-decoration: none;
}

main {
  width: 96%;
  padding: 2%;
  background-image: url("fondo.jpg");
}

main div {
  width: 960px;
  margin: 0px auto;
}

#articulosprincipales {
  float: left;
  width: 620px;
  padding-top: 30px;
  background-color: #ffffff;
  border-radius: 10px;
}

#infoadicional {
  float: right;
  width: 280px;
  padding: 20px;
  background-color: #e7f1f5;
  border-radius: 10px;
}

#infoadicional h1 {
  font: bold 18px arial, sans-serif;
  color: #333333;
  margin-bottom: 15px;
}

.recuperar {
  clear: both;
}

article {
  position: relative;
  padding: 0px 40px 20px 40px;
}

article time {
  display: block;
  position: absolute;
  top: -5px;
  left: -70px;
  width: 80px;
  padding: 15px 5px;
  background-color: #094660;
  box-shadow: 3px 3px 5px rgba(100, 100, 100, 0.7);
  border-radius: 5px;
}

.numerodia {
  font: bold 36px verdana, sans-serif;
  color: #ffffff;
  text-align: center;
}

.nombredia {
  font: 12px Verdana, sans-serif;
  color: #ffffff;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="practicas.css" />
  <title>Document</title>
</head>

<body>
  <header id="cabeceralogo">
    <div>
      <h1>Este es el título</h1>
    </div>
  </header>
  <nav id="menuprincipal">
    <div>
      <ul>
        <li><a href="index.html">Principal</a></li>
        <li><a href="fotos.html">Fotos</a></li>
        <li><a href="videos.html">Videos</a></li>
        <li><a href="contacto.html">Contacto</a></li>
      </ul>
    </div>
  </nav>
  <main>
    <div>
      <section id="articulosprincipales">
        <article>
          <h1>Título Primer Artículo</h1>
          <time datetime="2016-12-23" pubdate>
              <div class="numerodia">23</div>
              <div class="nombredia">Viernes</div>
            </time>
          <p>Este es el texto de mi primer artículo</p>
          <figure>
            <img src="miimagen.jpg" />
          </figure>
        </article>
        <article>
          <h1>Título Segundo Artículo</h1>
          <time datetime="2016-12-7" pubdate=>
              <div class="numerodia">7</div>
              <div class="nombredia">Miércoles</div>
            </time>
          <p>Este es el texto de mi segundo artículo</p>
          <figure>
            <img src="miimagen.jpg" />
          </figure>
        </article>
      </section>
      <aside id="infoadicional">
        <h1>Información Personal</h1>
        <p>Cita del artículo uno</p>
        <p>Cita del artículo dos</p>
      </aside>
      <div class="recuperar"></div>
    </div>
  </main>
  <footer id="pielogo">
    <div>
      <section class="seccionpie">
        <h1>Sitio Web</h1>
        <p><a href="index.html">Principal</a></p>
        <p><a href="fotos.html">Fotos</a></p>
        <p><a href="videos.html">Videos</a></p>
      </section>
      <section class="seccionpie">
        <h1>Ayuda</h1>
        <p><a href="contacto.html">Contacto</a></p>
      </section>
      <section class="seccionpie">
        <address>Toronto, Canada</address>
        <small>&copy; Derechos Reservados 2016</small>
      </section>
      <div class="recuperar"></div>
    </div>
  </footer>
</body>

</html>

3 respuestas 3

0

Hola como estas Heriberto. Por lo que se puede apreciar los 960px de esos divs son porque se ajustan a su elemento padre, en este caso la etiqueta "main" que tiene 1000px menos 20px de padding de cada lado por eso te da 1000 -20 -20 = 960. Lo ideal para corregirlo es que uses medidas relativas (% o rem o em )para dimensionar tus elementos. El codigo funciona perfecto si agregar un width de 100% como en el ejemplo.

  .numerodia {
   font: bold 36px verdana, sans-serif;
   color: #ffffff;
   text-align: center;
   width: 100%;
}

 .nombredia {
 font: 12px Verdana, sans-serif;
 color: #ffffff;
 text-align: center;
 width: 100%;
}
0

En tu css veo que tienes:

main div {
  width: 960px;
  margin: 0px auto;
}

Que corresponde al div que engloba el contenedor principal, el problema viene en: main div que se encarga de seleccionar todos los divs que están dentro de main, entre ellos los implicados en tu pregunta. Eso puedes solucionarlo de dos formas:

Solución 1: Reescribir la propiedad width para el resto de divs.

.numerodia, .nombredia {
  width: 100%; /* o width: auto; */
}

Solución 2: Colocar una clase al div bajo main, pro ejemplo a widthContainer y cambias:

<main>
  <div>...
  </div>
<main>

<!-- por... -->

<main>
  <div class="widthContainer">...
   </div>
<main>

Y tu css...

.widthContainer { /* en lugar de main div */
  width: 960px;
  margin: 0px auto;
}

Lógicamente debes verificar si en tus media queries estos contenedores sufren modificaciones, para corregir dichas clases en los mismos.

0

Hola y gracias a los 2 por responder los 2 están en lo cierto, ya solucione el problema. vi que a en mi código estaba main div de esta forma

  main div {
  width: 960px;
  margin: 0px auto;
}

Cuando debería de estar así

main > div {
  width: 960px;
  margin: 0px auto;
}

> este símbolo hace referencia a que es un hijo de la clase main esto lo que hace es que solo afecte al div siguiente después de main y no a todos los div que están dentro de la clase main, que eso era lo que estaba pasando

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.