CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Recent Posts

Pages: [1] 2 3 ... 10
1
General Programming / Re: New Browser written in assembly language.
« Last post by Servelijano on 1 Jun 2023, 09:49:53 am »
Hello, everyone!

We are excited to announce the release of version 0.6.

Notable features in this version include the addition of support for highlighting the address bar using the Ctrl+l command on the keyboard.
This update represents a small but meaningful step forward. If it functions as intended, that's wonderful. If any issues arise, please inform us so we can address them promptly.

Thank you in advance for your support.


Looking ahead, version 0.7 is scheduled for release on July 1st.
www.yaiuu.com
2
General Programming / New Browser written in assembly language.
« Last post by Servelijano on 14 May 2023, 07:40:47 pm »
Hi everyone!

just released version 0.5
Right now it only reads in the html file from internet in a very buggy situation.

On 1:th June 2023 I will release V0.6

Please. The only one and only, don't expect it to work.

www.yaiuu.com
3
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by Jason Knight on 9 May 2023, 11:51:37 pm »
I would use details/summary, and NOT have the link as the parent category as that's confusing.

Also in your pen, you forgot a few colons. Such as "right 200vw" should be "right:200vw"
4
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by AndrewDoPECC on 9 May 2023, 12:54:48 am »
Got it!!  See the pen.

I'm confused, seems to work with the # selector now, even though that seemed to the problem before, and I thought I'd tried every variant.

I'm feeling pleased with myself for getting a solution that does not use id's.  But can you see anything to pop my bubble??

Now, off to roll it into the wider project and see if it flies....

Jason: style advice - would this be more better in summary/detail?  I'm thinking of your teachings on accessibility, non-screen agents and general semantic correctness....
5
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by AndrewDoPECC on 9 May 2023, 12:11:09 am »
Thank you both!

Jason: specificity is an excellent point - completely overlooked that.
Regarding summary/details - that crossed my mind but I was not sure that it was "semantic enough" to use these in navigation.  Also, see comments to coothead below about trying to have a local effect on just one ul

coothead: your suggestion looks workable but I am trying to do this in a generic fashion without using any specific id's.  Reason is, the navigation will be generated by the Hugo CMS and it will be sooo much easier not to generate specific id's.  My Cunning Plan was to use CSS to target the <ul> that was sibling to the checked <input>, and only that <ul>.  Bam, no id's needed.  Pretty proud of myself until I found that I cannot get ANY selector to target those <ul>s if it uses the .contentCollapse class.

See https://codepen.io/AndrewDoPECC/pen/QWZmNzw

At the bottom of the CSS you can see that the <ul>s disappear with selector(s) that don't use the class element, but *nothing* that uses the class specifier seems to work.  :checked or not.

Why does using .contentCollapseSwitch break it??

Thanks for your expertise!
6
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by Jason Knight on 8 May 2023, 04:19:15 pm »
You're being bit by a pesky thing called "specificity". Id's take precedence over class declarations.

#contentMenu nav > ul > li ul {

has a higher specificity than:

.collapseSwitch:checked ~ ul {

This:

#contentMenu nav > ul > li .collapseSwitch:checked ~ ul {

Might work, but it's wordy as F***.

Instead of the id selected, since collapse switch is collapse switch, is the ul it's immediate next sibling?

Code: [Select]
.collapseSwitch:checked + ul {
   position: absolute;
   right: 200vw;
 }

.collapseSwitch:checked + ul {
   position:static;
 }

Would/should do the trick. Note that position:static (the default value of positon) ignores top/left/right/bottom saving you the extra "right" declaration.


You might consider using "+ *" instead of "+ ul" to nab any tag so collapseswitches can be used anywhere.

Though I have to ask, might this not be a job for <details> and <summary>? Or do you have plans to animate it?
7
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by coothead on 8 May 2023, 11:31:08 am »
Hi there AndrewDoPECC,

here is one possible solution...

index.html
Code: [Select]
<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>page description</h1>

<nav>
 <input type="checkbox" id="cb1">
 <label for="cb1">A</label>
 <ul>
  <li><a href="nav-link1.html">Nav to sub-area A1</a></li>
  <li><a href="nav-link2.html">Nav to sub-area A2</a></li>
  <li><a href="nav-link3.html">Nav to sub-area A3</a></li>
 </ul>
     
 <input type="checkbox" id="cb2">
 <label for="cb2">B</label>
 <ul>
  <li><a href="nav-link4.html">Nav to sub-area B1</a></li>
  <li><a href="nav-link5.html">Nav to sub-area B2</a></li>
  <li><a href="nav-link6.html">Nav to sub-area B3</a></li>
 </ul>
</nav>

</body>
</html>

screen.css
Code: [Select]
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5  sans-serif;
 }
h1 {
   font-size: 1.5em;
   font-weight: normal;
   color: #545454;
   text-align: center;
   text-transform: capitalize ;
 }
nav {
   display: inline-flex;
   flex-direction: column;
   gap: 0.5em;
   padding: 1em;
   border: 1px solid #000;
   background-color: #fff;
 }
nav label {
   width: 8em;
   padding: 0.5em;
   border: 1px solid #000;
   background-color: #009;
   font-size: 1.25em;
   color: #fff;
   text-align: center;
   cursor: pointer;
 }
nav label::before{
   content: 'Open ';
 }
#cb1,
#cb2 {
   position: absolute;
   left: -999em;
   top: -999em;
 }
#cb1:checked + label::before,
#cb2:checked + label::before {
   content: 'Close ';
 }
#cb1:checked ~ ul:first-of-type,
#cb2:checked ~ ul:last-of-type  {
   display: block;
 }
nav ul {
   display: none;
 }

You may view the result here...

https://codepen.io/coothead/full/bGmLJzx

coothead
8
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by AndrewDoPECC on 8 May 2023, 07:42:23 am »
I really hope this gets thru the filter.....

Code: [Select]

<div id="contentMenu">

<nav>
    <a ..whatever.. ></a>
    <ul>
        <li><input type="checkbox" class="collapseSwitch"><a href="nav link A">Nav to A</a>
        <ul>
            <li><a href="nav link">Nav to sub-area A1</a></li>
            <li><a href="nav link">Nav to sub-area A2</a></li>
            <li><a href="nav link">Nav to sub-area A3</a></li>
        </ul>
        </li>
        <li><input type="checkbox" class="collapseSwitch"><a href="nav link B">Nav to B</a>
        <ul>
            <li><a href="nav link">Nav to sub-area B1</a></li>
            <li><a href="nav link">Nav to sub-area B2</a></li>
            <li><a href="nav link">Nav to sub-area B3</a></li>
        </ul>
        </li>
    </ul>
</nav>
<!-- contentMenu --></div>
9
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by AndrewDoPECC on 8 May 2023, 07:41:31 am »
Thank you for the prompt response.

I am trying something a little different, and I thought that it conformed with the definition that you gave.
It does however depend on using the checkbox status and maybe that's where I have misunderstood how that state works, or there is something else going on that I also do not understand.

Thanks again

Markup in next post, the spam filter keeps blocking me....

Then,
 #contentMenu nav > ul > li ul {
   position: absolute;
   right: 999em;
 }  /* this works to collapse the all the submenu ul's when the page loads

But
.collapseSwitch:checked ~ ul {
   position: relative;
   right: 0;
 }  /* nothing like this works to restore just one <ul> that is beneath the selected checkbox. */
10
HTML / CSS / Re: Generating a selector from input:checked - not working
« Last post by Jason Knight on 8 May 2023, 12:41:20 am »
In addition to the "same parent" the adjacent sibling selector "~" only targets tags AFTER it.

.test ~ div { color:red; }

<div>Doesn't work></div>
<input type="checkbox" class="test">
<div>works</div>



Pages: [1] 2 3 ... 10
SMF spam blocked by CleanTalk

Advertisement