Flexbox vs Inline-Block

HTML & CSS
21

@coothead,

This time I think it’s you. :wink:

I just tried the page and thumbnails I uploaded on my notebook, which apparently runs Windows10 Home - who knew? - and looked at things in Edge and IE, and things were fine.

Something is fubared on your computer.

And to that link regarding PX vs EMs…

I obviously like REMs, but computer manufacturers don’t sell things by EM sized monitors as duly noted in your comments about your “1366 X 768” computer.

So is there some chart that translates monitor resolution and pixels into EMs?

When it comes to things like paragraphs, EMs make sense. But when trying to size a box, PXs are more intuitive to me.

I’ll gladly switch to an all EM mentality, but I need help in visualizing things in EMs.

22

Don’t confuse monitor pixels with the use of pixels within HTML & CSS .
There is no need for theory, in CSS pixels don’t scale.

Source:-

Pixels Are Dead: Why You Should Stop Using Pixels In CSS

I am now back on Linix Mint OS and here is a Vivaldi screenshot at 84.94em…

vivaldi
vivaldi1366×768 91.3 KB

I really don’t think that my computer is fubared. :unhappy:

You may be interested a script that can be run temporarily in a
page and will then display it’s width in ems.

em-width-display.zip (1.1 KB)

coothead

23

So what is the supposed issue, because I cannot create it in macOS or Windows10 or on Firefox, Chrome, Brave, IE or Edge on laptop, desktop, or mobile…

24

Hi there UpstateLeafPeeper,

I downloaded your attachment from post #15 again and retested the page.

It now displays as you have always insisted that it should.

I must have messed up the code in some way when adjusting the image paths. :eek:

I apologise for the distress and confusion that I must have given you.

coothead

2 Likes
25

Looks like I can cancel that order I was placing on eBay for a used desktop running Linux Mint with Vivaldi!! :biggrin:

Glad I made a small step forward…

26

I seem to be making some big steps backwards. :unhappy:

Senile dementia may be starting to kick in. :eek:

coothead

27

@coothead,

We still love ya… :wink:

Is it fair to assume that testing my code on a Retina MacBook Pro is sufficient? That is, I assume the resolution on my laptop competes size wise with most standard desktops, unless a person has a really big, hi-def monitor.

29

@UpstateLeafPeeper,

did you try the em-width display utility?

coothead

30

I checked on the CSS used to display the books and was amazed at the script involved! I was convinced that the CSS could be drastically reduced…

…because CSS is cascaded from the top down and most tags are either blocks or inline elements.

I started at the top outer book div and stated modifying.

I rewrote the block and used this method:

  1. created a book class
  2. added the image and resized
  3. added the h2 tag with text
  4. created a .hhh {display: none;}
  5. added the remaining text all in divs with the hhh class
  6. added background colours
    a. .bga {background-color: aqua}
    b. .bgl {background-color: lime}
    c. .bgr {background-color: #fcc;}
  7. added hhh to text not yet mdified
  8. gradually revealed text and modified

The CSS:

<style>
body{
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight: normal;
  line-height: 1.4;
  font-size: 0.9em;
  font-size: 1.0em;
}  

/* ===================================== */
.book {margin: 0 0 4em 0.0em;}
.img {
  width: 8.45em; height: 150px; 
  margin: 0 2em 0 0;
  text-align: center;
  vertical-align: middle;
}
.img img {
  height: auto;
  max-height: 150px;
}
.bd1 {outline: solid 1px #ddd;}
.bg0 {background-color: #ffe;}
.bg1 {background-color: #eff;}
.fll {float: left;}
.fs2 {font-size: 1.1rem;}
.fs3 {font-size: 0.88rem;}
.fs4 {font-size: 1.1rem;} 
.fss {font-size: x-small;}
.fwn {font-weight: normal;}
.hhh {display: none;
.lh0 {line-height: 1.0;}
.ooo {border: 0; padding: 0;}
/* ===================================== */
.mga {margin: 0 auto;}
.w88 {width: 88%; max-width: 70em;}
</style>

Online Results

31

Yes, I just tried it. Clever!

32

@John_Betong,

I appreciate your efforts, but your coding style is totally unreadable to me.

Only YOU know what all of your codes me, and it’s too much work every time to build a decoding ring.

Easy to read code can be hard enough to try and understand.

33

But is it going to help you px ↠ em ? :rofl:

coothead

34

@coothead,

Well, how exactly would I use it?

Open it up in a separate tab?

Insert your code into an existing page?

I read your link about pixels being dead, and I have taken the hint.

Moving forward, I will try to start thinking purely in EMs and REMs, although it will take some getting used to.

35

@UpstateLeafPeeper

I have created another page using your style and hopefully it is easier to understand. I had to combine the single line tags into a single tag:

John_Betong-002.php

36

@John_Betong,

Your sample is a little off with how it looks. (My last example looks exactly lie I wanted for a simple example.)

I looked at your code, but other than seeing you moving around < small > and adding an < h3 > nothing jumped out at me.

Can you explain where you feel my code was wrong or inefficient here using [ code ] tags?

I am curious to hear your thoughts, but it’s too onerous here to have to go line by line comparing my code to yours.

Thanks.

37

@UpstateLeafPeeper

OK I admit my page could be tweaked a little bit to make it identical to yours. I was more concerned with the layout than slight cosmetic differences.

I counted 14 tags being used in your page whereas I used 7. As mentioned in my post #30

I was convinced the CSS script could be drastically reduced.

Why all the additional tags?

Not only double the tags but your page is not responsive when the screen size is reduced to a minimum of 28.13em (thankyou @coothead)

Edit:

As also mentioned I don’t think you appreciate how cascading works and also the difference between CSS blocks and CSS strings:

…because CSS is cascaded from the top down and most tags are either blocks or inline elements.

38

@John_Betong,

Can you please post the HTML elements that you feel are extraneous in a [ code ] box below?

Or maybe post my latest code in [ code ] tags and simply add a comment to make it easier for me to see where my code could be improved.

(The reason Microsoft created “Track Changes” in MS Word is that people need to see issues in the context of the original document, not a perfect rewrite where they can’t see where the issues were at, yeah know?!) :wink:

Also, not sure about your last comment. While my code uses pixels, I tested it pretty heavily and it looks great for a mockup.

Not sure where you feel it fails, but if you look above, @Coothead admitted there was an issue on his computer and not with my latest code…

39

  1. It is not necessary to set checkoutItem dimensions because the script expands to fit inside pageBody and has the margin-bottom set to create a gap in the displayed checkoutItems/books. Also I set the default font-size to cascade.

  2. itemAuthor, itemPublishedOn and itemUnitPrice are all spans that are redefined into blocks?

  3. itemDescription is not required in my layout. I use a single plain div which follows the natural flow of the script and also wraps to make it responsive.

  4. itemTitle is already a block which is over ridden into to a block?

  5. using @media when it is not required

  6. using flex and it fails to make the page responive

  7. setting seven different font-sizes whereas I used two. The meta viewport should handle the font-sizes gracefully and not be over ridden

Take another look at post #30 where I described how I created the items in the block one at a time, starting at the top and working down. Hiding items which require modifying and applying background colours to highlight where the block starts and finishes. also making use of the native size and whether is is a block or a string.

I think I covered most items.

41

I took my standard page template which relates to my actual site and added in checkoutItems as a container for this particular mockup.

So in that sense what I did made sense.

itemAuthor and itemPublishedOn are inline-blocks because I need them to sit side-by-side on the same line. Maybe I could have left them as inline items?

itemUnitPrice is a block item so it takes up an entire line. It is a span because it is not a paragraph.

Semantically I see the description as a paragraph. Using divs for everything defeats the purpose of the semantic values of HTML.

I chose that way because I didn’t want to style an H2 that might be used elsewhere with different styles.

Why?

I needed to set breakpoints for when the side-by-side layout changes to top-bottom.

As I said several times above, this web page IS responsive! If it isn’t on your computer, then something seems amiss on your end.

I chose different font-sizes to get the look that I wanted.

Not sure what you are suggesting here.

Why don’t you use Firefox’s (or Chrome’s Developer Tools to check those things?

42

While your page was under construction,
you would just add this…

   <script src="scripts/dimensions.js"></script>

…to the HTML document and remove it
when no longer required. :winky:

The attachment has an example.

ULP.zip (274.0 KB)

coothead