Gallery part of black forest...

Jul 10th, 2020 at 08:17 AM
User 2972024 Photo

Norman Woollons
Registered User
7 posts

I am having trouble with the Black Forest gallery.

The photographs are overlying the next section (see screen shot attached)

I have copied and pasted the exact html from the download but it is almost as if there is a and or </div> command that is missing to tell the browser not to overlay. I suspect it is perhaps something in the [main.css] file, but 1187 lines and sections all over, I'm not sure where to start to look or what, if anything, to change.

Using the w3 validator didn't throw anything up as an error.

Any advice would be appreciated.

Thanks for reading

NormanW

html code as download

<div class="gallery-intro container-grid" id="gallery">
<h3 class="light">Gallery</h3>
<div class="rule heading-rule light">
<hr>
</div>
<div class="container-fluid instructional-container container-grid">
<div class="responsive-picture instructional-icon">
<picture><img alt="Placeholder Picture" src="./icons/icon-gallery-interaction.png">
</picture>
</div>
<h4 class="instructional-heading">Mouse hover for interactions</h4>
</div><a href="#" class="link-button-glyph btn goto-top"><span class="glyph-for-button goto-top"><i class="coffeecup-icons-arrow-up4">
</i></span></a>
<p class="paragraph paragraph-1"><strong>This gallery was made with just some CSS simply tricks.</strong> There are three classes for large, medium and small images. Each class uses different effect settings for rotation and box-shadow, both in regular and hover state. The z-index value moves the image up on hover. A specific design was applied for smaller devices so it looks always nice. Hit the Preview button in the toolbar to see the effects in action and enjoy these amazing shots by Airwolfhound.</p>
</div>
<div class="gallery container-grid">
<div class="responsive-picture gallery-image-XL">
<picture><img alt="Camping" src="./Gallery images/photo-1414016642750-7fdd78dc33d9.jpg">
</picture>
</div>
<div class="responsive-picture image-gallery-S">
<picture><img alt="Crossing the river" src="./Gallery images/photo-1444075107151-b2090be89337.jpg">
</picture>
</div>
<div class="responsive-picture gallery-image-M">
<picture><img alt="Grizzly bear" src="./Gallery images/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg">
</picture>
</div>
<div class="responsive-picture gallery-image-M">
<picture><img alt="Horses on a landscap" src="./Gallery images/photo-1416592525293-e65266465eb7.jpg">
</picture>
</div>
<div class="responsive-picture gallery-image-M">
<picture><img alt="Robin" src="./306_gallery_images/15987778028_49c1a170a2_k.jpg">
</picture>
</div>
<div class="responsive-picture image-gallery-S">
<picture><img alt="Leaves" src="./306_gallery_images/photo-1445503061048-e03cd48b1f11.jpg">
</picture>
</div>
<div class="responsive-picture gallery-image-XL">
<picture><img alt="Road crossing the forest" src="./306_gallery_images/photo-1447746249824-4be4e1b76d66.jpg">
</picture>
</div>
<div class="responsive-picture gallery-image-XL">
<picture><!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="./306_gallery_images/photo-1414105195225-2b7fc75ad12e.jpg" media="(min-width: 576px)"><!--[if IE 9]></video><![endif]--><img alt="Taking pictures" src="./306_gallery_images/photo-1449781499120-fbbded86c656.jpg">
</picture>
</div>
<div class="responsive-picture image-gallery-S">
<picture><img alt="Wild wolf" src="./306_gallery_images/photo-1415904663467-dfdc16cae794.jpg">
</picture>
</div>
<div class="responsive-picture gallery-image-M">
<picture><!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="./306_gallery_images/photo-1449781499120-fbbded86c656.jpg" media="(min-width: 576px)"><!--[if IE 9]></video><![endif]--><img alt="Ferns" src="./306_gallery_images/photo-1414105195225-2b7fc75ad12e.jpg">
</picture>
</div>
<div class="responsive-picture image-gallery-S">
<picture><img alt="Small bird" src="./306_gallery_images/8490018262_61c9e5481d_k.jpg">
</picture>
</div>
</div>

Attachments:
Jul 10th, 2020 at 10:00 AM
User 122279 Photo

Inger
Senior Advisor
14,547 posts

Hi,
Is this the Bootstrap version of the gallery that came with your sample of SD? I believe it is also the same as you can find among the templates on the CC site. (I'm asking because there is also a Foundation version, but AFAIK it is not on display at the moment).
When I updated and moderinized the Bootstrap version, I tested it in all main browsers, even including IE11, and it displayed correctly. So it depends on what you have edited. To me it looks like the container .social-section is overlaid. You may have noticed that the gallery and all the images are floated, so the social section obviously had a float clearing. Is it still there? Or if you have removed the social-section, you should add the 'clear' to the next section, the contact-section.

If you still need some help, it would be best to post your project file. Best to zip it up and pop it in your dropbox or similar. Then we are better able to see what is going on.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 10th, 2020 at 10:21 AM
User 122279 Photo

Inger
Senior Advisor
14,547 posts

Looking at your picure a bit closer: I think maybe you have not floated the actual gallery. Since all the images are floated, the 'parent' will collapse if it has not got a proper height, or if it is not floated too. And the clear on the next element is important too.
This kind of collapse will lead the next element, if not cleared, to slide up behind it, and that seems to be what has happened.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 10th, 2020 at 02:22 PM
User 2972024 Photo

Norman Woollons
Registered User
7 posts

Hi Inger

Thank you for replying

Yes this is the bootstrap version but I downloaded it from templates, for the html editor. I'm not using SD.

I never use IE, rather Firefotx and Chrome, however when I used the [ctrl]+[f9], it is the same error in IE as it is in the regular browsers, with photos overlaid the text. What is different in IE (version 11.0.195) is that EVERY button icon has beenl stretched vertically. That's not happening in FF or Chrome.

Correct, it is the container.social-section that has been overlaid in the screen shot I attached to my original question, but if I move containers around, the gallery overlays whatever container it is placed ahead of in the html.

I was looking for the code for the "float clear" but can't see it. What is it I am looking for please?

I have done some editing, to both the main.css and the html, going through all the code to see which line does what, and then making a /* annotation */, so I can go back.

What I didn't notice was the change which caused the problem. I've followed the normal incremental change protocol, make one change then test. But something has slipped by me. Sorry.

Again, thank you for taking the time to reply.

NormanW




Attachments:
Jul 10th, 2020 at 03:55 PM
User 122279 Photo

Inger
Senior Advisor
14,547 posts

I assumed you were using SD because you posted this in the SD discussion forum. You should have posted it in the HTML Editor forum. I will now move it.

I will also download the same version of this theme as you have, to be able to help you further. The versions for the HTML Editor have been made after I converted the theme, so I have in fact never seen them.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 10th, 2020 at 05:58 PM
User 122279 Photo

Inger
Senior Advisor
14,547 posts

So, If you open the main.css, you find on line 371 the container with the class name gallery. The first css rule you see there is 'float:left;' This has to be there so that the gallery background doesn't collapse.
Then right afterwards you have three classes for the gallery images, also with float: left;

On line 654 you have the element coming after the gallery, the social-section, and here you see 'clear: both;' That is the clearing of those floats. You could get away with 'clear: left;', since everything in the gallery is floated left, but I'm in the habit of clearing both, just for good measure, just in case something was floated right.

If you move various sections around, the first element after a floated section has to be cleared. Say, if you don't use the social-section but go right down to the footer, then you need to add the clear:both; to the footer.

It is too late where I am (Norway, Europe), to start elaborating on IE11 and images/graphics now. Maybe someone else is still awake...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 11th, 2020 at 12:34 AM
User 2972024 Photo

Norman Woollons
Registered User
7 posts

Hi Inger

I apologise. I thought I had posted in the html forum. The header had said Home>Forums>html so I presumed that was where I was.

I too am in Europe, but at the other extreme! The far south east.

Thank you for the information. I'll open it and look.

I have moved some sections around in the CSS, after looking on line to try and make sure the order was not critical. This was so when I created some new containers of my own [eg container-grid.backissues with p.paragraph.headerbox-backissue immediately following] so things were more in the same place.

I'll let you know how I get on. As for IE11 - don't worry. I never use it!

Thank you

Norman
Jul 11th, 2020 at 02:35 AM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,078 posts
Online Now

You might never use IE11 but what about visitors to your site that still do, even if it unsupported and outdated should you not be considering them and how it will look? There are still millions of them out there.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Jul 11th, 2020 at 06:04 AM
User 2972024 Photo

Norman Woollons
Registered User
7 posts

Very fair point thank you and I agree about being inclusive, but would like to get what I've written working (I now have) and then I'll worry about whatever the problem is with the icons in IE11.

This is my first attempt at serious CSS, which I've been forced into through circumstances, so I'm on a vertical learning curve! I've gone from basic html that I learned in the early 1990's then done no coding until now, so please bear with me :-)
Jul 11th, 2020 at 06:08 AM
User 2972024 Photo

Norman Woollons
Registered User
7 posts

Hi Inger

I tried to do what you suggested, but it didn't work, so I've gone back to the theme [main.css] file, kept the formatting as it has been written, but added my extra bits in, changed the fonts etc incrementally, and it all now works.

I have obviously messed up somewhere, firstly by not checking after every change, not backing up after every change and not having the in depth knowledge to fault find, but I'm on an even keel again now.

Thank you again for your help, time and advice.

NormanW

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.