www.webdeveloper.com
Results 1 to 12 of 12

Thread: Removing space from Slider

  1. #1
    Join Date
    Nov 2006
    Posts
    231

    Removing space from Slider

    Hello,

    I am having the toughest time trying to figure out which CSS attributes to use if I want to eliminate the excess space that surrounds the slider I am using on my webpage which can be seen HERE. Its especially noticeable on Ipads and hand-held mobile devices. Any help would be greatly appreciated.

    Thank You,

    Ken

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    A good starting point would be to strip all the white-space out of your webpage(s). This way you can rule out that as a possible cause. You can do this via scripts or programs before uploading, or if you use server-side scripting (i.e. PHP, ASP, perl, etc.) you can do this at request time (either for every request or use caching; one-time). I typically minify all my CSS and JavaScript files before uploading to my server. And use PHP to minify those as well as my web pages.

  3. #3
    Join Date
    Nov 2006
    Posts
    231
    Thank You for the reply. I was wondering which white area you are referring to?.....All I see is black. Its even worse when the web page is visited using a smart or Iphone device.

  4. #4
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    I'm referring to the actual (source) code of the web page.

  5. #5
    Join Date
    Nov 2006
    Posts
    231
    There is nothing left to do in the HTML document. So, my question is would I have to define certain attributes with the CSS file for the Slider or the CSS file for the HTML page?.....the space between the menu bar and the slider is way too much available space that has no reason for being there. Any help on this is greatly appreciated. HERE is the webpage.

    Thank You,

    Ken

  6. #6
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Quote Originally Posted by ASPSQLVB View Post
    There is nothing left to do in the HTML document.
    um... checked for validation errors. you have an illegal character(s) on your page (and in a comment) I assume it's a copyright symbol, use © or the proper entity in its place. remove all commas in img elements, you don't use commas to separate attributes.

    then re-validate and fix errors with http://validator.w3.org/ until everything is fine. typically validation errors can do weird things to web page.

  7. #7
    Join Date
    Nov 2006
    Posts
    231
    Thank You ShrineDesigns. I cleaned up the page and the HTML document was checked successfully. The black space between the menu and the slider is still there.....any suggestions my friend

  8. #8
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    In the <style> tag located in the <head> of your page you have:
    Code:
    #galleria{height:720px}
    This sets an absolute height for your gallery, and thus on smaller resolutions (mobile devices), the height remains at 720 pixels, even though the image inside shrinks to fit the width of the page. The height needs to be adjusted as well if you hope to remove the additional space added above and below the gallery image.


    Logically, the best solution for this would be to use media queries to set the height of that <div>, since the script controlling it automatically sets the height of other elements inside based on the height of the galleria <div>. You can't use percentage based heights because of the script, so an absolute value is needed, and the only way to have the absolute value change with just CSS would be media queries.

  9. #9
    Join Date
    Nov 2006
    Posts
    231
    LOL...that was the issue. Is it possible to link the images in the slider?.....should be simple but has been a big challenge. Here is the HTML
    <a href="http://bigfourcarp.com/Keene-Innovations/galleria/themes/classic/images/BlueUrban_Example4.jpg">
    <img src="http://bigfourcarp.com/Keene-Innovations/galleria/themes/classic/images/BlueUrban_Example4.jpg" data-big="http://bigfourcarp.com/Keene-Innovations/galleria/themes/classic/images/BlueUrban_Example4.jpg" alt="Sample 1 Webpage">

    </a>

  10. #10
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    Do you just want to link the image to itself? I'm trying to understand what purpose this would serve in case there's possibly a better way of going about this. In any case it's really a Galleria functionality thing more than anything else. The Galleria script creates the gallery based on the images and thus it ignores the <a> tag you've appended as a link to the image.

    You can have the images open in a lightbox when clicked, but I'm not sure if that helps whatever purpose you have for linking the images.
    The Galleria documentation has a simple note on how to do that here. There's also a way to manually do this via API mentioned here (using the method .openLightbox()).

    But as far as actually opening up the direct image file itself (in the same tab or a new one), my guess is it'll take a little bit of custom scripting since I can't seem to find anything in the Galleria documentation about it. Perhaps using the Events part of the API (documented here), you could use the imageTarget property (which is present after a number of events) to get the HTML <img> element that gets generated when an image is loaded in the Galleria script, and then just get the .src value (which shuold be the full URL to the image). From there you could open a new tab with this URL or change the location of the current tab/window.

  11. #11
    Join Date
    Nov 2006
    Posts
    231
    I just wanted to click on any of the images in the slider which will then send the user to a separate web address.

  12. #12
    Join Date
    Sep 2012
    Location
    Germany
    Posts
    22
    Quote Originally Posted by ASPSQLVB View Post
    I just wanted to click on any of the images in the slider which will then send the user to a separate web address.
    add an anchor tag inside of gallery images

    and gallery image as child?

    HTML Code:
    <a href="#"><div class="galleria-image" ...></div></a>
    and update href on each slide?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles