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.

Author Topic: MentalBlock - CollapsibleSections  (Read 3025 times)

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #45 on: 16 Nov 2021, 06:47:08 am »
Hi there GYM,

your page design looks OK to me though it does have
some accessibility issues that need your attention.

For example, in the "Quick Search" panel you have set
the background-color to #222 and the text color to
datkgreen- (#006400) , which is a total failure.

You should always use this tool, or similar...

Contrast Checker

...to check your choice of layout colours.

]coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #46 on: 16 Nov 2021, 02:54:32 pm »
Thanks!

I get what you mean, looks okay on my screen buts it’s a 27” panel…

The biggest problem I find is filling it as lots of empty space?

I was impressed with my radio option hide/show…

Any suggestions on colour?

Thank you! :)
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #47 on: 16 Nov 2021, 04:57:48 pm »
Quote from: GrumpyYoungMan
Any suggestions on colour?

As long as you ensure that all your colours work perfectly
accessibility wise, I see no reason to change your design.

As you will see from this example page of mine...

https://www.coothead.co.uk/the-pale-blue-dot/

...my colour scheme choices are rather different to yours.

So follow your heart.  8)

coothead
~ the original bald headed old fart ~

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: MentalBlock - CollapsibleSections
« Reply #48 on: 17 Nov 2021, 12:19:41 am »
Any suggestions on colour?
I've been playing about with Swatch Colours and the idea is to create half-a-dozen colours in the CSS file then to use the colours in the style sheet:

https://this-is-a-test-to-see-if-it-works.tk/sp-a/jb-swatch/index.php

File: style.css
Code: [Select]
:root {
  --gff: #4285F4;
  --dad: #FBBC05;
  --son: #34A853;
  --bby: #EA4335;
  --wht: WHITE;
}
/* the colours above are grandfather, father, son, baby, white */
/* Use above colours as shown */
header {
 background-color: var(--dad);
 color: var(--wht);
}
nav,
footer {
 background-color: var(--son);
 color: var(--wht);
}
nav a {
 color: var(--wht);
}
nav a:hover {
 background-color: var(--bby);
 color: var(--wht);
}

« Last Edit: 17 Nov 2021, 12:23:28 am by John_Betong »
Retired in the City of Angels where the weather suits my clothes

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 854
  • Karma: +162/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: MentalBlock - CollapsibleSections
« Reply #49 on: 17 Nov 2021, 04:46:08 am »
Thanks, well, what do you think?
Why is your first page heading a H2? What makes a list of actions a DIV separated by a vertical break? What makes the title of a section a LI and not a heading? What makes the side column a literary ASIDE inside MAIN? Why are you using DIV to do ARTICLE's job? Where are your FIELDSET?

And if you're having trouble with colours, try using HSL. It's still possible to screw it up, but if you keep your lightness out of the following ranges:

hue   light
blue  10..90
red   20..80
green 25..75

You can be "mostly" safe.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #50 on: 17 Nov 2021, 08:03:01 am »
Thanks, well, what do you think?
Why is your first page heading a H2? What makes a list of actions a DIV separated by a vertical break? What makes the title of a section a LI and not a heading? What makes the side column a literary ASIDE inside MAIN? Why are you using DIV to do ARTICLE's job? Where are your FIELDSET?

And if you're having trouble with colours, try using HSL. It's still possible to screw it up, but if you keep your lightness out of the following ranges:

hue   light
blue  10..90
red   20..80
green 25..75

You can be "mostly" safe.
This was what I was after, thanks Jason!

Also thanks Coothead and John! :)


How can I spilt the page to that layout without using the “main” to fill the gap for the header/footer? As what you are saying is use header, footer, aside (or Nav) and article? And in the header use h1?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #51 on: 17 Nov 2021, 08:30:20 am »
Demo

I have spilt it like you said (or the way I thought you meant?), but how do I get the left (aside) and right (main) to be actually the left and right columns?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #52 on: 17 Nov 2021, 08:39:59 am »
Hi there GYM,

you just need to change flex-direction: column to flex-direction: row.

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #53 on: 17 Nov 2021, 08:49:23 am »
Hi there GYM,

you just need to change flex-direction: column to flex-direction: row.

coothead
Thanks, but that doesn’t give me a header/footer with 2 rows that gives me 4 rows…
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #54 on: 17 Nov 2021, 09:32:43 am »
Hi there GYM,

does this help...

Full Page View

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

Editor View

https://codepen.io/coothead/pen/JjyweLR

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 653
  • Karma: +8/-0
    • GrumpyYoungMan
Re: MentalBlock - CollapsibleSections
« Reply #55 on: 17 Nov 2021, 09:53:23 am »
Perfect! Thanks Coothead!


So the only way to do it, was to put it in to a container?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 322
  • Karma: +79/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: MentalBlock - CollapsibleSections
« Reply #56 on: 17 Nov 2021, 10:05:12 am »
Hi there GYM,

I just used the basic full page layout that jason provided some while ago.

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>Flex full page</title>

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

</head>
<body>

 <header>
     <h1>Site Title</h1>
 </header>
   
 <main>
     <p>Lorem ipsum</p>

 </main>
   
 <footer>
     <p>footer</p>
 </footer>

</body>
</html>

screen.css
Code: [Select]
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }

html, body {
    height: 100%;
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
}

body {
    display: flex;
    flex-direction: column;
}

body > header,
body > footer {
    flex: 0 0 auto;
    padding: 1em;
    background-color: #ace;
}

body > header {
    border-bottom: 1px solid #999;
}

body > footer {
    border-top: 1px solid #999;
}

main {
    flex: 1 0 auto;
    padding: 1em;
    background-color: #def;
}

coothead
~ the original bald headed old fart ~

 

SMF spam blocked by CleanTalk

Advertisement