Results 1 to 12 of 12

Thread: Removing space from Slider

  1. #1
    Join Date
    Nov 2006

    Removing space from Slider


    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,


  2. #2
    Join Date
    Dec 2002
    Seattle, WA
    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
    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
    Seattle, WA
    I'm referring to the actual (source) code of the web page.

  5. #5
    Join Date
    Nov 2006
    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,


  6. #6
    Join Date
    Dec 2002
    Seattle, WA
    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
    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
    Behind you...
    In the <style> tag located in the <head> of your page you have:
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  9. #9
    Join Date
    Nov 2006
    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">


  10. #10
    Join Date
    Mar 2005
    Behind you...
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  11. #11
    Join Date
    Nov 2006
    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
    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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13172 seconds
  • Memory Usage 2,978KB
  • Queries Executed 15 (?)
More Information
Template Usage (35):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_html
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (12)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (12)postbit
  • (12)postbit_onlinestatus
  • (12)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates