HTML & CSS: Row with image and scrollable text having height adjusted to the image size

11 04 2015

I will show how, using CSS only, to set the height of the text in a row so it never exceeds the height of the image, and then if the long text exceeds the height, make it scroll. The image dimensions may vary and are not known at the implementation phase.

The goal

The thing I need to do is:

Row with height adjusted to the height of the image, with scrollable text

Row with height adjusted to the height of the image, with scrollable text

The solution

Please take a look here: https://jsfiddle.net/an1gsdm0/

I wrapped the whole row in a table-row. The image and the text are the table-cells in it. The text’s table-cell has inline-block div with text inside. You can test it by manipulating the .image class size. Then the text field height will adjust. Here is the code:

HTML:

<div class="container">
    <div id='first' class='img-div'>
        <img class="image" src='http://png-4.findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png'/>
    </div>

    <div class="outer-text">
        <div id='second' class='text-div'>Put a long text here...
        </div>
    </div>
</div>

CSS:

.container{
    display: table-row;
}

.img-div {
    display: table-cell;
    float: left;
}

.outer-text{
    display: table-cell;

    height: 100%;
    width: 190px;
}

.text-div{
    display: inline-block;

    height: 100%;

    overflow-y: auto;
}

To test it for custom various image sizes change the height of the image:

.image{
    height: 190px;
}




Scalable and modular CSS

18 10 2014

CSS can be a mess. It needs to have standards and rules to avoid a mess. Here is a good speech with recomendations to follow:

http://denisejacobs.com/speaking/talks/scalable-modular-css-ftw/

Remember also about the css standards developed during the years of practice in wordpress. I mentioned them here: https://looksok.wordpress.com/2014/10/11/web-development-done-well-wordpress-web-coding-standards/





Web development done well: WordPress web coding standards

11 10 2014

We all know that mess that grows in CSS, JavaScript and HTML files. There is no compilers as in static typed programming languages that will keep you from doing that mess bu there are Clean Code standards.

The team working on files should keep common standard and follow best practices. It is a failure if each team member has his own preferences and style and writes his parts with his own conventions. WordPress recommendation is:

"All code in any code-base should look like a single person typed it, no matter how many people contributed." – Principles of Writing Consistent, Idiomatic JavaScript

WordPress has its standards. Due to its opensource nature these are vital to keep an order in their web templates and sources. I follow most of their recommendations:





JS: infinite scroll examples

30 08 2014

There are few alternatives to implement infinite scrolling web pages, like facebook or twitter.

The site: http://www.sitepoint.com/jquery-infinite-scrolling-demos/ lists the best ones and shows some examples of usage with clues when which solutions will fit, and in which cases will not.

One of the solutions I am going to deploy on karomile.com soon.





karomile.com

9 08 2014

karomile.com was supposed to be a simple in a design but rich in content. This is a karomile’s photo site developed by me, according to her concept and design. After the PayTogether Android app, this is another project in my portfolio – web development is my skill as well (also in much more advanced designs, responsive layouts and JavaScript logic).

Site design is very nice, and makes perfect match with brilliant photos:

 

krmlprtscrn

Technically it is a web page with client side processing, made with HTML, CSS and JavaScript with few JS libraries like Unveil, Masonry, ImagesLoaded (read more here) and Google Analytics, not to mention jQuery :) CSS has media queries to make it responsive for mobile devices.

Site will evolve, since the content will get constantly updated and maybe technically I’d need to respond to it (for example by paging or endless scroll), so don’t be surprised if current site layout does not match the screenshot above :)





Layout items in flexible columns with Masonry

2 08 2014

In one of my projects I needed to layout photos in a grid that will place all photos most effectively with no white spaces between them. The prolem is that photos can have various sizes and proportions.

The Masonry is a javascript library, easy to use that layouts items in columns. Here is how my site looks after applying Masonry:

masonryDemo

In this case I used Masonry with:

– imagesLoaded to have callback when all images are loaded on a page

Unveil to lazy load images when they become visible on page

So sometimes it is a bit tricky, and its drawbacks may be observed – sometimes Masonry unfortunately does not layout items well. But it is quite hard to replicate, so I can recommend Masonry.





Web dev: Responsive image grid (that is not perfect but works)

26 07 2014

Worth noting and well working way to implement photo grid on website, is presented by Ali Jarafian on his website:

http://alijafarian.com/responsive-image-grids-using-css/

The ‘float: left;‘ type of design has few drawbacks in my opinion:

  • One is that you need to calculate the margins carefully and put the calculation result in few places in css (so changing the margin requires change in few places in css file).
  • And the second is that when one of the items is accidentally higher than the rest, the grid will not scale properly – I mean that one grid element will seem to be empty. This is because it will move to next grid cell if it cannot fit to the previous one.

Nevertheless that works. Personally Implement such kind of layouts without <ul> but on divs instead of <li>. This is simply because <li> are not beneficial for me – <div> is enough. I find <li> beneficial when business logic requires to append() or prepend() new items. In my project (static photo gallery) it is not a case.








%d bloggers like this: