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:
-
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.”
-
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
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” />
<script type="text/javascript">
Script loads here and full jquery in head section
</script>
</div><!--end slider-->
<div id="navwrapper">
<div id="nav">
<ul class="navigation navleft">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
</ul><!--end navleft-->
<ul class="navigation navright">
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul><!--end navright-->
</div><!--end nav-->
</div><!--end navwrapper-->
</div><!--end sliderwrapper-->
</body>
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