SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member deepsky_usa's Avatar
    Join Date
    Dec 2011
    Location
    Southwest Oregon
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nivo Slider positioning within an HTML page.

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


    http://comsalesllc.com/putman/services.htm - 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.

    http://comsalesllc.com/putman/tabbed...demo/demo.html - my nivo slider


    Thank you in advance for your time.

    Ed

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi deepsky_usa. Welcome to SitePoint.

    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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member deepsky_usa's Avatar
    Join Date
    Dec 2011
    Location
    Southwest Oregon
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Firstly I would suggest altering some styles in your style sheet:

    Code:
    #page {
      background: none repeat scroll 0 0 #000000;
      margin: 0 auto;
      padding: 40px 0;
      width: 920px;
    }
    
    #header {
      background: none no-repeat scroll left top transparent;
      height: 45px;
      margin: 0 auto;
      width: 920px;
    }
    
    #banner {
      padding-bottom: 20px;
      width: 618px;
    }
    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).

    Code:
    <div id="banner"><img width="580" height="353" alt="1729 W Harvard Avenue, Suite 1" src="images/building_sm1.jpg"></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:

    Code:
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    and this just before your closing </body> tag:

    Code:
    <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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member deepsky_usa's Avatar
    Join Date
    Dec 2011
    Location
    Southwest Oregon
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,068
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Member deepsky_usa's Avatar
    Join Date
    Dec 2011
    Location
    Southwest Oregon
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deepsky_usa View Post
    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.
    Thanks for posting the link! I'll add it to my list of 1001 other jQuery slider options. 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. #10
    SitePoint Member deepsky_usa's Avatar
    Join Date
    Dec 2011
    Location
    Southwest Oregon
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    http://comsalesllc.com/putman/services.htm

    any ideas?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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. #12
    SitePoint Member deepsky_usa's Avatar
    Join Date
    Dec 2011
    Location
    Southwest Oregon
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The headings are just filling the width of the sidebar, so you could reduce the width of that a bit. E.g.

    Code:
    #sidebar {
      float: right;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 12px;
      margin-right: -15px;
      width: 260px;
    }
    Regarding the map, probably the best solution is to wrap it in a div and give the div ole left padding.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •