what don't I get about this top nav?

[Eli the Bearded]

I don't know if this is an HTML misunderstanding or a CSS one, so
crossposted. Feel free to edit it down, I'm subcribed to both groups.

On my blog: https://qaz.wtf/qz/blosxom

I have bit of navigation that I want to appear at the top of the page on
small screens and in Lynx.

<!-- seen in small screens and lynx -->
<div class=small_upper>
<nav class=topnav>
<h2>Top Tags</h2>
<ul class=subcats>
<li>$aaa_tags::top_tags</li>
</ul>
</nav>
<div class=searchbox>
<form method=GET action="$url"><label for="sutag">Tag search</label>
<input type=text name=tag id=sutag size=12></form>
</div>
</div>

Using @media size selectors, I've got it appearing / disappearing. That
works fine. What is a mess, and I don't understand why, is how there is
no space between the tags in the <UL> and the <FORM>. The <LABEL> text
is literally mixed in with the tags when I preview it in a small
(Firefox) window.

Top Tags
2004: 160 2003: 146 deadlink: 136 review: 118 movie: 75
images: 62 2020: 50 reference: 46 shopping: 44 fixedlink: 43 Tag
blog: 41 games: 35 2005: 33 computers: 33 do-it-yourself: 33
history: 33 book: 23 tools: 22 update: 22 2010: 20 search
[ input box here ]

The "Nu HTML Checker" at w3.org finds no errors in the page (there are
warnings about using <A NAME=""> syntax, which is still my preferred
mid-page anchor point method, but I stress again, those are warnings
not errors). The Jigsaw w3.org CSS validator finds no errors (or
warnings) for the CSS:

https://qaz.wtf/qz/css/main.css

What is my error of understanding?

Elijah
------
started with html2.0 back in the day and has some old habits

[James Kirk]

In Message: <eli$20051...@qaz.wtf>

Eli the Bearded <*@eli.users.panix.com> wrote:

> I don't know if this is an HTML misunderstanding or a CSS one, so
> crossposted. Feel free to edit it down, I'm subcribed to both
> groups.

> On my blog: https://qaz.wtf/qz/blosxom

> I have bit of navigation that I want to appear at the top of the
> page on small screens and in Lynx.

[snip]

> Using @media size selectors, I've got it appearing / disappearing.
> That works fine. What is a mess, and I don't understand why, is how
> there is no space between the tags in the <UL> and the <FORM>. The
> <LABEL> text is literally mixed in with the tags when I preview it
> in a small (Firefox) window.

> Top Tags
> 2004: 160 2003: 146 deadlink: 136 review: 118 movie: 75
> images: 62 2020: 50 reference: 46 shopping: 44 fixedlink: 43 Tag
> blog: 41 games: 35 2005: 33 computers: 33 do-it-yourself: 33
> history: 33 book: 23 tools: 22 update: 22 2010: 20 search
> [ input box here ]

[snip]

> https://qaz.wtf/qz/css/main.css

> What is my error of understanding?

ul.subcats > li {
float: left;
}

It appears that you may have forgotten that floats are taken out of
the document flow.


--
James Kirk

[Eli the Bearded]

In comp.infosystems.www.authoring.stylesheets,
James Kirk <noneya.invali...@gmail.com> wrote:
[Replying to me]

> > On my blog: https://qaz.wtf/qz/blosxom

> > Top Tags
> > 2004: 160 2003: 146 deadlink: 136 review: 118 movie: 75
> > images: 62 2020: 50 reference: 46 shopping: 44 fixedlink: 43 Tag
> > blog: 41 games: 35 2005: 33 computers: 33 do-it-yourself: 33
> > history: 33 book: 23 tools: 22 update: 22 2010: 20 search
> > [ input box here ]

> > https://qaz.wtf/qz/css/main.css
> > What is my error of understanding?
>
> ul.subcats > li {
> float: left;
> }
>
> It appears that you may have forgotten that floats are taken out of
> the document flow.

Okay, that was added, along with:

nav { display: block; }

to get the <UL>ist items to flow like a paragraph, but I want that flow
to end with the enclosing block. The formatting of the tags is what I
want, it's that the following stuff gets mixed in where I have the
problem.

What do I do?

Elijah
------
just added an extra layer of <DIV> with no effect

[James Kirk]

In Message: <eli$20051...@qaz.wtf>
Eli the Bearded <*@eli.users.panix.com> wrote:

You have to contain and/or clear the floats OR don't use float.

add float:left; to ul.subcats
AND
add clear:left to .searchbox.
AND
add overflow:auto to .topnav

OR one other way with display flex:

ul.subcats {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
background: yellow;
margin: 0.5em 0;
padding: 0;
}

ul.subcats > li:before {
content: "\1F3F7";
margin-right: 0.3em;
display: inline-block;
}

ul.subcats > li {
display: block;
text-align: center;
white-space: nowrap;
margin: 0.3em;

}


<nav class=topnav>
<h2>Top Tags</h2>
<ul class=subcats>

<li>element 001</li>
<!-- more li elements -->
<li>element 025</li>
</ul>
</nav>
<div class=searchbox>
<form method=GET ><label for="sutag">Tag search</label>
<input type=text id=sutag></form>
</div>

--
James Kirk

[Eli the Bearded]

In comp.infosystems.www.authoring.stylesheets,
James Kirk <noneya.invali...@gmail.com> wrote:
> Eli the Bearded <*@eli.users.panix.com> wrote:
>> What do I do?
>
> You have to contain and/or clear the floats OR don't use float.
>
> add float:left; to ul.subcats
> AND
> add clear:left to .searchbox.
> AND
> add overflow:auto to .topnav

That works, but I can't say I understand (yet) why I need "float:left" on
the <UL> and on the <LI>s in the <UL>.

Elijah
------
did try removing the float:left from the <LI>s

[Arno Welzel]

Eli the Bearded:

> In comp.infosystems.www.authoring.stylesheets,
> James Kirk <noneya.invali...@gmail.com> wrote:
>> Eli the Bearded <*@eli.users.panix.com> wrote:
>>> What do I do?
>>
>> You have to contain and/or clear the floats OR don't use float.
>>
>> add float:left; to ul.subcats
>> AND
>> add clear:left to .searchbox.
>> AND
>> add overflow:auto to .topnav
>
> That works, but I can't say I understand (yet) why I need "float:left" on
> the <UL> and on the <LI>s in the <UL>.

Use grid layout instead of floats. This makes things *much* easier:

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>


--
Arno Welzel
https://arnowelzel.de

[Axel Berger]

Arno Welzel wrote:
> Use grid layout instead of floats. This makes things *much* easier:

Wonderful idea. First we lost Tim Berners-Lees brilliant concept of a
simple *content* description language that left look and layout mostly
to the viewer and thus worked well on *any* machines decades before
today's tiny screens were ever thought of. We're now back to the bad old
days of browser sniffing and delivering different content for different
viewers -- just the very thing HTML was meant to get rid of.
(http://www.anybrowser.org/campaign/)

And now we go further and lose the power of CSS by reverting to a kind
of fixed, table-based layout.

Brilliant, just brilliant.


--
/¯\ No | Dipl.-Ing. F. Axel Berger Tel: +49/ 221/ 7771 8067
\ / HTML | Roald-Amundsen-Straße 2a Fax: +49/ 221/ 7771 8069
 X in | D-50829 Köln-Ossendorf http://berger-odenthal.de
/ \ Mail | -- No unannounced, large, binary attachments, please! --

[James Kirk]

In Message: <eli$20051...@qaz.wtf>

Eli the Bearded <*@eli.users.panix.com> wrote:

> In comp.infosystems.www.authoring.stylesheets,
> James Kirk <noneya.invali...@gmail.com> wrote:

>> Eli the Bearded <*@eli.users.panix.com> wrote:

>>> What do I do?

>> You have to contain and/or clear the floats OR don't use float.

>> add float:left; to ul.subcats
>> AND
>> add clear:left to .searchbox.
>> AND
>> add overflow:auto to .topnav

> That works, but I can't say I understand (yet) why I need
> "float:left" on the <UL> and on the <LI>s in the <UL>.

It is one of 2 ways that I used to contain the floats.

 change overflow to something other than visible.
 floats contain floats.

Since the UL is set as inline, overflow would not work to contain
floats.


--
James Kirk

[Eli the Bearded]

In comp.infosystems.www.authoring.stylesheets,

Axel Berger <Sp...@Berger-Odenthal.De> wrote:
> Arno Welzel wrote:
>> Use grid layout instead of floats. This makes things *much* easier:

I don't think that would suit my goal in organizing these tags at all.
It's clever and probably has a use, but not here.

> Wonderful idea. First we lost Tim Berners-Lees brilliant concept of a
> simple *content* description language that left look and layout mostly
> to the viewer and thus worked well on *any* machines decades before
> today's tiny screens were ever thought of. We're now back to the bad old
> days of browser sniffing and delivering different content for different
> viewers -- just the very thing HTML was meant to get rid of.

I'm kinda reluctant to do that, but also feeling that ordering content
appropriately for different size screens is a challenge. A lot of web
pages that work in Lynx are painful in lynx, because the content is so
buried in the other stuff on the page. I'm trying to find a happy
compromise there.

> And now we go further and lose the power of CSS by reverting to a kind
> of fixed, table-based layout.

This layout scheme probably has some appropriate uses, particularly for
layouts that are trying to duplicate real world positions. A game board,
for example.

Elijah
------
open to suggestions

[Arno Welzel]

Axel Berger:

> Arno Welzel wrote:
>> Use grid layout instead of floats. This makes things *much* easier:
>
> Wonderful idea. First we lost Tim Berners-Lees brilliant concept of a
> simple *content* description language that left look and layout mostly

Which is HTML(!) and not CSS.

> to the viewer and thus worked well on *any* machines decades before
> today's tiny screens were ever thought of. We're now back to the bad old
> days of browser sniffing and delivering different content for different
> viewers -- just the very thing HTML was meant to get rid of.
> (http://www.anybrowser.org/campaign/)

This was the time, where every browser manufactorer created their *own*
extensions to *HTML* (not CSS!).

CSS grid layout is a defined *standard*:

<https://www.w3.org/TR/css-grid-1/>

And nearly *every* browser supports it:

<https://caniuse.com/#search=grid>

> And now we go further and lose the power of CSS by reverting to a kind
> of fixed, table-based layout.

You don't know anything about grid layout. It is *not* "table-based" and
*not* "fixed".

[Arno Welzel]

Eli the Bearded:

> In comp.infosystems.www.authoring.stylesheets,
> Axel Berger <Sp...@Berger-Odenthal.De> wrote:

[...]

>> And now we go further and lose the power of CSS by reverting to a kind
>> of fixed, table-based layout.
>
> This layout scheme probably has some appropriate uses, particularly for
> layouts that are trying to duplicate real world positions. A game board,
> for example.

Grid layout is *flexible* and has nothing to do with tables or a fixed
layout at all!

The idea is, that you define grid rows and columns and have the
flexibility to tell the browser what to do if there is not enough space
for 4, 3 or 2 columns.