Eyesee

Am setting up some webpages on a home computer to show old calendars. Using the OPTION tag to get to the various years, but am unable to get the links to work, so must be doing something wrong somewhere. Have seen this done on a live online website and it all works perfectly. Is someone able to assist please. Thanks Ian C HTML code <div class="w3-center"> <select aria-expanded="false" id="sort-select"> <option value="/1801_index.html">1801</option> <option value="/1802_index.html">1802</option> <option value="/1803_index.html">1803</option> <option value="/1804_index.html">1804</option> <option value="/1805_index.html">1805</option> <option value="/1806_index.html">1806</option> <option value="/1807_index.html">1807</option> <option value="/1808_index.html">1808</option> <option selected="selected" value="/1809_index.html">1809</option> <option value="/1810_index.html">1810</option> <option value="/1811_index.html">1811</option> ...... <option value="/1895_index.html">1895</option> <option value="/1896_index.html">1896</option> <option value="/1897_index.html">1897</option> <option value="/1898_index.html">1898</option> <option value="/1899_index.html">1899</option> <option value="/1900_index.html">1900</option> </select> </div>

Have the following Sidebar menu setup, using CSS for layout. What are the options to show the ACTIVE menu item please, either in CSS or JS? <nav class="w3-sidebar w3-collapse w3-light-grey " style="z-index:1;width:400px;"> <!-- Header --> <header class="w3-menu-sumf" style="padding-top:90px;padding-left:25px"> <b>CONTENTS</b> </header> <div class="w3-bar-block"> <a href="Chapter01.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 1</a> <a href="Chapter02.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 2</a> <a href="Chapter03.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 3</a> <a href="Chapter04.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 4</a> <a href="Chapter05.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 5</a> <a href="Chapter06.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 6</a> <a href="Chapter07.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 7</a> <a href="Chapter08.html" class="w3-bar-item w3-button w3-padding">&nbsp; Chapter 8</a> </div> </nav> The classes for the menu items are as per the w3.css file, no changes. Thanks. Ian C

Most of the W3 Schools pages are done with the "Main" panel as grids 9X and 3X, all totally responsive. eg https://www.w3schools.com/w3css/w3css_grid.asp Is it possible to have the right panel (3X) with the images as fixed with the 9X panel scrolling, but still remaining responsive. Ian C

Thanks very much for that. Managed to get it to work now. Now to get the images to link to a modal with next/previous buttons rather than to each image individually. Ian C

I am working on a responsive image gallery based on the page at https://www.w3schools.com/howto/howto_css_image_gallery.asp but it has a mixture of landscape and portrait oriented images. If landscape images are placed in the same gallery as portrait ones they sit at the top of the location and are the same width as the width of the portrait image. What I would like to be able to do with CSS is to have the images the same size on the screen and the landscape ones centered in the height of the portrait ones, with the border around them as per the attached image. Can't seem to get the right code to get them centered, they always want to stay at the top. Hoping someone can assist. Thanks Ian C

Would like the thumbnails in a picture gallery to zoom from a minimum size to the maximum gallery size when first loaded. Is this possible with CSS, or would some Javascript be required as well. Any examples anywhere that anyone knows of. Thanks Eyesee

This is from the html file not the CSS. As I said earlier everything else in the CSS file works, so it is not an incorrect link. Just the overlay is not working. Eyesee

Thanks. URL is correct Attribute is correct CSS filename is correct Saved as utf-8 Copied and pasted it into the main CSS file which works for everything else, just not the overlay. Also displays the image as full size, not the specified width of 295px. Nothing else in CSS file that has the same ID that could be overwritten. <div class="w3-card-padding"> <div class="mycontainer w3-border w3-hover-border-black w3-hover-shadow"> <a href="Chapter00.html"> <img src="../Images/SumF_01_00.jpg" alt="Avatar" class="myimage" ></a> <div class="myoverlay"> <b>&nbsp; Summer Fun</b><br> <b>&nbsp; At the Lake</b> </div> </div> </div> w3-card-padding just adds padding to the left side. Eyesee

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_title Having a bit of trouble putting everything inside the <style> </style> into a separate css file. Does not want to work if I do. Works fine if included in the html file. What am I doing wrong? Can anyone help please. Thanks Eyesee .myimage {display:block; width:295px; height:auto;} .myoverlay {position: absolute; bottom: 0; background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 14px; padding: 5px; text-align: left;} .mycontainer {position:relative; width:295px; max-width: 295px;} .mycontainer:hover .myoverlay {opacity: 1;}

Thanks very much. That answers everything very easily and clearly. Eyesee

When I try to set up a page to use the 'Font-awesome.css' file on the computer for icons in dropdown menu and Home symbol, the icons etc do not show up in the Firefox browser, but do in MS Edge. Using the same link setup as the main css file. Only setting up on computer at the moment, not online. <link rel="stylesheet" href="../../lib/w3.css"> <link rel="stylesheet" href="../../lib/font-awesome.css"> Not sure why it is doing this. Does it have to be a direct link rather than the ../ business. Works in Firefox if I use the online link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Hoping someone can help. Thanks Eyesee

Thanks very much for that. Got it all working now. Ian C

When I try and set up a webpage using this template I have a problem with pages where the Page Content does not exceed the screen height and do not have to scroll, and those that do have to scroll because the Page Content does exceed the screen height. https://www.w3schools.com/w3css/tryw3css_templates_clothing_store.htm I did set up something some years ago that fixed that problem, but that was fairly basic HTML and not CSS, and also used frames. The page without the vertical scroll bar jumps to the right the width of the scroll bar. How do I stop it from doing that please? Believe it may be something to do with the OVERFLOW setting. Hoping someone can help. Probably something very simple. Thanks Ian C

Am endeavouring to set up a web page based on the CSS Template analytics but would like to add a fixed width right side column. https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm Is this possible? Want to use the left for menu and the right for images, photos etc. They need to remain fixed. The middle column will be for the main page of text and other images with only the centre column scrolling. Many thanks Eyesee