SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Thread: CSS Div issue

  1. #1
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Div issue

    http://www.msiatlanta.com/backstage/...SIA/index.html

    I have a gallery that I got from Code Canyon which works well. But when inserting it into another div layer it stops working. I see the javascript code in the header points to .container, but since its also inside another div not sure if something needs to be changed. Could I get some help on this small issue? thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb4 View Post
    when inserting it into another div layer it stops working.
    Which is the new div, and why are you adding it?

    I see the javascript code in the header points to .container
    Where's that? I don't see it.

  3. #3
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Which is the new div, and why are you adding it?



    Where's that? I don't see it.

    The new div it is in is .conatainer #homeBanner - This is how I have my site laid out.

    It's in the header Under the javascript.


    Code HTML4Strict:
    <script type="text/javascript">
        	$(document).ready(	
    			function() {
    				$(".container").wtRotator({
    					width:878,
    					height:300,
    					button_width:24,
    					button_height:24,
    					button_margin:5,
    					auto_start:true,
    					delay:5000,
    					play_once:false,
    					transition:"fade",
    					transition_speed:800,
    					auto_center:true,
    					easing:"",
    					cpanel_position:"inside",
    					cpanel_align:"BR",
    					timer_align:"top",
    					display_thumbs:true,
    					display_dbuttons:true,
    					display_playbutton:true,
    					display_numbers:true,
    					display_timer:true,
    					mouseover_pause:false,
    					cpanel_mouseover:false,
    					text_mouseover:false,
    					text_effect:"fade",
    					text_sync:true,
    					tooltip_type:"image",
    					lock_tooltip:true,
    					shuffle:false,
    					block_size:75,
    					vert_size:55,
    					horz_size:50,
    					block_delay:25,
    					vstripe_delay:75,
    					hstripe_delay:180			
    				});
    			}
    		);
    </script>

    at the very top of the code it says that. So not sure if this is a CSS issue or javascript. Thanks.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You have this in your JS:

    Code:
    $(".homeBanner").wtRotator({
    But the div has an id, not a class, so try this:

    Code:
    $("#homeBanner").wtRotator({

  5. #5
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. That didn't work...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    With things like this, I find that you need to install the code as received, and then make minor adjustments and test at each stage. Then if something goes wrong, you know where the trouble started. There are some styles in there hiding the content, but that doesn't seem to be the whole story.

  7. #7
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    With things like this, I find that you need to install the code as received, and then make minor adjustments and test at each stage. Then if something goes wrong, you know where the trouble started. There are some styles in there hiding the content, but that doesn't seem to be the whole story.

    Yea I am going back through now and trying to test things one by one to narrow it down. Having no luck yet though. The test page that came with the gallery, when I edit it and put the gallery into another div it works fine. So it's only when I'm putting it into my new page..

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb4 View Post
    Nope. That didn't work...
    All the same, you are calling on a class that doesn't exist, so might as well make it an id.

    You also call on the jQuery library twice, which is a mistake. Not sure if that messes anything up, but at least remove the second link to the library. It could cause problems to call it again—especially after you've cited it already. If nothing else, it's twice as much code to download.

  9. #9
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    All the same, you are calling on a class that doesn't exist, so might as well make it an id.

    You also call on the jQuery library twice, which is a mistake. Not sure if that messes anything up, but at least remove the second link to the library. It could cause problems to call it again—especially after you've cited it already. If nothing else, it's twice as much code to download.

    I changed it to a class. But I also changed the js just now back to .container because thats how it came when I downloaded it. Also where am I calling on the jquery library twice? Can't seem to find that...

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb4 View Post
    where am I calling on the jquery library twice?
    In the <head> you have this:

    Code:
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    and then a little further down this:

    Code:
    <!-- jQuery Slideshow for Partners -->
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    So, two versions of jQuery. Just use one, and put it up above any other jQuery code.

  11. #11
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    In the <head> you have this:

    Code:
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    and then a little further down this:

    Code:
    <!-- jQuery Slideshow for Partners -->
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    So, two versions of jQuery. Just use one, and put it up above any other jQuery code.
    Oh ok I see that now. So I can use the latest one and they both would work? I was under the impression you needed to use the library that the script was written for. I have another slideshow as you can see in the third grey box. That's what the other one is for. So just delete it and use one?

  12. #12
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also here is the gallery working in the page I got it from Codecanyon,

    jQuery Banner Rotator

    See it works here. I copied and pasted everything I needed.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb4 View Post
    So I can use the latest one and they both would work? I was under the impression you needed to use the library that the script was written for.
    Generally yes, it should be fine to update to the latest script. Normally it's backward compatible—at least in my experience, although I've seen a minor break once.

  14. #14
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After going back through and trouble shooting it looks like I figured it out. Working fine, now just need to customize it. Thanks for your help.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Great, glad it's on the way. Not sure if you've come to this yet, but the social buttons on the right are a bit messed up at this stage. See screen shot.
    Attached Images Attached Images

  16. #16
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser are you on? I was making changes just now. Could you try taking another look?

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    On a Mac, and it's the same in all browsers. It was like that before—just didn't want to distract you. I'd prefer a CSS solution, but an easy fix is to add a <br>:

    Code:
    GET SOCIAL UPDATES FROM SIA<br>
    <img height="32" width="32" alt="Southern Insurance Agency Facebook" src="http://www.sitepoint.com/forums/images/social/facebook_32.png">
    <img height="32" width="32" alt="Southern Insurance Agency Twitter" src="http://www.sitepoint.com/forums/images/social/twitter_32.png">
    <img height="32" width="32" alt="Southern Insurance Agency LinkedIn" src="http://www.sitepoint.com/forums/images/social/linkedin_32.png">
    EDIT: sorry, not true: not all browsers, but I first noticed in in Firefox.

  18. #18
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    On a Mac, and it's the same in all browsers. It was like that before—just didn't want to distract you. I'd prefer a CSS solution, but an easy fix is to add a <br>:

    Code:
    GET SOCIAL UPDATES FROM SIA<br>
    <img height="32" width="32" alt="Southern Insurance Agency Facebook" src="http://www.sitepoint.com/forums/images/social/facebook_32.png">
    <img height="32" width="32" alt="Southern Insurance Agency Twitter" src="http://www.sitepoint.com/forums/images/social/twitter_32.png">
    <img height="32" width="32" alt="Southern Insurance Agency LinkedIn" src="http://www.sitepoint.com/forums/images/social/linkedin_32.png">
    EDIT: sorry, not true: not all browsers, but I first noticed in in Firefox.

    I was going to use that temp. What would be a proper css way to do that? If you don't mind when you have a chance could you show me? <br> will work for now. But it's weird I don't see that on a PC in any browser, IE, Firefox, Chrome...

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Browsers each render text a bit differently, so you can't rely on with width of the text to push those images down. I guess there's nothing really wrong with the <br>. I prefer not to have raw text in a div, though. I normally use a <p>, but others disagree with that. One thing you could do instead is just reduce the width of the div a bit (and maybe adjust its position a little also to make up for it not being 100% wide.

  20. #20
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Before you even mentioned it I did <p>. I don't like using <br> too much. Seem to work now?

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yep, working now. If the text and buttons are too far apart, you can remove/reduce the <p> margins in that div.

  22. #22
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks for your help again!

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Your client login button has dropped to the next line in Firefox.chrome and safari on the PC and is missing in Ie8 and broken in IE7.

    You can't really make elements just happen to fit by virtue of their font-size and padding because the width f fonts varies greatly between browsers. Firefox seems to be 5 or 6px too big.

    You can offset this by letting the last anchor element be display:block and text-align:center and no side padding like this:


    Code:
    #mainMenu li.mainlast a {
        float:none;
        display:block;
        white-space:nowrap;
        padding:10px 0;
        text-align:center
    }
    That will soak up the various difference between browsers.


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
  •