philipriddell commented 3 years ago

Anyone got an explanation why using
instead of

means that your menu navigation bar gives you a variable width instead of the defined 200px width? Just for interest rather as I have now fixed my own bug!

menu.html:

Anaesthetics Wiki

Home
Drugs
Intubation
Lumbar Puncture

Cheers

joshcase commented 3 years ago

Hey there, thanks for the post.

I suspect there's some sort of formatting issue with what you've posted - I can't quite interpret it.

If you want to post code on GitHub, put the lines either side of a ` character.

like_this();

If you clean up the formatting I'll gladly help in any way I can.

philipriddell commented 3 years ago

Whoops, newbie error!

<h1 style="font-size: 20px; ">Anaesthetics Wiki</h1>
<a href="index.php"> Home </a> 
<div>
    <a href="drugs.php"> Drugs </a>
</div>
<div>
    <a href="intubation.php"> Intubation </a>
</div>
<div>
    <a href="lumbarpuncture.php"> Lumbar Puncture </a>
</div>

When I initially wrote it, I exchanged the <div></div> elements for <br> and that resulted in the menu having variable width, despite specifying the 200px width.

Hopefully this has worked this time

joshcase commented 3 years ago

To a certain extent I regret putting all the <br> elements in the book. They're an easy starting point, but there is very little to no role for these elements in complex layouts - so don't fall in love! They become too hard to maintain across different screen sizes.

It's far more common to use an unordered list or series of divs to define new lines. That way, you at least have some control if you want to restructure the menu (because your parent div can then tell the children how to behave via flex behaviours for example). You don't have this luxury with <br> elements.

To answer your question directly - it's a little bit complicated!

Remember that the menu.html div is in fact a child of the <body> element which is itself a flex container. You may have to open index.php to appreciate this.

Children of flex containers (AKA flex items) are by default inflexible when there is plenty of space around, however when there is insufficient space on the screen, flex items can reduce to a "minimum size". That minimum size is normally dependent of contents of the flex item. When you're using the <br> tags only, the minimum size of the menu bar is quite small. Adding the <div> elements means that the minimum size is much larger.

If you want to disable this flexible behaviour for a child of a flex container, you have the option of setting: flex: none; on the child.

Clear as mud? 🙃

joshcase / code-blue-wiki

Navigation bar of varying widths! #1

Anaesthetics Wiki