CutCodeDown
Web Development => HTML / CSS => Topic started by: GrumpyYoungMan on 24 Nov 2021, 09:44:23 am
-
CodePen (https://codepen.io/GrumpyYoungMan/full/porXrLx)
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>?
-
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...
<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
-
I understand that, i guess I could put that first section into the header? As I want that before the Nav?
-
Hi there GYM,
when placed in the main element, without any CSS editing,
the page looks like this...
https://codepen.io/coothead/full/PoKrJgL (https://codepen.io/coothead/full/PoKrJgL)
coothead
-
Thanks, something like this (https://codepen.io/GrumpyYoungMan/full/yLodKRz).
The only (major) bug I can see at the moment is, the label hover colour doesn't change - if its selected.
-
... the label hover colour doesn't change - if its selected.
You will need to add this...
#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 label hover colour doesn't change - if its selected.
You will need to add this...
#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!
-
CodePen has been updated!
Are you sure about that?
I can discern no difference. ???
coothead
-
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!
-
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
-
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…
-
@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/ (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.
<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
-
@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/ (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.
<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!
-
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?
-
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/ (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...
background-color: #696969; /* dimgrey */
color: #9acd32; /* yellowgreen */
coothead
-
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/ (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...
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!
-
@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
:root {
--gff: #4285F4;
--dad: #FBBC05;
--son: #34A853;
--bby: #EA4335;
--wht: WHITE;
--blk: BLACK;
}
file: green.css
:root {
--gff: #d5e1df;
--dad: #e3eaa7;
--son: #b5e7a0;
--bby: #86af49;
--wht: WHITE;
--blk: BLACK;
}
The idea is to link one of the three styles sheets:
<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 (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.
-
New & improved radio toggleable content (https://codepen.io/GrumpyYoungMan/full/BadXVJP)...
Less dependence on the label order - as they are now styled by classes... rather than inheritance
What do you think?
-
@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
:root {
--gff: #4285F4;
--dad: #FBBC05;
--son: #34A853;
--bby: #EA4335;
--wht: WHITE;
--blk: BLACK;
}
file: green.css
:root {
--gff: #d5e1df;
--dad: #e3eaa7;
--son: #b5e7a0;
--bby: #86af49;
--wht: WHITE;
--blk: BLACK;
}
The idea is to link one of the three styles sheets:
<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 (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 :)
-
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...
: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
-
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...
: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" ;) :)
-
My CodePen (https://codepen.io/GrumpyYoungMan/full/BadXVJP) 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!
-
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
-
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:
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".
-
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:
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!
-
@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 :)
-
@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 (https://codepen.io/GrumpyYoungMan/full/BadXVJP)?
Oh, @Jason I think 90% of your issues have been resolved in this update - hopefully?
-
@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?
-
@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 (https://codepen.io/GrumpyYoungMan/full/BadXVJP) has been updated again!
-
As an aside, thank you all for your feedback! I appreciate it! :)
-
As an aside, thank you all for your feedback! I appreciate it! :)
Thank you for helping us to keep out of mischief. 8)
coothead
-
I’ve just checked the links and noticed I had incorrect abbreviations, they should have been LVHA:
https://css-tricks.com/almanac/selectors/v/visited/ (https://css-tricks.com/almanac/selectors/v/visited/)
Did anyone check to see the LAVH meaning? I did and it raised more than just a chuckle :) :) :)
-
I’ve just checked the links and noticed I had incorrect abbreviations, they should have been LVHA:
https://css-tricks.com/almanac/selectors/v/visited/ (https://css-tricks.com/almanac/selectors/v/visited/)
Did anyone check to see the LAVH meaning? I did and it raised more than just a chuckle :) :) :)
🤦🏽♂️🤔😂😂 A google search on the first lot provided a interesting set of results
-
As an aside, thank you all for your feedback! I appreciate it! :)
Thank you for helping us to keep out of mischief. 8)
coothead
I can’t quite work out if that’s an typo or was meant to be.. as both versions work! 🤔😂😂😂😂
-
Did anyone check to see the LAVH meaning? I did and it raised more than just a chuckle :) :) :)
Yes! And I didn’t get past page one!! 🤦🏽♂️😳
-
Regret the delay, I've had three FREE domains expire and the Domain Registrar now wants about twelve dollars each to release the domain :(
What do you reckon to this method of displaying the button/tabbed information?
https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005/ (https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005/)
-
Thanks!
Ill have proper look later!
Hope you get your domain names sorted quickly...
-
Regret the delay, I've had three FREE domains expire and the Domain Registrar now wants about twelve dollars each to release the domain :(
OUCH. Though welcome to why I stopped using free domains 12 years ago. The providers are what you get if you remove all the Jews, Arabs, Africans, and Immigrants from a creche... A bunch of sheep led by a jackass.
What do you reckon to this method of displaying the button/tabbed information?
The use of the checkbox is fine, though those label should probably be inside numbered headings for each of those subsections. Probably as those H3 that you have empty with non-breaking spaces for Christmas only knows what. The extra "div for nothing" don't look like they're doing any favors either, or at least not with the pointless cryptic classes on them. You seem to have a lot of garbage non-breaking spaces for **** knows what.
The big problem is your animation is a broken wreck because you're trying to use that broken max-height trash to do something CSS just can't do without JS assistance.
And as always, crapping style into the markup is just making it harder to understand and work with as well.
You MIGHT be better off overall though for this type of content to use <details> and <summary> instead.
-
@Jason Knight,
What do you reckon to this method of displaying the button.tabbed information?
I have moved that page to the following link:
https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005-ORIGINAL/ (https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005-ORIGINAL/)
Changes now made and created CSS Detail/Summary Version
https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005/ (https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005/)
Probably as those H3 that you have empty with non-breaking spaces for Christmas only knows what.
The empty Divs were to remove the W3.org HTML Validator warning messages about missing H# tags inside a <section>.
The extra "div for nothing" don't look like they're doing any favors either, or at least not with the pointless cryptic classes on them. You seem to have a lot of garbage non-breaking spaces for **** knows what.
The script was quickly copied from another web page that used the additional Divs. The idea was to see if @GrumpyYoungMan liked the alternative layout. It was not optimised.
You MIGHT be better off overall though for this type of content to use <details> and <summary> instead.
The new version uses <details> and <summary> and the CSS had drastically been reduced. Thank you :)
And as always, crapping style into the markup is just making it harder to understand and work with as well.
The "crapping style" is for the benefit of the right-hand Vertical Validation links. The following single line is added to the web page and dynamic links to W3.org validation tools, etc which I find far easier than continually having tp copy and paste links into the validation pages.
[/size]<?php require '/var/www/footer-side.php'; ?>
I like to see the green flash indicating there are no errors or warnings :)
-
The empty Divs were to remove the W3.org HTML Validator warning messages about missing H# tags inside a <section>.
Which is a poster child for why I keep saying simply validating is insufficient and misleading. You should have made them sections with a proper H3, not in H3 with empty non-breaking spaces and DIV soup. you have obvious headings, MAKE THEM HEADINGS!
Just like how the heading orders are complete gibberish, such as the h1 being after the content it describes... and "older version" likely NOT being the header that "everything on EVERY page of the site is a subsection of"... well, unless the site is actually called "older version".
I don't know if that's on you or GYM, either way the use of numbered headings in there is broken nonsense.
And again, the W3C can give my big stick a suckles on the BULLSHIT change to HTML 5 SECTION "requiring" headers, defeating the entire reason it was introduced as an ALTERNATIVE TO HEADERS!
More reason HTML validation is now a giant steaming pile of manure much akin to what CSS validation was in the '00's. A pipe-dream of wishful thinking and bad advice.
-
The empty Divs were to remove the W3.org HTML Validator warning messages about missing H# tags inside a <section>.
Which is a poster child for why I keep saying simply validating is insufficient and misleading. You should have made them sections with a proper H3, not in H3 with empty non-breaking spaces and DIV soup. you have obvious headings, MAKE THEM HEADINGS!
Just like how the heading orders are complete gibberish, such as the h1 being after the content it describes... and "older version" likely NOT being the header that "everything on EVERY page of the site is a subsection of"... well, unless the site is actually called "older version".
I don't know if that's on you or GYM, either way the use of numbered headings in there is broken nonsense.
And again, the W3C can give my big stick a suckles on the BULLSHIT change to HTML 5 SECTION "requiring" headers, defeating the entire reason it was introduced as an ALTERNATIVE TO HEADERS!
More reason HTML validation is now a giant steaming pile of manure much akin to what CSS validation was in the '00's. A pipe-dream of wishful thinking and bad advice.
If it’s based on a code sample from me, the H*’s numbering is probably my fault - although I have and did alter the H’s after your feedback, Jason!
So are we to ignore the w3 validator error messages as I too have seen the message about section and lack of headers?
-
@Jason Knight, @GrumpyYoungMan,
Confusion has arisen and won the day…
This is the new web page and not “Old Version”:
Changes now made and created CSS Detail/Summary Version
https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005/ (https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-swatch/gym/ver-005/)
Edit:
It would be easier if the exact content was known rather than guessing and try to cater for all eventualities.