The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image gallery, Image gallery
macugab
post Apr 27 2021, 07:35 PM
Post #1





Group: Members
Posts: 4
Joined: 27-April 21
Member No.: 27,914



Hi, i have an image gallery on my HTML and CSS. It doesn't work as it is supposed to.

Thanks!


Attached File(s)
Attached File  index.html ( 1.45k ) Number of downloads: 120
Attached File  gallerie.css ( 741bytes ) Number of downloads: 125
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 27 2021, 07:47 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,780
Joined: 9-August 06
Member No.: 6



OK. And in what way doesn't it work as you want?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
macugab
post Apr 28 2021, 07:40 AM
Post #3





Group: Members
Posts: 4
Joined: 27-April 21
Member No.: 27,914



The bigger images must pop up when you click on the smaller ones.

In the CSS, the <span> sections must be hidden, with the property "visibility-hidden"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 28 2021, 09:16 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,780
Joined: 9-August 06
Member No.: 6



You've got the selectors wrong. You don't need to be this specific, but as you have it you need a space between the class names.

You have
CODE
.gallery.vignette span

and it should be like so.
CODE
.gallery. vignette span


That goes for the selector for the rule that shows the large image and for at least one more too.

What you want is a contextual AKA descendant selector. It consists of two or more singular selectors with a space between them.

CODE
div p span


The above would match any span that's inside any P that's inside any DIV.

I don't remember if what you wrote has an actual name, but it's sometimes called "chaining". It matches an element that has all listed classes. So with what you wrote the browser looks for something like this - and it isn't there.

CODE
<div class="gallery vignette">
<span>...</span>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
macugab
post Apr 28 2021, 05:14 PM
Post #5





Group: Members
Posts: 4
Joined: 27-April 21
Member No.: 27,914



It works with the space betwen class names!

Thank you very much!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 28 2021, 06:34 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,780
Joined: 9-August 06
Member No.: 6



Yup. I tried it. You are welcome. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th August 2021 - 02:37 AM