Member Avatar for delta_frost

This is my institute's website.The problem here is while initial loaading,the content("Headlines") on the left overlap making it look ugly.But once loading is complete,the elements are able to position themseleves accurately.What I have done so far is inspected the elements relating to that area,but I can't understand what's actually wrong with the CSS.The clearfix seems to be okay.Can anyone suggest what is wrong with the CSS.

  • 3 Contributors
  • 2 Replies
  • 221 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

A few focused follow-ups that complement ’s and ’s points.

The root cause is a layout shift: the slider and its media aren’t reserving vertical space while scripts and images download, so elements overlap during the initial render. Two low-risk fixes together stop the jump: (1) reserve the slider’s footprint with CSS so the container never collapses, and (2) hide non-active slides without removing their layout contribution (stack + opacity) so nothing shifts when JavaScript initializes.

/* reserve space and avoid collapse */
#headlines { max-width:450px; width:100%; aspect-ratio:450/358; background:#f5f5f5; position:relative; overflow:hidden; }

/* stack slides and reveal via opacity (no layout collapse) */
#headlines .slide { position:absolute; inset:0; opacity:0; transition:opacity .24s ease; pointer-events:none; }
#headlines .slide.visible { opacity:1; pointer-events:auto; }

#headlines img { width:100%; height:100%; object-fit:cover; display:block; }

Also initialize a tiny inline bit of JS as early as possible so the page can show the intended initial state before the larger slider script runs:

<script>
/* place this in <head> so CSS can target .js quickly */
document.documentElement.classList.add('js');
document.addEventListener('DOMContentLoaded', function(){
  var first = document.querySelector('#headlines .slide');
  if(first) first.classList.add('visible');
  /* then call your slider init() or let the external script take over */
});
</script>

Quick troubleshooting checklist:

  • Test with DevTools throttled network and with JS disabled to confirm the CSS fallback prevents overlap.
  • If aspect-ratio isn’t available, give the container a conservative min-height to reserve space.
  • Keep an accessible <noscript> fallback that renders the first headline for users without JS.

These changes avoid visual overlap while keeping the slider behavior intact once your JavaScript finishes initializing.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

One thing that stood out when I took a quick look at your page and source code is that you are not setting width and height properties on your elements. for example, on the images, you should be setting the width and height so that the browser can position the element prior to downloading it from the web server. For example...

<img id="pic1" src="#" alt="my pic" width="640" height="360" />

In addition, the picture of the week downloads very slowly. When I downloaded the picture to my computer and looked at the properties, it is a 1600x1200 picture. However, on your site its 450x358, so you should save the file on your web server to the same dimension as you will display it on the screen. That should reduce the file size and the browser will download the picture more quickly.

Member Avatar for EvolutionFallen

The issue seems to be one of speed, as JorgeM indicated. The problem is that the JavaScript that makes your "Featured" slider work loads after the rest of the page, so it can't make the slides disappear until then.

A solution I usually use is to have the default styles in my CSS hide the other slides. Then you make the first slide an exception using a special class. Once the JavaScript kicks in, it can remove this class and start active appropriately. For example, assuming we have the following HTML structure:

<div id="featured-container">
    <div class="featured-slide first-show">
        My Content
    </div>
    <div class="featured-slide">
        More Content
    </div>
</div>

Now we use the following CSS to hide all slides, but then reveal the first slide. Since CSS loads quickly and early, this happens well before JS executes, avoiding embarassing content overlaps.

.featured-slide { display: none; }
.featured-slide.first-show { display: block;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.