Solved

Positioning an image using the Zurb Foundation grid

Posted on 2014-01-10
10
1,085 Views
Last Modified: 2014-01-17
I am using Zurb Foundation 5 and having some issues positioning an image within my grid. I have two columns side-by-side. One has a bunch of text and the other an image. When the height of the text is greater than that of the image, I want the image to be positioned to the bottom relative to the height of the text column. To help explain what I mean, I whipped up some graphics here...

Issues with image placement
I've tried fooling around with CSS positioning, modifying the CSS of the grid, and a few jQuery solutions (however, most of them don't work well with responsive grids). I unfortunately haven't been able to position the image the way I want.

Any help would be greatly appreciated. You can check out a simple setup of the above example here... http://jsfiddle.net/9gsGw/
0
Comment
Question by:Adam
  • 5
  • 5
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
http://jsfiddle.net/sGrwQ/1/
<body>
    <div class="row">
        <div id="colLeftText" class="small-6 columns">
            <h1>Lorem Ipsum</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
        </div>
        <div id="colRightText" class="small-6 columns img-test">
            <div id="colRightImg">
             <img src="http://placehold.it/200x200" alt="" />
            </div>    
        </div>
    </div>
</body>

Open in new window

//var h = $('div.row').height();
var h2 = $('div#colLeftText').height();
//alert(h + ' '+h2)
$('#colRightText').height(h2);

Open in new window

body {
    background-color:#c5f2f9;
}

.columns { 
    border: 1px solid #999;  
}

#colRightText{
    
    
}
#colRightImg{
    bottom: 0;
    position:absolute;
    
}

Open in new window

Remember when you run live to place the jquery in a ready function
$(function() {
  // Handler for .ready() called.
});

Open in new window

0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Thanks very much for the solution Scott. I appreciate the quick reply.

However, there are just a couple of issues. Firstly, and I apologize if I didn't mention this in my question, but if possible I'd like to avoid a JavaScript solution. If a user doesn't have JavaScript enabled, do you have any suggestions for a fallback approach?

Also, if you resize your browser, the height of the image column does not resize to match the new height of the text column. My site is responsive so I need the solution to work in a scenario where lets say a user views my site on a iPad and switches from portrait to landscape.

Lastly, although in this example I only show one instance of a column of text and a column with an image, on the site I am working on there are a handful of instances of this on the same page with varying column heights. I am actually building a template so the approach I take needs to be something I can universally adopt to any text/img column scenario.

Anyway, I do appreciate your help. If you have any thoughts on how to tackle some of the points I mentioned, please let me know. If not, I will hold off to see if anyone else has an alternate solution.

Cheers.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I used the full screen mode of jsfiddle http://jsfiddle.net/sGrwQ/1/embedded/result/ and it seemed to work fine when I tried out narrowing the browser.

> if possible I'd like to avoid a JavaScript solution. If a user doesn't have JavaScript enabled, do you have any suggestions for a fallback approach?
Both Zurb and Bootstrap make heavy use of jquery.  If somebody does not have javascript turned on, then many of the features you are using will not work.  The amount of people that do not have javascript turned on is very tiny. (The amount of people that may have java turned off is another story).  Just about every modern site today makes heavy use of javascript so I think you are good.  

The only way I can think of to get out of using javascript for this solution is to fix the hight of all columns.  However, because you are using a responsive layout, that would be difficult since  the width changes, so will the hight in many cases.  

Javascript runs after the page is rendered so it is the only way I know of to get the height when you have not specified it in css.  

If you want to specify the hight in your css of both the outer left and right columns, then you don't need the jquery portion.

>Also, if you resize your browser, the height of the image column does not resize to match the new height of the text column.
See the updated http://jsfiddle.net/9aHCB/1/embedded/result/ with jquery below
//var h2 = $('div.row').height();
var h2 = $('div#colLeftText').height();
//alert(h + ' '+h2)
$('#colRightText').height(h2);
$( window ).resize(function() {
    h2=$("#colLeftText").height();
    
   $( '#colRightText').css( 'height', h2+'px' );
});

Open in new window


> I am actually building a template so the approach I take needs to be something I can universally adopt to any text/img column scenario

You will need to plan out your ID's and Classes carefully.   You can only have one ID per page but you can have multiple classes on the same page.

The code I used incorporated an ID. You can change out for a class if you like.

To be honest, this seems like an odd request.  The natural flow of the browser is from top to bottom, left to right.  Are you sure you don't really need more of a floating image that always stays at the same point in the browser?
0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Thanks for getting back to me Scott.

I hear what you're saying for the most part. However, while Foundation is built with a bunch of added JavaScript functionalities, it is also setup to have a number of fallbacks so that you're site doesn't blow up when JavaScript is disabled (I confirmed this by disabling JS on my site using Chrome Dev Tools).

I also agree that there is probably a small percentage of people that will have JS turned off (and as a result, I will probably end up taking the JS route). But I was really hoping I could figure it out without having to resort to taking that approach. I always prefer to avoid adding any major styling changes using JS without a fallback.

And just to clarify, while I'm not an advanced developer, I'm fairly intermediate at front-end dev but I guess more of a specialization in design. The reason I need the image to stick to the bottom is based on the design I've been handed. For example, the two column scenarios that I'm working with involve one column with text and one column with an image of a person where they are cut-off at the bottom. So I want the bottom of that image to line-up to the column so it doesn't look like I have a bunch of cut-off people floating around. Normally, I would just add the image to the background and position it but as I want the image to resize in relation to the content, I figured the easiest approach would be to put them in the column next to the text and let the grid work its magic.

In case that didn't really make much sense, here is an example of what I mean...

ExampleAnyway, I'll keep playing around. If you have any other ideas or alternate approaches, I'm definitely open to them. Thanks again for your help and input. Greatly appreciated.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
That picture really helps because I think the tactic you want is much different than what I expected.

I am short of time right now, but I think this is what you want http://www.cssstickyfooter.com/

I did search for stickyfooter zurb and found http://foundation.zurb.com/forum/posts/629-sticky-footer.  I have been using bootstrap a lot more and there is a sticky footer and header for that built in.

If the entire black area and image need to stay at the bottom I think that will could be easier to work with.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 1

Author Comment

by:Adam
Comment Utility
Sorry Scott but I think my example may not have conveyed what I intended it to. The image was meant to just be a screen shot of a particular section on my page design. The black area is actually a section similar to the white section with image/text—I just cut it off for the sake of the example. But if it helps, I whipped this together super quickly to hopefully clear things up...

Another example.
So I think you're initial understanding of what I'm looking to achieve is still accurate. Sorry for the confusion.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
I tried a bunch of crazy complex options and then came back to something simple using a background image for the row.  What I would change to this solution to meet your needs is using the same media queries as foundation to place the background image so it does not bleed to the wrong side.  
http://foundation.zurb.com/docs/media-queries.html
// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */

Open in new window



Working sample http://jsfiddle.net/Y76wD/1/embedded/result/
 <div class="row bg-right">
        <div class="small-6 columns">
            <h1>Lorem Ipsum</h1>
            <p>xPellentesque habitant morbi tristique senectus et netus et  felis.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
        </div>
        <div  class="small-6 columns dummy">
           
        </div>
    </div>
    <!-- row -->
      <div class="row bg-left">
        <div class="small-6 columns dummy">
         
        </div>
        <div  class="small-6 columns">
              <h1>Lorem Ipsum</h1>
            <p>xPellentesque habitant morbi tristique senectus et netus et  felis.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
        </div>
    </div>
      <!-- row -->
      <div class="row bg-right">
        <div class="small-6 columns">
            <h1>Lorem Ipsum</h1>
            <p>xPellentesque habitant morbi tristique senectus et netus et  felis.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
        </div>
        <div  class="small-6 columns dummy">
           
        </div>
    </div>

Open in new window

body {
    background-color:#c5f2f9;
}

.columns { 
    border: 1px solid #999;  
}


/* wrap below in a media query to match each of foundation's  */

.bg-right{
    background-image: url("http://placehold.it/300x200");
    background-position:right 10% bottom;
    background-repeat:no-repeat;
    
}
.bg-left{
    background-image: url("http://placehold.it/300x200");
    background-position:left 10% bottom;
    background-repeat:no-repeat;
    
}

Open in new window

0
 
LVL 1

Author Comment

by:Adam
Comment Utility
Sorry for the delay Scott. I was thinking to myself "why didn't I think of that". But unfortunately, I remembered why I didn't take that approach. In my JSFiddle example, I set the columns to "small" so that they maintain their layout. However, on my site, they are actually set to "medium". So for tablets and smaller, the two columns would collapse into single columns—meaning the images would move to underneath the text. You can check it out here: http://jsfiddle.net/Ctk7p/.

So there are two issues with your suggestion. First, the image is no longer responsive in this case. I guess I could use media queries to swap out different sized background images depending on the size of the browser. But as this is a template, maintenance on something like that might be quite the hassle.

The other issue is that when the columns collapse, the image will now appear behind the text rather than underneath it. I could set padding to the bottom of the div avoid overlap of the text and image but each section on my page will require different paddings based on the size of the image—which again, can also be a bit of a hassle.

Anyway, the suggestions you've brought up are all potential solutions. Using the Foundation framework though I was hoping that there was a very simple and universal approach to tackling this. I'm going to keep at it a bit longer but will probably have to settle for one sooner than later. Thanks again for all your efforts Scott!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I think I have given you a good base to go on.  When you are working with a responsive layout, you have to plan out your page for each viewport.  

>So for tablets and smaller, the two columns would collapse into single columns—meaning the images would move to underneath the tex

You will need to account for that.  When the viewport goes to a smaller width and the columns stack, you will simply want the image to go full width of the column.  

If you need, you can use http://foundation.zurb.com/docs/components/visibility.html

Try and work with the foundation library and not work around it.

Good luck on your  project!
0
 
LVL 1

Author Closing Comment

by:Adam
Comment Utility
Thanks again.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now