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 2582 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
section width with margin: auto issue
« on: 24 Nov 2021, 09:44:23 am »
CodePen

The first section outside of the <main> tag when the margin is set to auto it collapses the section to the content width - the only way to stop this is via min-width or width - but the ones inside the <main> tag work okay, so is this because of the flex on the <main>?
« Last Edit: 24 Nov 2021, 09:56:24 am 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 #1 on: 24 Nov 2021, 10:12:49 am »
Hi there GYM,

you are using Jason's full page layout which consists
of 3 sections, namely header, main and footer.

You have placed this...

Code: [Select]
<section id="home">
    <h2>One</h2>
</section>

    <nav>
        <a href="#">Link #1</a>
        <a href="#">Link #2</a>
        <a href="#">Link #3</a>
    </nav>

...in no man's land.  ???

It needs to be repositioned within the main element
with the CSS edited to suit.

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 #2 on: 24 Nov 2021, 10:34:51 am »
I understand that, i guess I could put that first section into the header? As I want that before the Nav?
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 #3 on: 24 Nov 2021, 10:45:24 am »
Hi there GYM,

when placed in the main element, without any CSS editing,
the page looks like this...

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

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Section width with margin: auto issue
« Reply #4 on: 24 Nov 2021, 02:07:54 pm »
Thanks, something like this.

The only (major) bug I can see at the moment is, the label hover colour doesn't change - if its selected.
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 #5 on: 24 Nov 2021, 02:30:24 pm »
Quote from: GrumpyYoungMan
... the label hover colour doesn't change - if its selected.

You will  need to add this...
Code: [Select]
#toggleOne:checked ~ nav label:first-of-type:hover,
#toggleTwo:checked ~ nav label:nth-of-type(2):hover,
#toggleThree:checked ~ nav label:nth-of-type(3):hover {
    background: lightgreen;
}

...to overcome that.  :)

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 #6 on: 24 Nov 2021, 02:49:17 pm »
Quote from: GrumpyYoungMan
... the label hover colour doesn't change - if its selected.

You will  need to add this...
Code: [Select]
#toggleOne:checked ~ nav label:first-of-type:hover,
#toggleTwo:checked ~ nav label:nth-of-type(2):hover,
#toggleThree:checked ~ nav label:nth-of-type(3):hover {
    background: lightgreen;
}

...to overcome that.  :)

coothead
Perfect!  Thanks again - What are your thoughts?

CodePen has been updated!
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 #7 on: 24 Nov 2021, 02:56:38 pm »
Quote from: GrumpyYoungMan
CodePen has been updated!

Are you sure about that?

I can discern no difference.  ???

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 #8 on: 24 Nov 2021, 03:30:48 pm »
Quote from: GrumpyYoungMan
CodePen has been updated!

Are you sure about that?

I can discern no difference.  ???

coothead
:lol:

Just a few tweaks and added that new CSS you said and also added abit of content padding!
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 #9 on: 24 Nov 2021, 03:55:29 pm »
Hi there GYM,

I can see the changes now and the page also looks fine.

If i had any gripes about your code then I would have to
say that I find your use of named colours to be rather
aggravating. I would be much happier with hex, rgba() or
hsl().

coothead
« Last Edit: 24 Nov 2021, 04:02:53 pm by 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 #10 on: 24 Nov 2021, 03:59:33 pm »
Hi there GYM,

I can see the changes now and the page looks also fine.

If i had any gripes about your code then I would have to
say that I find your use of named colours to be rather
aggravating. I would be much happier with hex, rgba() or
hsl().

coothead
If that’s your only gripe, then things are all good…
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 #11 on: 25 Nov 2021, 01:10:50 am »
@GrumpyYoungMan,
>>> If that’s your only gripe, then things are all good…

You may be interested in my Swatch colours which I'm struggling with but making a little headway - it is one of my fallback "Constructive Procrastination Projects".

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

The idea is to pick four Swatch colours plus black and white and to set and only use the CSS Variable to change the style sheet.

Code: [Select]
<style>
:root
{
    --gff: #4285F4;
    --dad: #FBBC05;
    --son: #34A853;
    --bby: #EA4335;
    --wht: WHITE;
    --blk: BLACK;
}


/* USAGE */
h1 {
   background-color: var(--gff);
   color: var(--blk);
</style>



https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
« Last Edit: 25 Nov 2021, 01:14:14 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 #12 on: 25 Nov 2021, 04:10:49 am »
@GrumpyYoungMan,
>>> If that’s your only gripe, then things are all good…

You may be interested in my Swatch colours which I'm struggling with but making a little headway - it is one of my fallback "Constructive Procrastination Projects".

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

The idea is to pick four Swatch colours plus black and white and to set and only use the CSS Variable to change the style sheet.

Code: [Select]
<style>
:root
{
    --gff: #4285F4;
    --dad: #FBBC05;
    --son: #34A853;
    --bby: #EA4335;
    --wht: WHITE;
    --blk: BLACK;
}


/* USAGE */
h1 {
   background-color: var(--gff);
   color: var(--blk);
</style>



https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Thanks, colours is the one thing I struggle with!
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 #13 on: 25 Nov 2021, 04:11:59 am »
Hi there GYM,

I can see the changes now and the page also looks fine.

If i had any gripes about your code then I would have to
say that I find your use of named colours to be rather
aggravating. I would be much happier with hex, rgba() or
hsl().

coothead
Changes made and the 'pen is updated!

Is that more a personal gripe or should the hex/rgb values always be used?
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 #14 on: 25 Nov 2021, 05:35:46 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
« Last Edit: 25 Nov 2021, 05:37:31 am by coothead »
~ the original bald headed old fart ~

 

SMF spam blocked by CleanTalk

Advertisement