SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Two stack images, make responsive?

    Hi guys,

    I have two images.
    One is the background.
    The second image is the arrow head.
    You can see it below,
    skyblue-arrowhead.jpg

    How to make the arrow head image stays on the bottom right corner of the background image?,
    When applying the responsive feature of CSS3?
    When I minimize the Internet Browser...?

    Any advice?
    Thanks in advance.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You could place it absolutely within the container that holds the background image. The question is a bit theoretical until we see your code.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, Warren.

    When you say "one is the background", are you talking about a CSS background-image or are you referring to a foreground image that is in back of the arrow?

    How much area is covered by the "background" image? Does it cover the full page or is it within a container somewhere on the page?... do you have several of these images and you want an arrow in the bottom right corner of each one?

    What determines the height of the "background" image on the page? Foreground images are relatively easy; background-images have no substance... they are like a background-color. We need to know how the size of that image's container needs to be defined.

    In other words, we need more information to understand what you want.

    The picture is good, but it doesn't include the edges of the browser so we can't tell how much of the page it fills.

    Code would help a lot.

  4. #4
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat ;
    Thanks for your reply dude,
    It is here,
    http://myonlinesmallgroup.com/warren/

    Anyway I'm currently experimenting it on http://jsfiddle.net/

    The image is foreground <img>
    The image has width=200px and height=200px
    Quality codes are optimized and tested...
    Click here for inspiration..

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    A couple of things there ...

    - you have the LI set to width 216px, but the image to 200px, leaving a bit of an unsightly gap around the boxes. Better to keep the LI width to 200px and use margins if you want spacing.

    - to set the arrow image to the bottom right corner, just do this:

    Code:
    .img-arrow {position:absolute; right: 0; bottom: 0;}
    Its position will look right when you've done the previous step.

  6. #6
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    This is my experiment looks like so far.
    http://jsfiddle.net/xeon9/e7R5Z/15/

    @ralph.m ;
    Thanks dude for Li advice.
    Quality codes are optimized and tested...
    Click here for inspiration..

  7. #7
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It looks a little fine on Google Chrome,
    But not on MSIE.
    Quality codes are optimized and tested...
    Click here for inspiration..

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by solidcodes View Post
    It looks a little fine on Google Chrome,
    But not on MSIE.
    Which version(s) of IE?
    and what does not look right about it?

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat ;

    I'm using MSIE ver. 10
    The arrow image positioning is not right on MSIE.
    I tried these codes below, but it won't take effect.
    Code:
    		<!--[if IE]>
    			<style>
    			.img-arrow {
    				position: absolute; 
    				right: 40px; 
    				bottom: 8px; 
    				height: 27px; 
    				width: 17px;
    				cursor: pointer;
    			}
    			</style>
    		<![endif]-->
    Quality codes are optimized and tested...
    Click here for inspiration..

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Conditional tags do not work in IE-10.

  11. #11
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat ;
    So what is the solution?

    MSIE is a very, very, very, very, very, very, very, very, very, sick internet browser...
    Quality codes are optimized and tested...
    Click here for inspiration..

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by solidcodes View Post
    @ronpat ;
    So what is the solution?

    MSIE is a very, very, very, very, very, very, very, very, very, sick internet browser...
    Warren, I'm looking at your jsfiddle in IE10 and it looks the same to me as it does in Firefox and Chrome.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by solidcodes View Post
    MSIE is a very, very, very, very, very, very, very, very, very, sick internet browser...
    From IE9 onward it's a pretty reliable browser in terms of CSS ... unless you are trying to do something overly fancy, perhaps. This shouldn't be something IE would have a problem with.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Warren, because I cannot seem to understand the problem, I want you to try this simplified code and tell me if it works.
    Copy this code to a file without changing anything, open it in your browsers and let us know what you see in IE10 and whatever else you have.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>solidcodes</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1176078-Two-stack-images-make-responsive
    Thread: Two stack images, make responsive?
    2013.11.03 22:12
    solidcodes
    -->
        <style type="text/css">
    
    img {
        display:block;
    }
    ul {
        padding:0;
        margin:0;
    }
    .captionli {
        display:inline-block;
        vertical-align:top;
        position:relative;
    }
    .caption {
        background-color:rgba(255,255,255,0.7);
        position:absolute;
        left:0;
        right:0;
        bottom:3px;
        min-height:60px;
        color:#fff;
    }
    .img-arrow {
        width:25px;
        height:25px;
        position:absolute;
        right:1px;
        bottom:1px;
        cursor:pointer;
        z-index:1;
    }
    
        </style>
    </head>
    <body>
    
    <ul>
        <li class="captionli">
            <img class="bgimage" src="http://myonlinesmallgroup.com/warren/images/skyblue.jpg" alt="" height="200" width="200"/>
            <div class="caption">
                <img class="img-arrow" src="http://myonlinesmallgroup.com/warren/images/arrow1.jpg" alt="" height="25" width="25"/>
            </div>
        </li>
    </ul>
    
    </body>
    </html>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes, it should work as others have said unless you are tripping quirks mode in IE10 (no doctype, compatibility mode, X-UA- meta tag etc.)

  16. #16
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat ;
    Thanks dude, I have no problem with the jsfiddle version.
    It is the actual/live site I'm having problem with the arrow head.
    This is what I see in my MSIE ver. 10.
    arrowoverlap.jpg

    As you can see the arrowhead overlapped.
    I don't know why, it works fine on Google Chrome.
    Quality codes are optimized and tested...
    Click here for inspiration..

  17. #17
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Are you guys also using MSIE ver. 10?

    http://myonlinesmallgroup.com/warren/

    Do you see the same arrowhead overlapping?
    Quality codes are optimized and tested...
    Click here for inspiration..

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Firefox is the same as your drawing and its because you are scaling the image with max-width but the parent of the image is an inline-block which has no real width so doesn't get applied in some browsers. I would guess that Chrome is the wrong one here.

    Set the anchor to display:block and the max-width should take effect.

    Code:
    .img-arrow a{
    display:block;
    }


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
  •