Eyesee

Thanks husyn

That shows the background from the start, I wanted it to change to the black background when I hover over it.

It was getting the text to stay at the bottom I could not figure out.

Managed to get it to work though.

Again thanks
Eyesee

The Image Overlay Title option has just the bottom area with text as per https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_title

I would like to have the whole image overlaid with the black background, which happens if I add the height as being 100% in the .overlay{} as well as the width.

The only problem with this is the text jumps up to the top. How do I get the text to stay at the bottom please?

Thanks
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

15 hours ago, Eyesee said:

    <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>

 

 

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

8 minutes ago, dsonesuk said:

Link tag does not have correct url path to style.css.

Link tag does not have attribute rel="stylesheet"

css file is incorrectly named, you see style.css but if created in notepad and hide extensions is used in operating system filing it really is style.css.txt.

Not saved as encoded utf-8.

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