Skip navigation
bmontana33
Currently Being Moderated

dreamweaver sc6 fluid grid layouts and nivo slider

Nov 17, 2012 7:48 AM

I have the nivo slider pretty much set up on my home page, with one exception. I have a sidebar to the right of the slider and the slider bullets end up above the sidebar as opposed to below and centered below the slider. If I remove the sidebar and set the slider div to the full width of the page, then the bullets end up where the should be (centered and below the slider).

 

What do I have to do so that the bullets end up centered and below the slider when I have a sidebar to the right of the slider?

 

Thanks.

 
Replies
  • Currently Being Moderated
    Nov 17, 2012 8:24 AM   in reply to bmontana33

    For help with design and layout problems, you need to post a URL to the problem page. Otherwise, you're simply asking others to guess what might be wrong.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 9:50 AM   in reply to bmontana33

    Without the style sheets and images, the screen shot doesn't help much. It's best if you can upload the files to a temporary page. You can take it down after the problem has been sorted out.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 10:22 AM   in reply to bmontana33

    Judging from the code that you have posted here, you have already defined a site in Dreamweaver. To upload the files to a remote server, you now need to define the connection details for the remote server.

     

    You can find detailed instructions on how to do so in the following article: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt6.htm l. It's the final part of a tutorial about creating your first site in Dreamweaver. It should be fairly straightforward, but ask if you have any questions.

     

    I assume that you have a hosting plan on a web server. The hosting company will provide you with the necessary login details.

     

    Rather than put the page in the main website, I suggest that you create a folder called test or temp, and use that as the Root Directory instead of check_cs5 (see Figure 3 in the article).

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 12:13 PM   in reply to bmontana33

    See screenshot.  If your web host told you to use public_html as your root directory, you should put that where I have htdocs/  in my screenshot.

    CS6-remote-site-root-folder.jpg

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 1:02 PM   in reply to bmontana33

    Unless these folders all exist on your server, DW will not be able to find them.

     

    /home/myusername/public_html/test/

     

    To create a folder in Dreamweaver, right click on yourSiteName in the local files panel and select New Folder.

     

    That said, if you can connect to your server with FileZilla, use that to upload your test page.

     

     

             

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 1:26 AM   in reply to bmontana33

    To contain the slider bullets, you need to apply the width and float properties to the slider-wrapper <div> rather than to the slider <div>.

     

    I did a quick experiment with your page at full width, changing the width of the slider-wrapper class to 65% and floating it left. I also changed the width of the slider <div> to 100%. This brought the bullets under control because they're nested inside the slider-wrapper, not the slider.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 7:50 AM   in reply to bmontana33

    The problem is that you have accidentally changed the width of the .gridContainer class on line 169 of layout.css to 65%. I'm not sure what it was originally, but it should be something like 90%.

     

    You have also added a wrapper div around the slider. The wrapper needs to have a width of approximately 65%, and should be floated left.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2012 1:16 PM   in reply to bmontana33

    Sorry but Spry isn't well suited to responsive layouts.  

     

    If you need to keep all menu items on one line AND you have a budget to work with, look at PVII's responsive Tab Panel Magic.

    http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/f inished-page.htm

     

    Or roll your own with one of the jQuery Responsive Menus below.

    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and -tutorials/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 11:07 AM   in reply to bmontana33

    Tables are not a good layout choice in Responsive Layouts because a 5-col table will always be a 5-col table.  On smaller mobile devices, the tables won't fit.

    See screenshot:

    Mobile-Poker.jpg

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 11:45 AM   in reply to bmontana33

    With regard to your "Player of the Year" table, check this out:

    http://css-tricks.com/examples/ResponsiveTables/responsive.php

     

    Also, validate code often during development and fix reported errors.  You're using obsolete HTML tags and attributes that HTML5 can't support.

    http://validator.w3.org/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 22, 2012 9:37 AM   in reply to bmontana33

    #1 CMYK images are for print and not rendered by all browsers. 

    Save your images for the web as RGB.

     

    # 2 Do not use spaces or special characters (^&%$#@) in file or folder names as this may cause problems on the web.  It's ok to use underscores_, hyphens - or dots . between words but no spaces. 

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points