Slider with navigation overlay positioning delima

Hi guys,

I am still working in a local environment so I can’t show you what I have thus far; however, I am hoping with some code and an example you can help.

If you look at: http://www.visitphilly.com/ or [URL=“http://www.maglioelectricllc.com/”]http://www.maglioelectricllc.com/ you will see a simple jquery slide show with a navigation overlay. I have my nice little slide show and a start of navigation menu. My issue is this:

  1. My slider is forced to the left margin and will not expand as the window gets bigger. I have scroll bars for the exact side of the rather larger “slider.”

  2. My navigation scrolls nicely within the 980px container so as the window gets bigger it migrates right on off the slider.

I just tried to attach, but that doesn’t seem to be working. So here is the code snippet and sorry I don’t have a live example. If any one is interested in tutoring to help I am up for that too (I will pay of course :slight_smile:

HTML:

<body>
<div id=“sliderwrapper”>
<div id=“slider”>
<img src="images/slide1.jpg"width="1280"height="650"alt=“derby designs equine marketing”/>
<img src="images/slide2.jpg"width="1280"height="650"alt=“mobile web design for equestrians” />
<img src="images/slide3.jpg"width="1280"height="650"alt=“equestrian advertising by derby designs” />

   &lt;script type="text/javascript"&gt;
     Script loads here and full jquery in head section
	&lt;/script&gt;
           
     &lt;/div&gt;&lt;!--end slider--&gt;
     
     &lt;div id="navwrapper"&gt;
      &lt;div id="nav"&gt;
       &lt;ul class="navigation navleft"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;&lt;!--end navleft--&gt;
    &lt;ul class="navigation navright"&gt;
     &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;&lt;!--end navright--&gt;
 
  &lt;/div&gt;&lt;!--end nav--&gt;

  &lt;/div&gt;&lt;!--end navwrapper--&gt;
   &lt;/div&gt;&lt;!--end sliderwrapper--&gt;                                                  
     &lt;/body&gt;

CSS

/–navigation–/

#navwrapper {
background: url(images/nav.png) repeat;
height: 40px;
position: absolute;
top: 5px;
z-index: 100;
width: 100%;
}

#nav {
left: 0px;
margin: 0 auto;
top: 0px;
width: 980px;
}

.navigation {
font-family: futura-pt, sans-serif;
margin: 0 auto;
}

ul.navigation {
left: 0;
padding: 0;
position: relative;
top: 10px;
width: 980px;
z-index: 3;
}

.navigation li {
color: #39a0d5;
float: left;
list-style: none;
font-family: futura-pt, sans-serif;
padding: 0px 22px;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.navigation li a {
text-decoration: none;
color: #39a0d5;
}

.navleft {
float: left;
width: 400px !important;
}

.navright {
float: left;
width: 350px !important;
left: 200px !important;
}

/–slideshow–/

#sliderwrapper {
height: 650px;
background-size: auto auto;
background-repeat: no-repeat;

}
#slider img {
background-position: center top;
position: absolute;
height: 650px;
background:url(images/loading.gif) no-repeat 50% 50%;
width: 100%;
}

.slider a {
border:0;
display:block;
}

Thanks so much!

Danielle

It’s hard to assess this without seeing how the script interacts with your markup.

There are differences between the examples to which you’ve linked and your own code. In one example, the slide images are fixed in size and centred within a container with width:100% and overflow:hidden; (the latter preventing scrollbars appearing when the images are wider than the viewport). In the other the images are applied as a background within a 100% width container and so do not present scrollbars when wider than the viewport.

Your slide images are img elements and their size set in CSS to be 100% of the parent. Perhaps there is a confusion between the intended width of #sliderwrapper and the images targeted by #slider img. I also don’t understand why background-size and background-repeat are declared on #sliderwrapper, but no background-image. background-size, being a CSS3 property, is not supported by IE8 and earlier, so should not be relied upon.

The scrollbars are caused by the navigation elements being within #sliderwrapper, specifically the rules for ul.navigation and .navigation li, therefore it would be best for the navigation menu to be outside #sliderwrapper.

Also, though this may be an error that’s arisen from copying your code into the post, spaces need to be added between the attributes in your img elements.

To sum up, it looks like some reworking of HTML and CSS is required, but it would be best to see your slideshow script in action before making any recommendation.

<img src="images/slide1.jpg" width="1280" height="650" alt="derby designs equine marketing"/>
<img src="images/slide2.jpg" width="1280" height="650" alt="mobile web design for equestrians" />
<img src="images/slide3.jpg" width="1280" height="650" alt="equestrian advertising by derby designs" /> 

Hey Victorinox, thanks so much for the reply! Yes, having it on the web would be much easier especially since the img are dynamically added through jquery. You are right though, my parent container is not stating 100% width, which I think maybe causing my issue. Duh.

Using jquery and using position absolute has caused some of my confusion.

Thanks so much for your reply!

Hi Victorinox,

I have it working nicely, but it seems when using the Nivo Slider (jquery plug in to add the slides dynamically) there are quite a few empty divs especially when looking at the sites mentioned above. Is how I simplified it make sense? It is logical to me and works, but wanted your opinion. I simply:

<div id=“slider”>
<a href=“#”><img src="images/slide1.jpg"width="1280"height="650"alt=“Derby Designs an equine web development studio” /></a>
</div>

And

#slider {
position: absolute !important;
z-index: 0;
width: 100% !important;
background-position: center !important;
height: 650px;
}

#slider img {
position:absolute;
top: 0;
left: 0;
}

Why use a wrapper when the slider can be positioned (as seen above) and the slider img is positioned at the top left of that container…I am a bit confused by the use of extra wrappers and containers when you can sometimes specify without them.

Actually a wrapper is needed for the ‘direction arrows’…the direction arrows are within their own container, why on earth would you need a slider wrapper for the direction arrows?