CutCodeDown
Web Development => HTML / CSS => Topic started by: GrumpyYoungMan on 14 Dec 2021, 10:51:00 am
-
If you use:
<ul>
<li>Login</li>
<li>Register</li>
</ul>
It puts an annoying gap between the two LI choices, BUT if you use:
<ul>
<li>Login</li><li>Register</li>
</ul>
It doesn't - now is this just a quirk of the HTML and code editor or is there a way to remove the gap?
Perhaps an very stupid question, but its one that annoys me...
-
Hi there GYM,
I am unable to discern any HTML difference in either Firefox or Vivaldi. ::)
Are you using any CSS in your test?
coothead
-
Hi there GYM,
I am unable to discern any HTML difference in either Firefox or Vivaldi. ::)
Are you using any CSS in your test?
coothead
Yes, sure am!
No laughing - 'Pen (https://codepen.io/GrumpyYoungMan/full/YzrNjxY).
(The double login/register options are there to highlight the problem)
-
Hi there GTM,
as expected, the problem was in the CSS rather than the HTML. ::)
Full Page View
https://codepen.io/coothead/full/oNGBPoQ (https://codepen.io/coothead/full/oNGBPoQ)
Editor View
https://codepen.io/coothead/pen/oNGBPoQ (https://codepen.io/coothead/pen/oNGBPoQ)
coothead
-
Hi there GTM,
as expected, the problem was in the CSS rather than the HTML. ::)
Full Page View
https://codepen.io/coothead/full/oNGBPoQ (https://codepen.io/coothead/full/oNGBPoQ)
Editor View
https://codepen.io/coothead/pen/oNGBPoQ (https://codepen.io/coothead/pen/oNGBPoQ)
coothead
Thanks, Coothead! 🙂
I’m on my phone so I’ll have a proper look later on the laptop, looks like you made quite a few changes tho…
-
...looks like you made quite a few changes tho…
These are the CSS amendments I made...
body > header {
display:flex;
justify-content: space-between; /* added */
}
/*body > header h1,
body > header ul {
flex: 0 50%;
}*/
/*body > header nav {
flex: 1;
text-align: right;
}*/
/*nav {
padding-right:0.75em;
}*/
#headerOptions {
padding:0.5em 0.75em 0 0; /* added */
}
#headerOptions ul{
display: flex;
list-style: none; /*added */
}
/*#headerOptions li {
display: inline-block;
}*/
#headerOptions li:not(:last-child):after {
content: "\2022";
padding: 0.5em;
/*display: inline-block;*/
}
coothead
-
So, basically it looks like instead of using the LI as a inline block we flex the UL instead?
Although I’m not quite sure why the space around positions the h1 and nav to the left and right?
Thank you!!!
-
Some other observations...
FORM is SECTION level, so why the section?
What makes "restricted area - login required" a heading describing what the section is/does and/or the creation of a new subsection?
IF you don't have a margin auto container inside a flex centering, if the screen is too short it will chop off the top with no ability to scroll up.
"HeaderOptions" is decidedly vague. That's your main menu isn't it?
Placeholder is for an example of what to type in, such as a username might be "JimboJones", not "username"
If your starting value is empty, don't say value=""
Pure red and pure brown are illegible on a dark background for most of the population, as is your nearly invisible dark blue on dark blue for the h1's anchor. Again checheckitycheck yourself... (https://www.youtube.com/watch?v=DGJWDKGA6Ik)
Oh wait, that's the wrong link.
https://webaim.org/resources/contrastchecker/
The default type for a button is "submit", so you don't need to say that.
Your formatting is screwed up in firefox here, with the input bei9ng decidedly broken. I suspect that's your use of the "universal" reset screwing over sizing of INPUT tags. There's a reason I NEVER * { margin:0; padding:0; }, even in testing. It's also triggering double scrollbars at some screen sizes, that's likely a result of setting flex on HTML in addition to BODY. That can have weird side-effects.
Courier new is a shitty font-face for screen media, and you failed to provide a fallback family. (serif in this case)
Pages should only have one H1, thus saying "body > header h1" is pretty pointless;
And this is more of a silly nitpick, but your code formatting is all over the blasted place. It looks like tabs and spaces are intermingled and inconsistently applied. Though that could just be codepen's shitty editors screwing with things.
Czech it:
https://codepen.io/jason-knight/pen/jOGBNLZ
-
Some other observations...
FORM is SECTION level, so why the section?
What makes "restricted area - login required" a heading describing what the section is/does and/or the creation of a new subsection?
IF you don't have a margin auto container inside a flex centering, if the screen is too short it will chop off the top with no ability to scroll up.
"HeaderOptions" is decidedly vague. That's your main menu isn't it?
Placeholder is for an example of what to type in, such as a username might be "JimboJones", not "username"
If your starting value is empty, don't say value=""
Pure red and pure brown are illegible on a dark background for most of the population, as is your nearly invisible dark blue on dark blue for the h1's anchor. Again checheckitycheck yourself... (https://www.youtube.com/watch?v=DGJWDKGA6Ik)
Oh wait, that's the wrong link.
https://webaim.org/resources/contrastchecker/
The default type for a button is "submit", so you don't need to say that.
Your formatting is screwed up in firefox here, with the input bei9ng decidedly broken. I suspect that's your use of the "universal" reset screwing over sizing of INPUT tags. There's a reason I NEVER * { margin:0; padding:0; }, even in testing. It's also triggering double scrollbars at some screen sizes, that's likely a result of setting flex on HTML in addition to BODY. That can have weird side-effects.
Courier new is a shitty font-face for screen media, and you failed to provide a fallback family. (serif in this case)
Pages should only have one H1, thus saying "body > header h1" is pretty pointless;
And this is more of a silly nitpick, but your code formatting is all over the blasted place. It looks like tabs and spaces are intermingled and inconsistently applied. Though that could just be codepen's shitty editors screwing with things.
Czech it:
https://codepen.io/jason-knight/pen/jOGBNLZ
Thanks, I will work on that - will post the fixes for you to review!
-
The 'pen (https://codepen.io/GrumpyYoungMan/full/YzrNjxY) has been updated with some of the changes Jason/CootHead have recommended, but I haven't finished yet, but my day job is calling me now so need to go to work to actually earn some money...
The only problem I have which hasn't been fixed yet, as it's beating me is the hover on the header, the small won't change colour on the hover, but the h1 text does... any ideas?
-
Hi there GYM,
this...
h1 a:hover {
color: #adff2f;
}
...needs to be this...
h1 a:hover,
h1 a:hover small {
color: #adff2f;
}
coothead
-
...needs to be this...
WHY? Small's default colour setting is inherit. There is no reason to set that. Even for pseudostates.
-
WHY? Small's default colour setting is inherit.
Be that as it may, GYM's code...
h1 a small {
display: block;
font: normal 0.5em Helvetica;
color: #b0e0e6;
}
...appears to nullify it.
coothead
-
Hi there GYM,
this...
h1 a:hover {
color: #adff2f;
}
...needs to be this...
h1 a:hover,
h1 a:hover small {
color: #adff2f;
}
coothead
I tried that and it didn't work as I expected it to - think from memory it would change if you went over the subheader but if you hovered over the H1 first it didn't!
Thank you!
-
Be that as it may, GYM's code...
We must be looking at different code. I don't see that anywhere in his pens.
-
Thanks! :)
Be that as it may, GYM's code...
We must be looking at different code. I don't see that anywhere in his pens.
This one (https://codepen.io/GrumpyYoungMan/pen/YzrNjxY)
CSS:
html,
body {
margin: 0;
padding: 0;
background: #000;
color: #fff;
font: normal 1em/1.5 "Courier";
box-sizing: border-box;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
a {
color: inherit;
text-decoration: none;
}
body > header {
display: flex;
justify-content: space-between;
}
h1 a {
color: #6495ed;
}
h1 a small {
display: block;
font: normal 0.5em Helvetica;
color: #b0e0e6;
}
h1 a:hover {
color: #adff2f;
}
/* Header - User Options */
#userOptions-Main ul {
display: flex;
list-style: none inside none;
}
#userOptions-Main li:not(:last-child):after {
content: "\2022";
padding: 0.5em;
}
#userOptions-Main a {
color: #f6714c;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body > footer {
text-align: center;
color: #9cc5a1;
padding: 0.5em 0;
}
/* Form - Login */
#form_Login h2,
#form_Login h3 {
text-align: center;
padding: 0.5em 0;
}
#form_Login div:first-of-type {
color: #ff6666;
font: bold 1.25em Verdana;
padding: 0.5em 0;
text-align: center;
}
#form_Login fieldset {
display: flex;
border: none;
flex-direction: row;
flex-wrap: wrap;
}
#form_Login input {
font: inherit;
}
#form_Login label:after {
content: ":";
display: inline-block;
}
#form_Login label {
width: 20%;
justify-content: center;
}
#form_Login input {
width: 80%;
padding: 0.5em 0.25em;
}
#form_Login label,
#form_Login input {
margin: 1em 0;
}
#form_Login input:hover {
background: #9cc5a1;
}
#form_Login input:focus {
background: #4da87d;
}
#form_Login footer {
text-align: center;
}
#form_Login footer button {
border: none;
background: none;
font: bold 1em Verdana;
color: inherit;
}
#form_Login footer button:hover {
color: #759ab8;
}
-
We must be looking at different code.
I don't see that anywhere in his pens.
Further to the information provided by GYM in post #15, the
code snippet to which I referred may be found on line #35. 8)
coothead
-
This one (https://codepen.io/GrumpyYoungMan/pen/YzrNjxY)
Which you didn't link to anywhere in this thread until that post. That's:
YzrNjxY
When the ONLY link provided prior to that is:
oNGBPoQ
Are you guys discussing this on another forums or something? Deleted your own post under the time limit?
-- edit -- Oh wait, I see it, post #9, a three letter barely visible link. This is why I don't like it when people do that on forums. I always miss links when they're presented that way. When you say you "updated the pen" I assume it's the same URI. Otherwise you FORKED the pen. Like I did.
-
Are you guys discussing this on another forums or something?
You are joking, of course. :)
There are now only two coding forums left...
- https://www.codingforum.net/ (https://www.codingforum.net/)
- https://forums.cutcodedown.com/ (https://forums.cutcodedown.com/)
...and you, GYM and yours truly are members. 8)
Putting that aside, do you have any further comments
to make regarding my post #10 and your post #11?
coothead
-
Are you guys discussing this on another forums or something? Deleted your own post under the time limit?
No and not even in private anywhere! I only post here to be honest, I like your no polish, tell it the way it is approach and I have always felt welcome.
...
a three letter barely visible link.
...
Sorry!
This one (https://codepen.io/GrumpyYoungMan/pen/YzrNjxY)
Which you didn't link to anywhere in this thread until that post. That's:
YzrNjxY
When the ONLY link provided prior to that is:
oNGBPoQ
Are you guys discussing this on another forums or something? Deleted your own post under the time limit?
-- edit -- Oh wait, I see it, post #9, a three letter barely visible link. This is why I don't like it when people do that on forums. I always miss links when they're presented that way. When you say you "updated the pen" I assume it's the same URI. Otherwise you FORKED the pen. Like I did.
I am so sorry, I didn’t knowingly change the pen, I only updated it as far as I was aware, I didn’t know a ne one was created - when I said updated the pen I literally meant that, I didn’t mean I created a new one! Sorry for the confusion!
-
I am so sorry, I didn’t knowingly change the pen, I only updated it as far as I was aware, I didn’t know a ne one was created - when I said updated the pen I literally meant that, I didn’t mean I created a new one! Sorry for the confusion!
Happens. Especially with codepen's garbage UI. I only use it now because it embeds so nicely into certain places like Medium and because others like it.
I don't like it one damned bit, which is why I still do all my dev and testing locally and only copy the results into CP when other want to see it. It's utterly useless trash for doing development or even basic testing inside.
But what do I know? I say the same thing about the mental masturbation that is Git.
-
Happens. Especially with codepen's garbage UI. I only use it now because it embeds so nicely into certain places like Medium and because others like it.
I don't like it one damned bit, which is why I still do all my dev and testing locally and only copy the results into CP when other want to see it. It's utterly useless trash for doing development or even basic testing inside.
But what do I know? I say the same thing about the mental masturbation that is Git.
ALOT more than me, as I know nothing really!! Maybe I am a classic example of a little bit of knowledge is dangerous? I’ve never used GIT…
Anyway, have you got any ideas, you want to share on how I can sort my small and hover colours out? 🙏
Please and thank you!
-
have you got any ideas on how I can sort my small and hover colours out?
What , exactly are these requirements?
What color effect(s) do you require on hovering Demo Login?
What color effect(s) do you require on hovering Simple Login & Logout?
coothead
-
have you got any ideas on how I can sort my small and hover colours out?
What , exactly are these requirements?
What color effect(s) do you require on hovering Demo Login?
What color effect(s) do you require on hovering Simple Login & Logout?
coothead
The hover needs to be green-yellow but it only affects the H1 and not the small - if I add the small:hover then that will change to the green-yellow but not the H1 text...
-
Full Page View
https://codepen.io/coothead/full/wvrdqrL (https://codepen.io/coothead/full/wvrdqrL)
Editor View
https://codepen.io/coothead/pen/wvrdqrL (https://codepen.io/coothead/pen/wvrdqrL)
coothead
-
Lose the span...
<h1>
<a href="?">
Demo Login
<small>Simple Login & Logout</small>
</a>
</h1>
Then set the hover on the anchor AND the anchor small.
h1 a:hover,
h1 a:hover small {
color: #AF2;
}
If you want both to change. If you want them to change to different colours:
h1 a:hover {
color: #AF2;
}
h1 a:hover small {
color: #9E0;
}
Either way the interactive pseudostates -- hover, focus, etc -- should be done on focusable elements like anchor or button. Hover states on non-interactable elements is just asking for trouble in all but a few narrow cases like dropdown menus. (and even then that's a BAD idea)
Though the "new" -- if a decade can be called new -- ":focus-within" property has worked wonders for things like complex menus in terms of accessibility.
-
Lose the span...
Then set the hover on the anchor AND the anchor small.
h1 a:hover,
h1 a:hover small {
color: #AF2;
}
I know, for some unknown reason, you tend to ignore me,
but that is EXACTLY what I suggested in my post #10
h1 a:hover,
h1 a:hover small {
color: #adff2f;
}
To which you, in your infinite wisdom, replied in post #11 ...
WHY? Small's default colour setting is inherit.
There is no reason to set that.
Have you not considered the possibility that my use of
the span element was for a different hovering effect to
the one which you obviously assume GTM requires?
Will you reply to this post, well, on current form, i most
certainly won't be holding my breath.
coothead
-
Hi there GYM,
is this green-yellow problem of yours now resolved?
coothead
-
Hi there GYM,
is this green-yellow problem of yours now resolved?
coothead
Yes, it did, thank you, although it’s not green-yellow now! 🤦🏽♂️😂
Sorry for causing the argument and the delay in responding!
-
So, which method is the best practice? Is it inline-block or flex? or is it developer dependent?