No consigo poner el recuadro a la imagen

Tengo en el HTML

Haz click aquí para ver más imagenes de gatos


Un gatito recosatdo naranja

    </p>

    <hr>

    <h3>Lista de Gatos</h3>

    <div>

        <p>Cosas que les <em>gustan</em> a los gatos</p>

        <ul>

            <li>Menta gatuna</li>

            <li>Apuntadores Laser</li>

            <li><s>Lasaña</s></li>

            <img src="imagenes/lasana.png " alt="lasaña ">

    </ul>

    <p>Cosas que los gatos <strong>odian</strong>:</p>

    <ol>

        <li>Tratamientos antipulgas</li>

        <li>Truenos</li>

        <li>Otros Gatos</li>

    </ol>

    </div>

    <img src="imagenes/image.jpg " class="imagenes-de-gatos " alt="gato ">

En CSS

.imagenes-de-gatos {

width: 200px;

border-width: 10px;

border-color: blue;

border-style: none;

}

Y al guardar en las 2 partes en html o css y actualizar en el navegador para ver el resultado de la web , no veo ningún cambio alguno en la imagen o imágenes de los gatos…, Me gustaría saber en que parte me he confundido para poder repararlo y enterarme de lo que tengo que hacer en otra ocasión… Por último, ya lo puse en mi anterior post y resulta que una vez más me ha desaparecido saliendo todo descolocado los radio y verificaciónes… Me comentarion que sería de las separarciones de las comillas , pero al guardar se vuelven a colocar en su sitio y desaparece al actualizar.

Gracias

Creo que el problema es que tienes
border-style: none;
ententa cambiarlo para:
border-style: solid;

cierto, así es… ahora si sále… muchas gracias.
No me había dado cuenta de ese error…

Ya sólo me queda saber que es lo que me falta para que no salga descuadrado…

            <input id="interior "type="radio " value="interior "name="interior-exterior "checked>Interior

        </label>

        <br>

        <label for="exterior ">

            <input id="exterior "type="radio " value="exterior "name="interior-exterior ">Exterior

        </label>

        <br>

        <input type="text " placeholder="url de tu gato " required>

        <br>

        <!-- Casillas de verificación-->

        <label for="carinoso "><input id="carinoso " type="checkbox "

            value="carinoso "

            name="personalidad " checked>Cariñoso

        </label>

        <label for="Perezoso "><input id="Perezoso " type="checkbox "

            value="Perezoso "

            name="personalidad ">Perezoso

        </label>

        <label for="Energetico "><input id="Energetico " type="checkbox "

            value="Energetico "

            name="personalidad ">Energético

        </label>

        <br>

        <!-- Texto a enviar -->

        <button type="submit ">Enviar

        </label>

        </input>

En otro tema me comentaron que podría ser las separaciones de las comillas, pero el caso es que al modificar y volver a guardar se coloca otra vez en el mismo sitio y me sale descuadrado…

Gracias

Es dificil ayudar sin un link para el problema.
asi puedo poner tu codigo y ver los errores que recibes

<!--Elementos de la cabeza de la web (zona archivos externo como css o js, título)-->

<title>AppGatos</title>

<link href="style.css" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,500&family=Pacifico&display=swap" rel="stylesheet">
<h2 ">AppGatos</h2>

<!-- CSS-- h2 style="color: blue ">AppGatos</h2> -->

<main>

    <h3>Imágenes de Gatos:</h3>

    <!--Todo: Agregar enlace a imagenes-->

    <a>Haz click aquí para ver más <a href="# " target="_blank "  rel="noopener noreferrer ">imagenes de gatos</a></p>

    <a href="https://www.freecodecamp.org " target="_blank " rel="noopener noreferrer "><img src="https://bit.ly/fcc-relaxing-cat " class="imagenes-de-gatos " alt="Un gatito recosatdo naranja "></a>

    <!--Elementos del cuerpo de la web contenido de la web -->

    </p>

    <hr>

    <h3>Lista de Gatos</h3>

    <div>

        <p>Cosas que les <em>gustan</em> a los gatos</p>

        <ul>

            <li>Menta gatuna</li>

            <li>Apuntadores Laser</li>

            <li><s>Lasaña</s></li>

            <img src="imagenes/lasana.png " alt="lasaña ">

    </ul>

    <p>Cosas que los gatos <strong>odian</strong>:</p>

    <ol>

        <li>Tratamientos antipulgas</li>

        <li>Truenos</li>

        <li>Otros Gatos</li>

    </ol>

    </div>

    <img src="imagenes/image.jpg " class="imagenes-de-gatos " alt="gato ">

    <form action="/enviar-respuesta ">

        <!-- ("/enviar-respuesta ")Lugar donde se coloca el archivo del servidor en el que se enviará la respuesta-->

        <!--Texto: Botones de rádio -->

        <label for="interior ">

            <input id="interior "type="radio " value="interior "name="interior-exterior "checked>Interior

        </label>

        <br>

        <label for="exterior ">

            <input id="exterior "type="radio " value="exterior "name="interior-exterior ">Exterior

        </label>

        <br>

        <input type="text " placeholder="url de tu gato " required>

        <br>

        <!-- Casillas de verificación-->

        <label for="carinoso "><input id="carinoso " type="checkbox "

            value="carinoso "

            name="personalidad " checked>Cariñoso

        </label>

        <label for="Perezoso "><input id="Perezoso " type="checkbox "

            value="Perezoso "

            name="personalidad ">Perezoso

        </label>

        <label for="Energetico "><input id="Energetico " type="checkbox "

            value="Energetico "

            name="personalidad ">Energético

        </label>

        <br>

        <!-- Texto a enviar -->

        <button type="submit ">Enviar

        </label>

        </input>

    </form>

</main>

<footer>

    <p><small>Sin derechos de autor - Soy yo - <a href="https://www.freecodecamp.org/espanol/ "> freeCodeCamp.org</small></a></p>

</footer>

CSS

h2 {

font-size: 50px;

font-family: 'Cabin', sans-serif;

font-family: 'Pacifico', cursive;

}

h3 {

font-family: 'Cabin', sans-serif;

font-family: 'Pacifico', cursive;

}

.imagenes-de-gatos {

width: 200px;

border-width: 10px;

border-color: blue;

border-style: solid dotted;

}

cre que es el espacio que has dejado despues del type en tu html
por ejemplo:

         type="checkbox " // tu codigo actual
         type="checkbox" // lo que deberias poner

veras que cambia imediatamente cuando lo corriges

Perdona por el lamentable estado de mi castellano escrito!

Si con esto funciona no te olvides de primar Solucion

Exácto la segunda opción es la que debería poner pero al hacer control S, se vuelva a separar de “checkbox” a "checkbox "…

type="checkbox " // tu codigo actual
type=“checkbox” // lo que deberias poner.

En cuanto al idioma no es lamentable, para mi es más que suficiente para entender lo que me dice.

Es dificil saber el motivo por esso.
Para passar los testes de FCC basta primar CTL+ ENTER.
Supongo que estas a utilizar algo com CodePen o similar. ententa hacerlo en editor de codigo en tu computador asi no tendras que lidar con esse tipo de problema. Yo utilizo VScode y ayuda bastante.

Otra possibilidae cabia de " para ' puede ser que ayuda…

si es el que estoy utilizando yo VScode, voy a probar con la comilla simple

Si tienes una extension como prettier puede que hace cambios siepre que guardas

Acabo de cambiar todas las comillas dobles por simples y de momento parece que está solucionado. Muchas gracias

1 Like

si alguien aqui necesita ayuda traduciendo de Ingles a Español codigo o videos tuturiales, pongame aqui. lo hago de gratis! quiero hacer esto para ponerlo en my résumé