Image formatting in CSS figure.class

Asked

Viewed 457 times

-2

(Solved) Looks like the file . css was corrupted, I created a new one and rewrote the same code on it, after which the code started working normally.

I have a problem to put the attributes in an image in CSS, I save the file and do not modify anything in my image, and the other attributes (body and p) are working normally. NOTE: The image is appearing, however the attribute (edge) does not work.

Follow CSS and HTML code respectively.

@charset "UTF-8";
body {
  background-color: gray;
  color: rgba(0, 0, 0, 0.7);
}

p {
  text-align: justify;
  text-indent: 50px;
}


/*formatação imagens*/

figure.foto-legenda {
  border: 8px solid red;
}
<figure class="foto-legenda">
  <img src="glass-quadro-homem-mulher.jpg">
  <figcaption>
    <h3>Google Glass</h3>
    <p>Uma nova maneira de ver o mundo></p>
  </figcaption>
</figure>

css html5

  • Is your image appearing on the screen at least, or does not even the image appear? You want the red border to be only in the image is this?

  • I’m not sure I understood your question right... Try adding the image attributes, in css, under .photo-caption > img {. It would look something like .photo-caption > img { width:100%; }

  • hugocsl, the image is appearing, but the border is not. Erika, I didn’t understand it right... I put this code and did not change anything...: figure.photo-caption { width:100%; border:8px Solid red; }

  • Considering the Edit on the question, it is almost certain that you are going through a problem of cache browser! Whenever you change a file invoked by the page, use Shift + F5 (Chrome) or disable the cache while Devtool (Ctrl + Shift + i)(Chrome) is open (Ctrl + Shift + i > F1 > Preferences > Disable cache)(Chrome). I hope I’ve helped! ;)

  • Thanks for the tip Lipespry

1 answer

0


Question of hierarchy: a .photo-caption is above img

@charset "UTF-8";
body {
  background-color: gray;
  color: rgba(0, 0, 0, 0.7);
}
p {
  text-align: justify;
  text-indent: 50px;
}
/*formatação imagens*/
.foto-legenda > img {
  border: 8px solid red;
}
<figure class="foto-legenda">
  <img src="glass-quadro-homem-mulher.jpg">
  <figcaption>
    <h3>Google Glass</h3>
    <p>Uma nova maneira de ver o mundo></p>
  </figcaption>
</figure>

This code is what you’re looking for?

  • Yes, this code, but the border still does not appear around the image, can it be a matter of image size or border? I would like to send the whole code but I still don’t understand how to format right in the comments.

  • @Texspray Could you send some link, or image, how would you like the result? Any site, or page, that has exactly what you’re looking for to show...

  • here is the link to the video by which I was studying link HTML code appears at 6:38, CSS at 7:20. .

  • I don’t know what’s going on with your tests... by following the instructions on the video, you actually get the result. To demonstrate, I took your code - originally posted upstairs - and added exactly what the little guy in the video said. And the result was exactly shown by him. Follow this example in codepen and in the jsFiddle. Speak if you don’t agree.

  • Erika, thank you so much for your time. I ended up solving the problem, from what looks like the file . css was corrupted, started working again after I created a new one and rewrote the code on it.

  • Great to know that everything went well! Keep learning and good luck!

Show 1 more comment

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.