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: section width with margin: auto issue  (Read 2590 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #15 on: 25 Nov 2021, 05:50:58 am »
Quote from: GrumpyYoungMan
Is that more a personal gripe or should the hex/rgb values always be used?

I am always testing the accessibility of colour combinations
here...

https://webaim.org/resources/contrastchecker/

Their tool works  with hex values.

To test your page's accessibility  required the use of an
eyedropper tool to convert your named colours to hex.

This can be impossible to do sometimes, if the element
has a hover state applied to it.

I have no objection to your use of named colours, per se.
as it is obvious that your are more comfortable using them.

I understand that lightgreen has some sort of meaning when
compared to #9acd32.

If I wanted to have that comfort in my coding then I would
code it like this...

Code: [Select]
    background-color: #696969;  /* dimgrey  */
    color: #9acd32;  /* yellowgreen  */

coothead
That makes perfect sense - I’ll switch to hex values… I have already updated my pen! :)

I am pleased that was the only issue as I am a total novice!
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...

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: section width with margin: auto issue
« Reply #16 on: 26 Nov 2021, 12:41:54 am »
@GrumpyYoungMan,
> Thanks, colours is the one thing I struggle with!

I have copied the source from your CodePen (because I don't know how to use CodePen) and added another two CSS Swatch Colour style sheets:

file: google.css
Code: [Select]
:root {
   --gff: #4285F4;
 --dad: #FBBC05;
 --son: #34A853;
 --bby: #EA4335;
 --wht: WHITE;
 --blk: BLACK; 
}

file: green.css
Code: [Select]
:root {
   --gff: #d5e1df;
 --dad: #e3eaa7;
 --son: #b5e7a0;
 --bby: #86af49;
 --wht: WHITE;
 --blk: BLACK;
}

The idea is to link one of the three styles sheets:
Code: [Select]
  <link rel="stylesheet" media="screen" href="gym.css">

Online demo:

https://this-is-a-test-to-see-if-it-works.tk/sp-a/jb-swatch/gym/?swatch=google.css

I'm still getting used to using CSS Variables and warming to them even though I have only scrached the surface.
« Last Edit: 26 Nov 2021, 08:55:04 am by John_Betong »
Retired in the City of Angels where the weather suits my clothes

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #17 on: 26 Nov 2021, 09:38:48 am »
New & improved radio toggleable content...

Less dependence on the label order - as they are now styled by classes... rather than inheritance

What do you think?
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: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #18 on: 26 Nov 2021, 09:39:21 am »
@GrumpyYoungMan,
> Thanks, colours is the one thing I struggle with!

I have copied the source from your CodePen (because I don't know how to use CodePen) and added another two CSS Swatch Colour style sheets:

file: google.css
Code: [Select]
:root {
   --gff: #4285F4;
 --dad: #FBBC05;
 --son: #34A853;
 --bby: #EA4335;
 --wht: WHITE;
 --blk: BLACK; 
}

file: green.css
Code: [Select]
:root {
   --gff: #d5e1df;
 --dad: #e3eaa7;
 --son: #b5e7a0;
 --bby: #86af49;
 --wht: WHITE;
 --blk: BLACK;
}

The idea is to link one of the three styles sheets:
Code: [Select]
  <link rel="stylesheet" media="screen" href="gym.css">

Online demo:

https://this-is-a-test-to-see-if-it-works.tk/sp-a/jb-swatch/gym/?swatch=google.css

I'm still getting used to using CSS Variables and warming to them even though I have only scrached the surface.
Thanks :)
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: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: section width with margin: auto issue
« Reply #19 on: 26 Nov 2021, 02:45:26 pm »
Quote from: GrumpyYoungMan
Less dependence on the label order - as they are
now styled by classes... rather than inheritance

What do you think?

I think that you should always use the coding methods
that best suit your requirements and temperament.

My natural temperament is to keep the HTML as clean
as possible, hence my use of this type of CSS...
Code: [Select]
:nth-of-type()

Of course, your preference for classes ot ids is perfectly
acceptable.

It is also good to see that you are always prepared to
experiment with alternative ways to resolve your
problems.

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #20 on: 26 Nov 2021, 03:36:01 pm »
Quote from: GrumpyYoungMan
Less dependence on the label order - as they are
now styled by classes... rather than inheritance

What do you think?

I think that you should always use the coding methods
that best suit your requirements and temperament.

My natural temperament is to keep the HTML as clean
as possible, hence my use of this type of CSS...
Code: [Select]
:nth-of-type()

Of course, your preference for classes ot ids is perfectly
acceptable.

It is also good to see that you are always prepared to
experiment with alternative ways to resolve your
problems.

coothead
The nth-of-type is probably the prefered method of this website "cutcodedown" ;) :)
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: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #21 on: 26 Nov 2021, 04:00:39 pm »
My CodePen has been updated - again!

Let me know what you think!? Good or bad!

I think it’s safe to say you can see my journey!
« Last Edit: 26 Nov 2021, 04:04:56 pm by GrumpyYoungMan »
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: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: section width with margin: auto issue
« Reply #22 on: 26 Nov 2021, 04:11:06 pm »
Quote from: GrumpyYoungMan
The nth-of-type is probably the preferred
method of this website "cutcodedown" ;) :)

I cannot comment on that but it is good to know that there
is always more than one way to skin a cat.

So why have you ditched the use of class in  your update?  :o

What caused you to have second thoughts?

coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: section width with margin: auto issue
« Reply #23 on: 26 Nov 2021, 04:28:32 pm »
Let me know what you think!? Good or bad!
A lot of little quirks and wasteful outdated code in there.

Just to go down the list:

1) Just because you're using NAV doesn't mean you still get to slop labels or anchors in there. IT's STILL a list of choices thus UL/LI is still required.

2) Your H3/H2 orders are backwards. You don't follow a H1 with a H3.

3) Don't crap a bunch of pointless DIV all over the markup to do linear-gradient and generated content's job.

4) Your close buttons are clearly part of what should be a footer, so use footer instead of

5) Never assume a page will only have one header or footer tag. They are also valid for each SECTION or ARTICLE.

6) Your menu should probably be part of the body HEADER.

7) I'm not seeing anything that warrants the presence of media queries. min() based VW padding/margins might be more useful.

Here's a quick rewrite to show how I'd approach that:

https://codepen.io/jason-knight/pen/BadXvMZ?editors=1100

The real magic being this:

Code: [Select]
main h3:after {
content:"";
display:block;
height:1em;
margin-top:1em;
background:linear-gradient(
to right,
#E27396,
#E27396 20%,
#EA9AB2 20%,
#EA9AB2 40%,
#EFCFE3 40%,
#EFCFE3 60%,
#EAF2D7 60%,
#EAF2D7 80%,
#B3DEE2 80%
);
border-radius:0.25em;
}

Eliminating the need for those garbage '00's style "spacer div".
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #24 on: 27 Nov 2021, 07:11:41 am »
Let me know what you think!? Good or bad!
A lot of little quirks and wasteful outdated code in there.

Just to go down the list:

1) Just because you're using NAV doesn't mean you still get to slop labels or anchors in there. IT's STILL a list of choices thus UL/LI is still required.

2) Your H3/H2 orders are backwards. You don't follow a H1 with a H3.

3) Don't crap a bunch of pointless DIV all over the markup to do linear-gradient and generated content's job.

4) Your close buttons are clearly part of what should be a footer, so use footer instead of

5) Never assume a page will only have one header or footer tag. They are also valid for each SECTION or ARTICLE.

6) Your menu should probably be part of the body HEADER.

7) I'm not seeing anything that warrants the presence of media queries. min() based VW padding/margins might be more useful.

Here's a quick rewrite to show how I'd approach that:

https://codepen.io/jason-knight/pen/BadXvMZ?editors=1100

The real magic being this:

Code: [Select]
main h3:after {
content:"";
display:block;
height:1em;
margin-top:1em;
background:linear-gradient(
to right,
#E27396,
#E27396 20%,
#EA9AB2 20%,
#EA9AB2 40%,
#EFCFE3 40%,
#EFCFE3 60%,
#EAF2D7 60%,
#EAF2D7 80%,
#B3DEE2 80%
);
border-radius:0.25em;
}

Eliminating the need for those garbage '00's style "spacer div".
I will work my way though this and post the updated code!

Thank you Jason for the feedback, if it’s more the code causing the problem then I’m happy!
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...

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: section width with margin: auto issue
« Reply #25 on: 28 Nov 2021, 02:26:35 am »
@GrumpyYoungMan,

I find the interface confusing because the “welcome” screen only appears when a link/caption/topic is closed. There is no direct link to view “welcome”.

Have you considered showing the “welcome” section and having the link/caption/topic open a popup scrollable view similar to Facebook? Clicking either the “done” button or anywhere outside the popup closes the popup view.

I will have ago when I’m next on the desktop… watch this space :)
« Last Edit: 28 Nov 2021, 02:28:19 am by John_Betong »
Retired in the City of Angels where the weather suits my clothes

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #26 on: 28 Nov 2021, 05:15:56 am »
@GrumpyYoungMan,

I find the interface confusing because the “welcome” screen only appears when a link/caption/topic is closed. There is no direct link to view “welcome”.

Have you considered showing the “welcome” section and having the link/caption/topic open a popup scrollable view similar to Facebook? Clicking either the “done” button or anywhere outside the popup closes the popup view.

I will have ago when I’m next on the desktop… watch this space :)
Something like this?

Oh, @Jason I think 90% of your issues have been resolved in this update - hopefully?
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...

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: section width with margin: auto issue
« Reply #27 on: 28 Nov 2021, 05:50:13 am »
@GrumpyYoungMan,
No, I don’t like disappearing buttons, they should show all the time and be dimmed if showing. Something like the link attributed, LAVH or something:)


Have you seen how Facebook has a link to their comments? The popup takes about 80% x 80% of the screen. I am interested because I have a couple of sites that may benefit from the UI rather than the current scrolling.


Edit:
Eliminate surprises I think @Benanamen mentioned?

« Last Edit: 28 Nov 2021, 05:55:09 am by John_Betong »
Retired in the City of Angels where the weather suits my clothes

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #28 on: 28 Nov 2021, 08:01:37 am »
@GrumpyYoungMan,
No, I don’t like disappearing buttons, they should show all the time and be dimmed if showing. Something like the link attributed, LAVH or something:)


Have you seen how Facebook has a link to their comments? The popup takes about 80% x 80% of the screen. I am interested because I have a couple of sites that may benefit from the UI rather than the current scrolling.


Edit:
Eliminate surprises I think @Benanamen mentioned?
I havent seen @Benanamen comments, I have to look...

So I was doing my buttons the wrong way around: being dark when not selected and highlighted once selected...

The 'pen has been updated again!
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: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: section width with margin: auto issue
« Reply #29 on: 28 Nov 2021, 08:02:46 am »
As an aside, thank you all for your feedback! I appreciate it! :)
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...

 

SMF spam blocked by CleanTalk

Advertisement