Header layout


#21

For 450:350, divide both numbers by the same number. Keep doing thus until you can’t go any further. If you use 10, you end up with 45:35. Then you can divide by 5 to get 9:7.


#22

It’s been a long time since I’ve been in a math class, so my terminology may be off, but I think if you search for “factorization” and “prime numbers” it could help.

My admittedly clumsy description of the process would be:

Remove common factors until only primes remain. The smallest possible integers with the same ratio will be the product of their remaining primes.

For some numbers I have little trouble, I know even numbers are divisible by 2 and multiples of 5 are easy for me to spot. Other primes such as 3, 7, 11, etc. are not so easy for me to see at a glance.

For example, I have no idea what the ratio for 457 459 might be. For only a pixel off each I would simply make it a 458 square and be done with it even though it would be a (IMHO, acceptable) distorted image.

What would be an acceptable amount of distortion would depend on the image and the beholder, But keeping the displayed ratio as close as possible to the images ratio would not be a bad thing. Any more than a pixel or three my preference is to crop or letterbox.


#23

In math notation, the term “width/height” and the fraction “450/350” look like this: (the dashes represent a solid line)

width  =  450
-----     ---
height =  350

rule of math: any number divided by itself equals one, therefore:

 10
 --   =  1
 10

more math: reducing the fraction to its smallest size in two steps:

450     10     45
---  ÷  --  =  --
350     10     35

 45     5     9
 --  ÷ --- = --- 
 35     5     7

informal notation

 9      width
 -  is  ------  reduced, which represents an aspect ratio of 9:7
 7      height

#24

Thanks Ron. Can you tell me why do we need aspect ratios in this layout? How do we use/apply them.


#25

I looked only at the first, second and last of the six images. The three I looked at all have ratios of approximately 3:2

To get those layouts, you need to put the images into containing elements. If the containing elements to not have the same aspect ratio as the image within it the image will either be distorted, cropped, or letterboxed. Else, if you wanted to maintain images with varying ratios then the layouts would need to adapt.

It’s a design decision.


#26

We need to pay attention to the aspect ratio of the images in this layout because because images with an equal aspect ratio is the impression that your “make believe” layout gives and for the sake of simplifying the introduction to flex I did not include additional code that could crop images with inconsistent aspect ratios into fitting into the boxes.

When scaled up or down, foreground images maintain their native aspect ratio unless CSS forces them to distort. The easiest way to keep the areas occuplied by the images equal is to start with images that are the same aspect ratio then they will always occupy the same space as their mates when scaled up or down in a responsive page.

If the aspect ratios do not match then the images will be distorted, cropped, or have white space around them. Which ever you choose may require additional CSS.

Again, let me repeat that my demo uses the least necessary flex code to introduce flex as a worthwhile replacement for inline-block while it accomplishes the task that you have demonstrated with your “make believe” layout.

Edit…

Go back to the flex code that I posted in #13.
Enable that last image.
Replace main > div with the following:

main > div {
    flex-basis:33.33%;  /* similar to width except more flexible */
    display:flex;  /* flex items can be flex boxes, too. */
    align-items:center;  /* Added to vertically center images within each box at their native aspect ratios. */
    padding:3px;  /* padding around the image is best assigned to its parent container */
    outline:1px dashed red;  /* Added to show image containers */
}

Notice the white space over and under the right two images in the top row. (wide desktop). This is because the first image has a taller aspect ratio than the others.


#27

I’ve tried flex version of the page with thumb images width=“300” height=“225” from my mock up for desktop.
here’s what I got http://buildandtest.atspace.cc/
I now have to figure it out how to make them three columns…

inline-block verson css is not working for me for some reason with same images…so unable to compare it to flex version…


#28

Sergiy, there aren’t too many times in CSS that are black and white (right or wrong), but this is one of them where seemingly little things are important.

The “Old box sizing” method plus the “inheritence” method together is WRONG.

* {box-sizing: border-box;}  /* the "wild card" selector here is WRONG */

*,*::before,*::after {
  box-sizing:inherit;
}

“Universal Box Sizing with Inheritance” is RIGHT:

html {box-sizing: border-box;}  /* the "html" selector here is RIGHT */

*,*::before,*::after {
  box-sizing:inherit;
}

For more information, please see:
https://css-tricks.com/box-sizing/

Please make this one change only to the example code that you linked to and let us know what happens. smile


#29

Hi Ron,

Thanks for catching that…was probaly leftover from my old code which I did not replace.
I’ve change the code in flex version. Please take a look at my test link in post # 27.

As to inline-block version I think whats happenning is that this rule just stretches my 300 by 225 thumbs across the container occupying the whole width…

main img {
  display:block;
  width:100%;
  height:auto;
}

#30

Looks good, Sergiy :slight_smile:

Dunno. The snippit of CSS does not reveal that there should be a <div> (a container) between the main and img elements. That <div> container should have a width of 1/3 of the width of the main container assigned in CSS (therefore, three images per row), 1/2 of the width of the main container assigned in CSS (therefore, two images per row), or the default width of the page assigned in CSS (therefore, one image per row) via media queries.

The HTML in this demo is essentially the same as the HTML for the flex version. The CSS makes the difference.

Copy this code to a new file and open it in your browser. The images are contained in inline-block boxes, not flex boxes and not table-cells, just inline-block boxes like the code in post #15. Also, just like the demo “working page” included in post #15, this does not give any attention to the header… only the main “thumbs”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/inline-blocks-1.css">
    <!-- <link rel="stylesheet" href="css/style-inline-block.css"> -->
    <title>inline-blocks-2</title>
<!--
https://www.sitepoint.com/community/t/header-layout/305103
810311 (Sergiy)
2018.10.02
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    font-size:100%;
    color:#999;
    margin:0;
}
header,
footer {
    background-color:#333;
    padding:1rem 0;
}
header > div,
main,
footer > div {
    width:94%;
    max-width:1200px;
    margin:0 auto;
    outline:1px dashed green;  /* TEST outline. To Be Deleted. */
}
main {
    display:table;  /* required to eliminate space between inline boxes */
    width:100%;     /* required */
    background-color:#bdf;
    border:2px solid transparent;  /* space around inside edge of table */
    font-family:sans-serif;  /* required */
    word-spacing:-.5em;      /* required */
    text-align:center;
    margin:0 auto;
}
main div {
    display:inline-block;
    vertical-align:top;
    width:33.33%;
    word-spacing:0;  /* required to restore normal word spacing */
    border:2px solid transparent;  /* space around outside of images */
}
main img {
    display:block;
    width:100%;
    height:auto;
}
@media screen and (max-width:900px) {
    main div {width:50%}
}
@media screen and (max-width:500px) {
    main div {width:100%}
}
    </style>
</head>
<body>

<header>
    <div>
        <div class="logo">
            <img src="images/test-logo.png" alt="site logo" width="110" height="100">  <!-- It is good practice to include the actual dimensions of each image even if changed in CSS. -->
        </div>
        <h1>Lorem Ipsum</h1>
        <nav>
          <ul>
            <li><a href="page-1.html">menu-1</a></li>
            <li><a href="page-2.html">menu-2</a></li>
            <li><a href="page-3.html">menu-3</a></li>
          </ul>
        </nav>
    </div>
</header>
<main>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
<!--
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
-->
</main>
<footer>
    <div>&copy; Lorem Ipsum. Copyright 2018.</div>
</footer>

</body>
</html>

Never forget that details matter. teacher


#31

Sorry Ron should I modify that selector and add a div in-between main and img…?


#32

You should not need to modify the CSS. I am just reminding you that a snippit of CSS alone does not reveal how the HTML is built nor what other elements may be in the picture.

I can tell you that the code that I wrote for you includes a div wrapper around each image.

<main>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
    <div><img src="https://via.placeholder.com/600x400/888888/ffffff" alt="" width="600" height="400"></div>
</main>

And that the CSS that affects the images includes

main {
    display:table;  /* required to eliminate space between inline boxes */
    width:100%;     /* required */
    background-color:#bdf;
    border:2px solid transparent;  /* space around inside edge of table */
    font-family:sans-serif;  /* required */
    word-spacing:-.5em;      /* required */
    text-align:center;
    margin:0 auto;
}
main div {
    display:inline-block;
    vertical-align:top;
    width:33.33%;
    word-spacing:0;  /* required to restore normal word spacing */
    border:2px solid transparent;  /* space around outside of images */
}
main img {
    display:block;
    width:100%;
    height:auto;
}

plus the media queries for smaller widths.

The snippit that you posted does not tell the whole story; therefore, I cannot confirm or disagree with your presumption.


#33

got it. sorry for the confusion. will try run it once I have access to my PC. at work right now


#34

Hi Ron, your inline-block code is working. Now I can compare both versions. Your flex version “feels” more fluid. So you were right - flexbox is a better decision for this type of layout. But your inline-block version is a good learning opportunity. I have couple of questions:

  1. How did you arrive at the width: 94% and max-width:1200px ?
header > div,
main,
footer > div {
    width:94%;
    max-width:1200px;
    ............
}
  1. Is it normal for display: table to remove space between its children?
main {
    display:table;  /* required to eliminate space between inline boxes */ 
  1. Also I like the dimensions of the thumbs in inline-block version. In flex version they appear a bit wider and shorter. CSS shows same width values in both versions though… main > div and main > img 33.33% and 100%; I am just wondering if its possible to tweak flex version so they appear same dimensions as in inline-block…

#36

I pulled those numbers out of the air. They approximate the “look” of your page but work better because the width of the content is not narrowed prematurely.
Experiment. Change those values to something different and see how the layout behaves.

 

No. The techniqe requires the five components listed as “required”

main {
    display:table;  /* required to eliminate space between inline boxes */
    width:100%;     /* required */
    font-family:sans-serif;  /* required */
    word-spacing:-.5em;      /* required */
}
main div {
    display:inline-block;  /* expected */
    width:33.33%;  /* Width of *one* image box.  eg: 20% (5 across), 25% (4 across) or 33.33% (3 across).  Media queries are used to change this width (the number of image boxes in a row) at narrower browser window widths.  */
    word-spacing:0;  /* required to restore normal word spacing in the inline-boxes. */
}

(For clarity, the properties that do not directly affect space between inline-boxes have been deleted.)
Experiment. Change the width value from 33.33% to 20% or 25% and see how it affects the desktop view.

 

The only significant difference between the image layouts is the aspect ratio of the images. As you noted, the CSS is the same. So, look at the HTML to find the difference.
The aspect ratio of an image is determined by the dimensions of that image.

The images used in the flex layout are 300px wide by 225px tall which means they have a 4:3 aspect ratio.
The images used in the inline-block are 600px wide by 400px tall which means they have a 3:2 aspect ratio.
Experiment. Change the dimensions of the images and see what happens to either layout.


#37

thats an interesting technique. I tried changing width to 20% and 25% as you suggested it does change the layout. I also tried commenting out the negative word-spacing or replacing it with a diffirent value and there was no change in the layout. can’t figure that one…:slightly_smiling_face:


#38

I will be moving forward with flex layout. Will provide you with update later.
Thanks Ron.


#39

Hey instead of using this tables why cant you use owl carousel it is very simple and it actually saves your time.


#40

@810311, please permit the following wording change.

 

More descriptively, changing the width value of the image boxes to 20% should display 5 images per “row”, a width value of 25% should display 4 images per “row”, a width value of 33.33% displays 3 images per “row”, a width value of 50% displays 2 images per “row”, and a width value of 100% displays 1 image the full width of each per row. (Instead of saying “it works”, I have described what I see happening.)

The purpose of the negative word-spacing is to negate the white space nodes between the inline-block boxes. The view at a desktop width (1200px or wider) should show 3 images per row. Without changing the width of the browser window, IF you delete or comment out the negative word spacing, main {word-spacing: -0.5em;}, the number of images per row should change from 3 to 2, the width of the images will not change, and you will see lots of white space space between them.
A characteristic: IF you increase the value of negative word spacing to a larger negative value than is needed, there should be no change in the spacing between the images. I usually use -0.5em.

This technique was first discussed by @PaulOB in his “Test Your CSS Skills Number 35”.
CSS - Test Your CSS Skills Number 35 - inline-block CSS challenge.
There have been other discussions more recently.

Please NOTE that I have talked about inline-blocks because you reported no change in the appearance of the page when changing the -0.5em value (the negative word-spacing technique).

You should have seen this:

 
As you have discovered, nowadays flex is the better choice!


#41

understood. will try to provide more info about the behavior I see next time.