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: Center Form with minimal html/css  (Read 692 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Center Form with minimal html/css
« on: 13 Jul 2022, 03:40:44 am »
Well, I have kind off found my mojo again, but currently locked out my CodePen so I'm having to post the rawe code here! Sorry!

HTML:
Code: [Select]
<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="gym-login-screen.css">
</head>
<body>
<header>
    <h1><a href="?">Maximus</a></h1>
</header>
<main>
<form id="login_Form" method="post" action="login">
    <h2>Login Required</h2><h3>35 bad user/password combo!</h3><label for="username">Username</label>
<input id="username" type="text" name="username">
<br>
<label for="password">Password</label>
<input id="password" type="password" name="password">
<br>
<button type="submit">Login</button>
</form></main>
<footer>&copy; 2022 GYM<br/>Powered by <a href="https://maximus.gym.co.uk">Maximus</a></footer>
</body>
</html>

CSS:
Code: [Select]
html,
body {
    margin:0;
    padding:0;
    height:100%;
}

body {
    font: normal 1em / 1.5 "Verdana";
    background: #000;
    color: #FFF;

    display:flex;
    flex-direction: column;
}

a {
    color:inherit;
    text-decoration: none;
}

a:hover{
    color: #adff2f;
}

header,
footer {
    flex: 0;
    background:#111;
}
main {
    flex: 1;
}

h1 {
    text-align:center;
}


#login_Form {
    background: #222;
    height: 100%;display:flex;flex-direction: column;
    width: 25%;
    margin:auto;


    justify-content: center;
}

#userHeaderOption {
    background:#222;
    padding: 0.25em 0.5em;
}
#userHeaderOption span {
    font-weight: bold;
}

How can I border only the form without the (#222) strip?

I do not want to alter the main tag CSS as that is used elsewhere once the login has been successful!
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: Center Form with minimal html/css
« Reply #1 on: 13 Jul 2022, 05:02:49 am »
Hi there GYM,

have you tried removing height:100%; from here...
Code: [Select]
#login_Form {
    background: #222;
    height: 100%;
    display:flex;
    flex-direction: column;
    width: 25%;
    margin:auto;
    justify-content: center;
}

coothead
~ the original bald headed old fart ~

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Center Form with minimal html/css
« Reply #2 on: 13 Jul 2022, 05:16:53 am »
Hi there GYM

I've popped an example into codepen...

Full Page View
https://codepen.io/coothead/full/BarLVML

Editor View
https://codepen.io/coothead/pen/BarLVML

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: Center Form with minimal html/css
« Reply #3 on: 13 Jul 2022, 11:47:21 am »
Hi there GYM

I've popped an example into codepen...

Full Page View
https://codepen.io/coothead/full/BarLVML

Editor View
https://codepen.io/coothead/pen/BarLVML

coothead

I'm sorry, I didn't explain myself properly! :/ :'(

I wanted it in the middle of the window, just without the strip but with a form border!

Sorry, Coothead and 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: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Center Form with minimal html/css
« Reply #4 on: 13 Jul 2022, 01:41:33 pm »
Hi there GYM,

no need to apologise, the first code that I posted would
have been needed, anyway,  to achieve your final goal.

Full Page View
https://codepen.io/coothead/full/OJvRYbL

Editor View
https://codepen.io/coothead/pen/OJvRYbL

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: Center Form with minimal html/css
« Reply #5 on: 13 Jul 2022, 02:22:09 pm »
Thanks, I guess there isn’t any other way to do it other than by adding the div as a wrapper! 🤪🤦🏽‍♂️🤦🏽‍♂️
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: Center Form with minimal html/css
« Reply #6 on: 13 Jul 2022, 02:59:19 pm »
Quote from: GrumpyYoungMan
I do not want to alter the main tag CSS as that is used
elsewhere once the login has been successful!
I saw that and so I added a container.

Quote from: GrumpyYoungMan
Thanks, I guess there isn’t any other way to do it other than
by adding the div as a wrapper!

Well, of course, we  don't need to add the div as a wrapper.
Unfortunately, I don't get that many opportunities to write
code nowadays and often overlook the obvious.

Just remove the div altogether and add...
Code: [Select]
id="form-container" to the <main> element.

coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Center Form with minimal html/css
« Reply #7 on: 13 Jul 2022, 06:12:27 pm »
As is often the case with this stuff, your code makes me ask more questions... like with that styling why waste the for/id when you could wrap? Where are your fieldsets? What makes the error message the start of a new subsection of the page (aka what H3 means)?!?

Oh and the default type="" of a <button> is submit, so you don't have to say type="submit" unless you're using it for JS or CSS selector matching. That's why we have to set type="button" when we don't want it to behave as a submit. Yes, that's crazy but it's how it works. The default type="" for a button tag is submit, not button.

Thus no matter how crazy <button role="button"> or <button class="button"> is, <button type="button"> is actually a thing we occasionally "need" to declare.

Same for input, unless you're using it as a selector target you don't need to say type="text" because that's the default behavior.

Try this on for size:

https://codepen.io/jason-knight/pen/PoRbYBq
« Last Edit: 13 Jul 2022, 06:16:18 pm by Jason Knight »
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: Center Form with minimal html/css
« Reply #8 on: 14 Jul 2022, 03:41:17 am »
Try this on for size:

https://codepen.io/jason-knight/pen/PoRbYBq

Perfect! Thank You!!

What colour would you put the nav bar under the main header now?

Oh and the default type="" of a <button> is submit, so you don't have to say type="submit" unless you're using it for JS or CSS selector matching. That's why we have to set type="button" when we don't want it to behave as a submit. Yes, that's crazy but it's how it works. The default type="" for a button tag is submit, not button.

Thus no matter how crazy <button role="button"> or <button class="button"> is, <button type="button"> is actually a thing we occasionally "need" to declare.

Same for input, unless you're using it as a selector target you don't need to say type="text" because that's the default behavior.
I forget about that - it was only a very quick and dirty layout which hadn't been optimised because I ran into the center problem - and I was trying to reduce tags/html but you have now done it for me - I maybe I was trying to be too extreme! :)

I am only an amateur and trying to learn still, I guess I am a goldfish trying to swim with sharks!


I appreciate the time Jason and Coothead you take to reply and assist! Thank you!!!
« Last Edit: 14 Jul 2022, 03:48:20 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...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: Center Form with minimal html/css
« Reply #9 on: 14 Jul 2022, 03:42:22 am »
oh this is a new one on me:
Code: [Select]
--pad:clamp(1rem, min(4vw, 4vh), 2rem);
Will have to look clamp up...
« Last Edit: 14 Jul 2022, 05:21:11 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...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Center Form with minimal html/css
« Reply #10 on: 14 Jul 2022, 11:52:21 pm »
oh this is a new one on me:
clamp(min, range, max)

Just beware that "the new IE" (aka Safari) has shit support across its platforms since crApple loves to not push new browser versions to devices less than a year old. Compounded with their lagging behind two to five years on features, if you use clamp, min, or max you're making the conscious decision to tell Apple product users to go f*** themselves.

Something I honestly at this point not only have no problem with, I'm ready to openly embrace the idea. If Apple wants their browser to be as broken as IE was for most of the past fifteen years, I'm more than willing to say screw supporting their overpriced rinky predatory garbage anymore!

I've long been against anyone lighting money on fire with Apple products, but this has gone too damned far. ANY other company pulled half the stunts they have the past four decades would have everyone involved from middle-management upwards imprisoned, and I cannot fathom how anyone can be so gullible, ignorant, or outright hairbrained as to waste time on anything they create.

**** Apple, **** Apple users, and anyone has a problem with that, **** you too!
« Last Edit: 14 Jul 2022, 11:59:29 pm by Jason Knight »
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.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Center Form with minimal html/css
« Reply #11 on: 22 Jul 2022, 06:48:33 am »
Apologies for that, my frustration with the mind-numbing dumbass "Stupid" that is Apple boiled over.
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: Center Form with minimal html/css
« Reply #12 on: 22 Jul 2022, 02:09:55 pm »
Apologies for that, my frustration with the mind-numbing dumbass "Stupid" that is Apple boiled over.
There is absolutely no need to be sorry. I like your straight no nonsense approach!
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...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Center Form with minimal html/css
« Reply #13 on: 22 Jul 2022, 03:17:17 pm »
It's getting worse, my VirtualBox install just went bits up when I accidentally hit "full upgrade" instead of just updating the normal software. You have to do a settings repatch each and every damned time.

So I'm probably just gonna clean sweep and install Monterrey from scratch. What a buggy slow shit-show of an OS.
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.

 

SMF spam blocked by CleanTalk

Advertisement