WordPress.org

Forums

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

  1. veix
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  7. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

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

  8. veix
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Easing Slider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.