He estado trabajando con Html durante un poco estas últimas 2 semanas y acabo de comenzar css hoy. Entiendo algunos de los conceptos básicos de css (algunos de los elementos y cómo hacer que el código se vea más ordenado), pero hay algunas cosas que no entiendo y que hasta ahora no he podido encontrar. Como hacer una imagen más pequeña, por ejemplo. ¿Alguien puede explicarme por qué este código CSS no funciona?

h1{
  Color: #8a1319
}
.name {
  color: #ba454b;
}
/*help with this part please? Cant figure out how to properly make it smaller*/
.joke{
  border: 2px solid red;
  max-height: 250px;
  width: 50%;
}
body {
  text-align:center;
  background: powderblue
}
<div class="name">
  <h1>Dylan Carlson</h1>
</div>
<section>
  <h1 class="title">
    website
  </h1>
  <p>
    <div class=joke>
    <img src=http://www.jeremychin.com/repository/tickled/0355.jpg class=image />
    <div>
      <br>
      <br> Age: 17
      <br>
      <br> Grade:12
      <br>
      <br> Intrest: programming
      <br>
      <br> extra curricular: N/A
      <br>
      <img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSJjXu1Ulhi3ExUJYOsgRxEcXywik5FG2B-ouj4E3RqgDIARssdQ>
    </div>
  </p>
  <p>
    Favorite Icecream: IDFK
    <br>
    <br> 
    Favorite color: Gold/Black
  </p>
</section>
0
GG4ming 3 oct. 2019 a las 20:50

3 respuestas

La mejor respuesta

Elimine el DIV alrededor de la imagen y agregue una broma a la clase:

<img src="http://www.jeremychin.com/repository/tickled/0355.jpg" class="joke">

Como tenía joke como clase de DIV, se aplicaba a DIV y NO a IMG. Por lo tanto, la altura máxima del DIV era de 250 px y, dado que la imagen era más grande, se superponía.

Un pequeño consejo: mantenga CSS en el nivel más bajo que pueda (el IMG en este caso y no el DIV).

3
inputforcolor 3 oct. 2019 a las 20:30

Css no es para crear cosas en el navegador, es para diseñar elementos. Ii se usa para hacer que las cosas se vean como se desea. El código según su pregunta hará que un div (si está diseñado) tenga un borde con 2px de tamaño con color rojo y el div tendría un ancho del 50 por ciento según el espacio de disponibilidad y una altura máxima de 250px

0
Hitech Hitesh 3 oct. 2019 a las 17:59

Estás editando el div padre de la imagen, por eso no funciona. Use la clase de la imagen en su lugar.

.image{
  border: 2px solid red;
  max-height: 250px;
  width: 50%;
}
0
Natixco 3 oct. 2019 a las 17:57