1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

<br> not working in floxbox

Discussion in 'HTML & Website Design' started by ketting00, Nov 10, 2022.

  1. #1
    Hi guys,

    I've created a simple login page and I want everything appears in the center vertically and horizontally. This would use mostly on a mobile phone. So I use flexbox as a solution.

    The problem: the <br> tag doesn't seem to work in flexbox.

    HTML:
    
    <div class="centerEverything">
        <form id="loginForm" method="POST" action="../login.js">
            <label for="email">
                <input type="email" name="email" id="loginEmail" size="30" required> *<br>
            </label>
            <label for="password">
                <input type="password" name="password" id="password" size="30" required> *<br>
            </label>
            <input type="submit" value="Log in"><br>
        </form>
        <br>
        <a href="../forgotPassword.html">Forgot password?</a>
    </div>
    
    Code (markup):
    CSS:
    
    .centerEverything {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    Code (markup):
    How do I fix this and thanks in advance.

    Noted: I'm going to do something similar to this: https://medium.com/@girishsolanki20/15-ui-ux-design-trends-in-2022-2023-d28260c29fc6
     
    ketting00, Nov 10, 2022 IP
  2. denis bayly

    denis bayly Active Member

    Messages:
    90
    Likes Received:
    24
    Best Answers:
    5
    Trophy Points:
    60
    #2

    Try it like this...
    
    
    .centerEverything {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    Code (markup):

    coothead
     
    denis bayly, Nov 10, 2022 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    764
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    @coothead,

    It works.

    Thank you.
     
    ketting00, Nov 10, 2022 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,077
    Likes Received:
    1,625
    Best Answers:
    27
    Trophy Points:
    475
    #4
    Also if you want to add spaces between the fields and the button you can add a line-height:

    .centerEverything {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 2em;
    }
    Code (markup):
     
    qwikad.com, Nov 10, 2022 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    764
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    ketting00, Nov 10, 2022 IP
  6. DevHub

    DevHub Banned

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    why did you use *<br> instead of just <br>
     
    DevHub, Nov 20, 2022 IP
  7. denis bayly

    denis bayly Active Member

    Messages:
    90
    Likes Received:
    24
    Best Answers:
    5
    Trophy Points:
    60
    #7

    To display an asterisk immediately after the required input elements. :D

    coothead
     
    denis bayly, Nov 20, 2022 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,650
    Likes Received:
    1,976
    Best Answers:
    250
    Trophy Points:
    515
    #8
    Since you're not setting a height I'm not even sure just what it is you think you need flex for. The markup though is horrifying with the outer DIV doing the FORM's job, lack of FIELDSET, lack of actual text for your LABEL, FOR/ID for nothing since you're using wrapping LABEL, submit input like you still care about supporting Nyetscape 4...

    Your markup likely should have gone more like this:

    
    <form id="loginForm" method="post" action="/login.js">
    	<h2>Log In</h2>
    	<fieldset>
    		<label>
    			E-Mail Address<br>
    			<input type="email" name="email" size="30" required><br>
    		</label>
    		<label>
    			Password<br>
    			<input type="password" name="password" size="30" required><br>
    		</label>
    	</fieldset>
    	<footer>
    		<button>Log In</button><br>
    		<a href="../forgotPassword.html">Forgot password?</a>
    	</footer>
    </form>
    
    Code (markup):
    Oh and for those "required" asterisks, since you've got perfectly good HTML 5 validation there, just ditch them. If you REALLY want to add some sort of visual queue to it, input[required] in the CSS can do all sorts of wonderful things.

    Again though I have no idea what the devil you're making it flex for without any sort of height management, unless it itself is inside a flex container as well... and even then it doesn't make a lot of sense.
     
    deathshadow, Nov 21, 2022 IP
  9. ketting00

    ketting00 Well-Known Member

    Messages:
    764
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #9
    Thanks @deathshadow

    I'm only coding HTML and CSS once in a while. I'm just googling everything I want. I'll study your tips.
    The purpose of the flex is making everything in the middle center. The form will be used mostly on mobile phones or some other things like tablet.
     
    ketting00, Nov 21, 2022 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,650
    Likes Received:
    1,976
    Best Answers:
    250
    Trophy Points:
    515
    #10
    Horizontally (where you don't need or even want flex) or vertically (where without a height or min-height your flex does nothing)?

    I'm not seeing anything flex provides that margin:auto would not.
     
    deathshadow, Nov 23, 2022 IP
  11. ketting00

    ketting00 Well-Known Member

    Messages:
    764
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #11
    I'm sorry I don't quite follow you. I'm not very good at HTML and CSS.

    Flexbox helps me get the job done nicely.

    I remember, in the old day (the last time I built a large web site project is 2017), when I want to center anything vertically and horizontally I have to have a wrapper div displayed as table and the inner one displayed as table cell. I hate it a lot and I stayed at the backend ever since.

    Fast forwards to these days, they have a flexbox and a clamp() function which I never heard of before and they help getting things done neatly. No more media queries needed and it's easier to get the intended designs. Those are the designs I can only dream of in the old days because I'm unable to do it myself.

    Now everything is easier. Though I was forced to do this, I started to love designing web sites again :cool:
     
    ketting00, Nov 25, 2022 IP