Member Avatar for mgn2683

I am a beginner at Jquery, and am trying to implement easy slider onto a website. I have the slider on the page, but nowhere near the correct location. I think the issue is stemming from the fact there are two CSS files, and the screen.css file (which is tied to the slider) is throwing everything off. It can be viewed here:

My intention is to have the slider in the same

<container>

as the top nav, which is 930px wide, and would like to have it run behind the top navigation. What am I doing wrong?

Edited by pritaeas because: Moved.
  • 3 Contributors
  • 2 Replies
  • 89 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

reported the Easy Slider appearing out of place and suggested a conflict with screen.css; pointed out the slider sits inside a div within #image-content-box, and noted it looked fixed. Common, concrete causes are stylesheet order/specificity, mismatched wrapper widths, positioned elements, and stacking-context rules (transform/opacity creating new contexts). The quickest way to isolate the problem is to use the browser inspector and toggle styles live.

Checklist of focused checks:

  • Inspect the slider element in DevTools and view computed width, margin, and which stylesheet sets those values. Temporarily disable screen.css to confirm whether it is overriding layout.
  • Verify the slider is inside the same 930px wrapper as the top navigation. If not, either move the slider markup into that wrapper or apply the same width + centering rules to the slider wrapper.
  • For the nav to sit on top, ensure the nav is positioned (relative/absolute/fixed) and has a higher z-index than the slider. Remember z-index only affects positioned elements.
  • Look for ancestors with transform, opacity < 1, filter, or will-change — these create new stacking contexts that can prevent a higher z-index from taking effect.
  • If the plugin positions slides absolutely, make the slider parent positioned and sized so absolute children anchor correctly; set images to display:block to avoid inline spacing.

A minimal CSS pattern that usually helps:

/* shared wrapper */
#wrap { width: 930px; margin: 0 auto; position: relative; }

/* nav above slider */
#top-nav { position: relative; z-index: 50; }

/* slider below nav */
#slider-wrapper { width: 930px; margin: 0 auto; position: relative; z-index: 10; }

/* anchor absolute slides to parent */
#slider-wrapper .slides { position: absolute; left: 0; top: 0; width: 100%; }

Note: stacking contexts are the usual gotcha — if layering still fails, search ancestors for any property that creates a context and adjust or move the slider into the same context as the nav.

Recommended Answers

All 2 Replies

Member Avatar for gabrielcastillo

Looks like you have this fixed.

Member Avatar for JorgeM

You have the slider within a div that is within another div with an id of ="image-content-box". Looks fine to me also.

Can you elaborate on...

throwing everything off

and

run behind the top navigation

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.