Hi ronpat
Images located at: www.sgdr.co.uk/ronpat
Shona
Iâve copied the images. Was surprised that the dane over the flag is actually smaller than your version.
Just one more thought for the time being. Do you know how to modify the slider so the current image does not fade⌠So it is overlaid by succeeding images. Sliders are time-wasters and images that move or drop out are annoying to many. âFadersâ are more acceptable to most users. If you are interested, it would be worth a try.
Iâm going to disappear and work with the layout for awhile. Hopefully to return with some suggestions for you to evaluate in a day or so.
Hi ronpat
It could be replaced with the w3-carousel? https://www.w3schools.com/w3css/w3css_slideshow.asp
I donât know how to remove the opacity other than changing the animation to a carousel.
Thatâs fantastic that you are helping me and I really appreciate and so with the woman that runs the rescue.
It has to be blue for Scotland!
Shona
Hello,
I use that CSS code on my website and it working fine so thanks for this CSS code.
Hi jamiehenningsnz
I thought I would be okay with w3.css as Iâm very inexperienced and Iâm helping the rescue and club by keeping and hosting their websites free as well making sure they are up to date. Looking forward to seeing what ronpat comes up.
Shona
Shona, this is a âproof of conceptâ example of what I would do with the boxes and the images based on its current design. I did not try to find a better slider and I did not try to work with the W3.css. Frameworks make me crazy, anyway. I just stopped the fading in the W3.css slider for my convenience (and sanity). Someone here may be able to modify one of the W3 slider choices for you. I do not write JS, though, so I canât help with the fading thing (not yet, anyway).
I wrote my modifications at the top of the HTML page within âstyleâ tags. The HTML has been heavily modified, too.
I did not attempt to do anything with the menu bar at the top of the page.
I think I used the images that I downloaded from you without making any changes. This is a âproof of conceptâ after all.
With a little help from a friend, we can probably make a better image of a Dane on the flag unless that is the ownerâs choice.
There seems to be quite a few styles in the W3.css with !important modifiers. Are those yours or are they standard? If you need to use !important more than once, suspect problems in your code.
I set a max-page width of 1200px. Thatâs entirely optional. Comment-Out the max-width in .outer if you would like to try it at 1920px 
sgdr-rev2.html (10.6 KB)
1 Like
Hi ronpat
Unfortunately the Dane on the flag is the owners choice. I had already said to her that a good quality photograph was needed so she came up with that photo and her friend stuck it on a flag!! Thatâs why I used the animation to detract from that photo and show better quality different ones 
What do you think to slowing the animation down slightly?
I like the new layout much better. Has the CSS that you have written overridden the W3.CSS? I ask as the menu bar isnât working and the footer has disappeared or is that intentional? Everything on my site is all powered by W3.CSS. It also works on a mobile! definitely much better.
Thank you very much from Jean and I and all the Danes in rescue. Yes I am up at an ungodly hour as one of mine isnât too well this morning.
Shona
OK, it looks like I broke the sticky footer. Let me revisit that.
Too bad about the Dane on the flag 
Please describe what is not working in the menu? The dropdown mechanism works for me and the tabs become rows for mobiles, too. What specifically are you referring to that doesnât work?
Which animation? The code on my test page is nothing, I just defeated the frameworks transitions by defeating the classname or your already-too-s-l-o-w animation? 
IMO, there must be something better available.
<opinion/apology>
The unfortunate thing about my code is that I changed the HTML, so parts of the w3.css, such as the sticky footer, do not work. Frankly, my intent was limited to identifying an acceptable way of treating the âfocusâ boxes and the carousel without breaking anything else; however, I overlooked the sticky footer. I may be able to restore that⌠not sure. The menubar should not have changed. I did not set out to learn the W3.css framework :nonono:. Frameworks make a few things easier, but otherwise come with too many restricting rules and requirements that must be followed. Plus, however many pages your site may have can probably be written without the framework using 1/5 of the CSS or less. The rest of the CSS is bloat which users have no choice about downloading.
</opinion>
How many pages does your site have?
Are you referring to the W3.css? ⌠much better than what?
Are you âweddedâ to frameworks? You seem more than bright enough to learn to write your HTML and CSS âby handâ, so to speak, and your design tastes seem more discerning than this framework seems to allow you to present.
How to treat the carousel? First, does my âproof of conceptâ example resize to suit you? and is the two-column view between the one and three column view acceptable? Is it OK that the first info box preceeds the carousel in the mobile (single column) view? Another FYI that you already know: the closer the images are to having the same aspect ratio, the more uniformly they will appear in the carousel.
I cannot solve the carousel animation for you. I do not write JS. Someone here may be able to modify one of the W3âs JS patterns (âit doesnât look that complicatedâ says the non-programmer) or you may choose to look elsewhere for an already-built carousel that offers the fade-in-overlay that I described. (FYI, more sophisticated carousels feature controls that allow the user to pause, back-up, and continue the show.) If you decide to go for the fade-in-overlay, start with a transition around half a second or so and a viewing period of about 2-3 seconds and adjust to suit. I have no recommendations about how to time the fade-out-fade-in transition in your present pattern. Personally, I would have never considered it.
Sorry to hear that one of your pups is ailing. Hope s/he gets better. 
I am presently surrounded by my girlfriend cat. She is a unique, compact, high energy commando species that can materialize in several places at the same time⌠and when she wants attention, she wants it NOW. 
For now, I will see if I can restore the sticky footer.
1 Like
Hi ronpat
I love what you have done already and think itâs looks a hundred times better than my effort.
The menu bar and buttons appear as standard blue links in internet explorer but works in chrome. The whole website is in the centre in chrome, but full screen in internet explorer.
The website has 12 pages in total, with some text and a couple of photographs to be added. I waiting from those from the rescue co-ordinator.
I also need to put a contact form on the contact page, but could never get it to work properly.
The full website is located at www.sgdr.co.uk if you want to have a peek through it.
Many thanks.
Shona
Are those issues with the test code that I wrote or were any of them apparent in the working version of the site?
Are you talking about IE11 or Edge?
Hi
The site works and the issues are not apparent, but as I said I glued the code together! So best practices not used. Iâm using Internet Explorer 11.
Shona
Ok, thatâs helpful to know.
Can you send me screenshots (4 total) showing the differences that you see. I do not see the differences that you describe. (Iâve been known to miss âthe obviousâ, though.) Your site extends to the full width of the browser window using Chrome, IE11, Edge and Firefox. Also, the home page did not have a sticky footer after all.
Hi,
Iâve put 2 screenshots in the same directory as the photographs that you downloaded. What I meant to say is that background is the full width of the screen but now the website. As you will see the menu bar and buttons appear and standard unstyled links, where as in Chrome, everything is as it should be.
Files are: iexplorer_screenshot.png and chrome_screenshot.png
Shona
Got, 'em. Thanks.
The screenshot of IE isnât normal. Are there any settings in IE that you might have altered at any time such as the âcompatibilityâ setting?
Hi,
Just checked the compatibility setting and I donât have any websites added to that view. Is there anything else? Iâve not altered anything in explorer and I donât have meddling hands interfering with my computer 
Are there any other settings I should check?
Shona
Problem solved! It doesnât view properly in IE when I load it from my computer, however I have uploaded it to the website and itâs working fine. Why is that? I never work live on the websites; always test from my desktop till I get a file working properly. Time for a glass of wine! Many thanks for your kind patience Ok whatâs the next step.
Shona
Glad you solved it, but I canât imagine why it didnât work on your PC. I was about to send you a screenshot from IE11 on my Win7 PC. It just works. There are newer security standards in place now than those in Win7, so you may have stricter security requirements. Just a guess.
Please post a URL so I can access the page on line and see how it is behaving (or misbehaving, as the case may be).
I have been tinkering with the carousel but that is really over my head. Weâll need a JS volunteer to help/advise with that.
Are your pages supposed to have a âfixedâ footer or a âstickyâ footer? or do you understand the distinction? A âfixedâ footer is always at the bottom of the browser window. It takes up useful screen real-estate. Usually not a good thing. A âstickyâ footer rests at the bottom of the window if the content is insufficient to push it to or below the bottom of the window, otherwise it is pushed below the bottom of the window if sufficient content exists. Where there is indecision, I recommend the sticky footer.
I am reluctant to volunteer recommendations because your silence when asked if you are wedded to the framework suggests that you are and most of my âcontributionsâ, including a sticky footer, would involve code not found in the framework.
What would you like to work on next?
My guess is âmy computerâ means opening via the OS instead of via a browser to a localhost server
1 Like
Hi
I miss things quite a lot (as I have MS) and that comment totally passed me by. Iâm not wedded to framework and am very open to and welcome new suggestions. I have BSc in Networking and did some programming at university but unfortunately the MS makes it difficult to recall as does learning new things - which is why I havenât attempted something like Wordpress. There are still bits of HTML and CSS that I understand, but the last time I built a website was in the late 90âs!
I prefer the sticky footer.
I have already make the page available online for you to view.
Most of the pages will just be text and the nice lighter background that you have behind the text works really well, so Iâd like to use that on the text pages. The pages with images will be sponsors and danes available. I need to be able to put sponsors logos with a link to their website on that page. As for danes available - it will be a couple of photographs and some text - awaiting information from co-ordinator.
The contact page - a contact form (well 2 actually) would look much better, but I couldnât get one working properly so put it on the back burner. This is the trickiest thing for me so hopefully you can help me solve it?
Do you have a business? Iâd be more than happy to promote your logo and a link on our sponsors page?
Shona