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 ..read more

It is simple as this: Two bars on top, then content window, then one foot bar followed by a logger window at the bottom. I want the 5 div's height all together add up to 100vh - meaning there will be no scrollbar on the right side of a browser. So I arranged each div's dimension by a constant or a variable: body{ --ftheight: 6.5em; --navheight: 1.5em;} #header{height: 1.5em;} #nav{height: var(--navheight);} #main{ top: calc( 1.5em + var(--navheight) ); bottom: var(--ftheight);} #footer{ bottom: 0; height: var(--ftheight);} #footbar{height: 1.5em;} #lo ..read more

In the webpage two_sections.html I tried to use two scrollbars and cancel the browser scrollbar. However the lower scrollbar does not work at all. I know the bug might rest in the body section `overflow:hidden` But it is the only way I know to split the two sections without a scrollbar on browser. Any walk-around? common.css two_sections.html ..read more

Hi!   I'm using a slightly modified version of this (https://www.w3schools.com/howto/howto_css_modals.asp) to have a section of a page with image links to text pop-ups. It works great with just one image. However, I need to have multiple images with different text in the popups. I know it must be a simple fix by using an id or something, but I'm just not figuring it out. I've spent hours on this trying suggestions from different sites around the internet, including this one. None of them work. Part of the issue, perhaps, is that I have to put JavaScript at the top of the page for the Moda ..read more

in CSS example of Grid is as under: .grid-container {   display: grid;   grid-template-columns: auto auto auto auto;   gap: 10px;   background-color: #2196F3;   padding: 10px; } .grid-container > div {   background-color: rgba(255, 255, 255, 0.8);   border: 1px solid black;   text-align: center;   font-size: 30px; } The above example's HTML shows as under: <div >   <div>1</div>   <div>2</div>   <div>3</div>     <div>4</div>   <div>5</div>   <di ..read more

I'm having a challenge using CSS property vertical-align,  I want to use the latest CSS to get this done, not put the code within the HTML or putting the style under the head of the page.  The CSS code as follows p.parrot img { vertical-align: text-top; } HTML <p.parrot img?<img src-"Images/redparrot.gif wisth="195" height="156"> I've uploaded the file so go to animalandhumannutrition101.com/ourstory.html to view it with the problem   ..read more

Hello, I have a simple @keyframe animation that works correctly in principle, but I would like to pack the delays from the body into .circle. I tried it with animation-delay, but unfortunately it doesn't work, does anyone have an idea? element { width: 100px; height: 100px; position: absolute; background: white; border-radius: 50%; animation: scaleIn 6s; animation-delay: 0.0s, 1.0s, 2.0s; animation-iteration-count: infinite; }   Best regards keyframe_animation.html ..read more

Hey all!! Trying to delete huge empty space between 2 divs...here is my code: <div class="wrapper"> <div class="page-content"><h1>Welcome <?php echo $username;?></h1></div> <div class="menu"> <ul> <li><a href="profile.php">Profile</a> </li> <li><a href="trip.php">Reservations</a> </li> <li><a href="firms.php">Companies</a> </li> </ul> </div> </div> </div> <div class="container"> ..read more

I am the owner of the Red Hen Publications website, which is in serious need of a rebuild/redesign due to proliferating glitches in my dropdown menus which is now affecting the buttons in the nav bar which do not even have dropdowns. (No. I do not know what is causing this. I have not changed the .css style sheets since I uploaded the site, and this was not present at that time. But over the past 2 years the site has become more and more affected.) The site was built in Dreamweaver CC2021, and since you people wrote the Classroom in a Book, I figured that this would be an appropriate place to ..read more

I use this awesome accordion on my website. I love it, but I seem to have an issue with interference with other parts of my website, the menu and side nav, for example. I've managed to get everything the way I like it, hover color, text color etc. But I'm having some problems with the padding (I think). On this page I've gotten rid of most of the stuff (menus, side nav, etc.) and the padding or whatever is perfect, used with a table which creates a look like my accordion is drawers in a desk. That's the way I want it on other pages, like this one, where the other stuff is used. It creates ..read more