Nivo Slider positioning within an HTML page

Get Started
1

I am new to this site and this is my first post. lol

[B]http://comsalesllc.com/putman/services.htm[/B] - the html page in question. I want to replace the large office image with my nivo slider. I have persistence and passion for web design but this time I am stuck. I’m not sure this can even be done. Any help would be greatly appreciated. btw I just learned about the nivo slider.

[B]http://comsalesllc.com/putman/tabbed%20slider2/nivo-slider/demo/demo.html[/B] - my nivo slider

Thank you in advance for your time.

Ed

2

Hi deepsky_usa. Welcome to SitePoint. :slight_smile:

It shouldn’t be too hard to drop that slider into your page, placing it inside the banner div. But first make that div the same size at the nivo slider (width: 618px).

3

Thanks for taking the time from your busy schedule to reply Ralph. Is this the line of code you are talking about? I changed
<div id=“banner”><img src=“images/building_sm1.jpg” alt=“1729 W Harvard Avenue, Suite 1” width=“580” height=“353” /></div>

to

<img src=“images/building_sm1.jpg” alt=“1729 W Harvard Avenue, Suite 1” width=“618” height=“246” /></div>

Something tells this is not enough. What else?

4

Firstly I would suggest altering some styles in your style sheet:

#page {
  background: none repeat scroll 0 0 #000000;
  margin: 0 auto;
  padding: [COLOR="#FF0000"]40px 0[/COLOR];
  width: 920px;
}

#header {
  background: none no-repeat scroll left top transparent;
  height: 45px;
  margin: 0 auto;
  width: [COLOR="#FF0000"]920px[/COLOR];
}

#banner {
  padding-bottom: 20px;
  [COLOR="#FF0000"]width: 618px;[/COLOR]
}

Then in the HTML, replace the code in blue below with all of the Nivo HTML code (that is, everything inside the id=“slider” div).

<div id="banner">[COLOR="#0000CD"]<img width="580" height="353" alt="1729 W Harvard Avenue, Suite 1" src="images/building_sm1.jpg">[/COLOR]</div>

You will then have to add in the Nivo styles to your style sheet, and add the JavaScript links to your page, as they are on your test page.

E.g.

Place this in the head of the page:

<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />

and this just before your closing </body> tag:

<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

This can be tricky, so more may be needed, but that’s a good start. :slight_smile:

5

Indeed i do appreciate your kind assistance. I have not had any success. I have tried my best to follow your instructions but no luck. If you care to still help I’d be grateful. I really want to learn this. Thanks Ed

6

Can you be a bit more specific about the problem? When you say you’ve not had any success, we don’t know if that means the slider isn’t working, the layout’s gone wonky, or what. The more detail you can provide, the easier it is for us to help. :slight_smile:

7

Yes, it would be really helpful if you could post a test page with the progress you’ve made. Then we can help nudge it into shape. Even if you follow what I posted above and it’s a complete mess, we can then suggest what to do next to fix it. Otherwise our hands are kind of tied.

8

I found a solution called easy rotator. Here’s a link, http://www.dwuser.com/easyrotator/ I wish to thank all of you. I use DW8. Maybe this could help ya’ll.

9

Thanks for posting the link! I’ll add it to my list of 1001 other jQuery slider options. :slight_smile: The advantage of this one (unlike the others I’ve seen) as it seems to build the slider for you rather than requiring code manipulation. Let us know how you get on!

10

Yes this software actually builds everything, go figure.
it renders differently in IE 8 and Firefox8. I see rounded corners on firefox8 and square on IE8.

any ideas?

11

It’s using the CSS3 border-radius property that isn’t supported in IE8 and under. So you either have to accept that, or use a JS workaround, or even just create a separate style sheet for IE and use images (which most people seem to avoid now).

12

Good information but so much more to learn. Can some please tell me why sidebar h2 extends beyond the background? Index page, left side under the words, Location, Hour of Operation, Affiliations, View Larger Map, see; http://comsalesllc.com/putman/index.htm

I’ve tried shortening this jpg from 300 to 200 no luck. Hope I am making sense.

Also regarding the google map, how can I move it left a few pixels?

13

The headings are just filling the width of the sidebar, so you could reduce the width of that a bit. E.g.


#sidebar {
  float: right;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  margin-right: -15px;
  [COLOR="#FF0000"]width: 260px;[/COLOR]
}

Regarding the map, probably the best solution is to wrap it in a div and give the div ole left padding.