Proyectos de diseño web responsivo - Construye una página tributo

lass1528 · November 11, 2022, 9:57pm

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.
a ver amigos, llego a tener dudas sobre mi navegador y quisiera buscar por este medio una solución, resulta que hay secciones que no he podido terminar dado que una o dos preguntas o partes no concuerdan con el test y por ese motivo no lo he finalizado y en vista que a algunos le sucedió igual, me pregunto si afecta en gran medida el curriculúm para las ofertas de empleo de linkedin

Tu código hasta el momento

<!-- file: index.html -->
<!DOCTYPE HTML>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title id="title">Maria Calcaño </title>
      <link rel="stylesheet" href="styles.css">
      <main id="main">
        <figure id="img-div"><img id="image"><img div="img caption">
        <h1 id="tribute-info">Maria Calcaño poeta zuliana<h1/>
      </main>
    </head>
<body>
  <figcaption id="img-caption">Biblioteca del Zulia
  <a img src="banner3.png" alt"Espacio de la biblioteca"  id="tribute-link" target="_blank" href="#"></a>
  <ol>
    <li>Sala general de estudio</li>
    <li>Sala digital</li>
    <li>Fonoteca</li>
  </ol> 
  </body>
  </html>

/* file: styles.css */
img {
  aling-justify: center;
  position: fixed;
}
#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 10px;
  background: #eef;
}
#image {
  max-width: 100%;
  height: auto;
  background-color: rgb(125, 125, 255);
}
#img-div {
  background: crimson;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
} 
#tribute-info {
  font-family: arial;
  font-size: 2em;
  telx-align: center;
} 
#tribute-link {
  text-justify: center;
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Desafío: Proyectos de diseño web responsivo - Construye una página tributo

Enlaza al desafío:

franciscomelov · November 11, 2022, 11:51pm

Respecto al error de que no se puede guardar el código, es probable que sea por la conexión de internet, ya que, aunque el código no pase las pruebas, este se debería de poder guardar.

El código no pasa las pruebas, porque tienes diferentes errores, por ejemplo, no cerraste algunos elementos o los cerraste de manera incorrecta (h1), colocaste elementos en el lugar incorrecto o en un lugar donde no puede ir.

lass1528 · November 12, 2022, 6:17pm

bueno lo he podido guardar, y he corregido los errores pero sigo teniendo preguntas anteriores que aunque están correctas no se marcan como respondidas, espero no afecte el resultado al final

lasjorg · November 12, 2022, 11:20pm

If you need help with your latest code, post the updated code.

As said, you had a lot of errors. Make sure you validate the HTML.

franciscomelov · November 13, 2022, 12:44am

Cuál es tu código corregido para ejecutarlo?

lass1528 · November 13, 2022, 11:58pm

bueno pude corregir h1 y cambiar la posición de main pero sigue siendo un problema de descendencia que debo corregir, lo que me inquieta es que también pasa con otras preguntas que están correctas y solo sigo avanzando al siguiente test para no quedarme atrás por estos errores (un ejemplo me sucedió con :hover donde al pasar el mouse por [CatPhotoApp] debía ponerse en color azul es el tercer cuestionario del mismo proyecto, el test Adjust the Hover State of an Anchor Tag

lasjorg · November 14, 2022, 12:02am

You should not assume your code is correct. If you are not passing a test, you likely have errors in your code.

If you need help correcting your code you have to post the code so we can see it.

lass1528 · November 14, 2022, 1:16am

(Ocurrió un error: Lo sentimos, los nuevos usuarios solo pueden colocar un elemento multimedia incrustado en una publicación.)[quote=“lasjorg, post:7, topic:570619, full:true”]

La verdad quisiera poder compartirlo actualizado pero no me lo permite en vista que soy nuevo usuario

lasjorg · November 14, 2022, 1:26am

Not sure what you mean. You can just copy and paste the code into your post.

Use the </> button in the text box toolbar to format the code.

lass1528 · November 14, 2022, 1:30am

type or paste code here
<!DOCTYPE HTML>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title id="title">Maria Calcaño </title>
      <link rel="stylesheet" href="styles.css">
 </head>
<body>
  <h1 id="tribute-info">Maria Calcaño poeta zuliana</h1>
  <main id="main">
        <figure id="img-div"><img id="image"><img div="img caption">
</main>
  <figcaption id="img-caption">Biblioteca del Zulia
  <a img src="banner3.png" alt"Espacio de la biblioteca"  id="tribute-link" target="_blank" href="#"></a>
  <ol>
    <li>Sala general de estudio</li>
    <li>Sala digital</li>
    <li>Fonoteca</li>
  </ol> 
  </body>
  </html

img {
  aling-justify: center;
  position: fixed;
}
#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 10px;
  background: #eef;
}
#image {
  max-width: 100%;
  height: auto;
  background-color: rgb(125, 125, 255);
}
#img-div {
  background: crimson;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
} 
#tribute-info {
  font-family: arial;
  font-size: 2em;
  telx-align: center;
} 
#tribute-link {
  text-justify: center;
}

lasjorg · November 14, 2022, 1:52am

This element <img div="img caption"> is not correct and can be delete.
The <figure> element is not closed correctly </figure>
The img element inside the <figure> element should have a src pointing to an image and an alt text.
The <figcaption> element should be inside the <figure> element and it should be closed correctly </figcaption>

Example (without the ids):

<figure>
  <img src="https://via.placeholder.com" alt="placeholder image">
  <figcaption>Caption text</figcaption>
</figure>

Aprobado:Tu #img-div, #image, #img-caption, #tribute-info, y #tribute-link deben ser descendientes de #main.

All the elements with the ids listed above should be inside the <main> element.

lass1528 · November 14, 2022, 7:33pm

Bien pudiera tratarse de esta forma, pero aun no coloco el elemento de la img centrada en el padre

<!DOCTYPE HTML>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title id="title">Maria Calcaño </title>
      <link rel="stylesheet" href="styles.css">
 </head>
<body>
  <main id="main">
  <h1 id="tribute-info">Maria Calcaño poeta zuliana</h1>
<figure id="img-div"><img id="image">
<figcaption id="img-caption">Biblioteca del Zulia
  <a href="" img src="" alt"Espacio de la biblioteca"   id="tribute-link" target="_blank"></a>
  </figure>
  </main>
  <ol>
    <li>Sala general de estudio</li>
    <li>Sala digital</li>
    <li>Fonoteca</li>
  </ol> 
  </body>
  </html>

lasjorg · November 14, 2022, 9:21pm

Well, that is a CSS issue. At least now you are passing the HTML tests. Although, you do still have some invalid attributes on the a element.

Add a real image to the src. You can use a public image, like an image from Wikipedia or Unsplash. Or at the very least use a placeholder image https://via.placeholder.com/400
You really do not want to set position: fixed on the image. It will take it out of normal document flow and it is not something you would normally want for an image. The other style property you have set on img is invalid as well. I would just completely remove the img selector and the styles. Use the #image selector instead.
To center the image you can add display: block and margin: auto to the #image selector.

system · May 16, 2023, 9:22am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.