WordPress.org

Ready to get started?Download WordPress

Forums

Easing Slider "Lite"
[resolved] Easingslider and image side by side (8 posts)

  1. veix
    Member
    Posted 7 months ago #

    Hi
    I put Easingslider gallery into page's header and aligned it to center. Now I want to put image next to it and align it to right so that they're on same line.

    My header.php looks like this:

    <div class="header-gallery">[Easingslider Lite here]</div>
    <img class="header-logo" src="image.jpg">

    and ctyle.css looks like that:

    .header-gallery {
    	height: 190px;
    	width: 640px;
    	margin: 0 auto
    }
    .header-logo {
    	height: 190px;
    	width: 116px;
    	float: right
    }

    It works perfectly when either Easingslider or image is commented out in header.php. When removing comments image goes to next line.

    I've also tried to use table and align="center" instead of css but nothing helps. So, can anyone please explain what I'm doing wrong here or how to get slider and image next to each other?
    Site is http://www.osanago.eu

    Thanks,
    Veiko

    http://wordpress.org/plugins/easing-slider/

  2. MatthewRuddy
    Member
    Plugin Author

    Posted 7 months ago #

    Hi @veix, sounds like you'll probably need to float both of the elements. Try this HTML:

    <div class="clear">
        <div class="header-gallery">[Easingslider Lite here]</div>
        <img class="header-logo" src="image.jpg">
    </div>

    With this CSS:

    .clear {
        overflow: hidden;
    }
    
    .header-gallery {
        float: left;
    }
    
    .header-logo {
        float: right;
    }

    Should hopefully do the trick :)

  3. veix
    Member
    Posted 7 months ago #

    Thanks for answering @MatthewRuddy
    It really did align them on one line but slideshow is like invisible or something. When looking page's source code it's easy to see that slideshow is there but it doesn't display it.
    You can see it here: http://www.osanago.eu

  4. MatthewRuddy
    Member
    Plugin Author

    Posted 7 months ago #

    Ah, I see what you mean. Try using this CSS instead.

    .clear {
        overflow: hidden;
    }
    
    .header-gallery {
        float: left;
        max-width: 640px;
        width: 100%;
        height: 190px;
    }
    
    .header-logo {
        float: right;
    }
  5. veix
    Member
    Posted 7 months ago #

    Thanks, now slider and logo are both on same line. :)
    Although, there's funny thing that when I changed

    .header-gallery {
        float: center;
    }

    then logo jumped again to next line and was aligned to left. Don't know why it does so but I guess float:left is also OK. :)

  6. veix
    Member
    Posted 7 months ago #

    Little typo. I meant:
    .header-gallery {
    float: center;
    max-width: 640px;
    width: 100%;
    height: 190px;
    }

  7. MatthewRuddy
    Member
    Plugin Author

    Posted 7 months ago #

    That's because 'float: center' isn't a valid value - only 'left', 'right' or 'none' are supported float values :)

  8. veix
    Member
    Posted 7 months ago #

    Ok, thanks for explaining. I'm happy with current situation also. :)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.