3
\$\begingroup\$

I've built a modal window as seen in my modal HTML and CSS code below and was looking for any tips/advice regarding how well I've applied any best practices in both my HTML and styling with regards to building a modal window.

Here's the tutorial I followed.

Here's my modal HTML code:

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal_header">

        <div class="modal_title">Log In</div>
      </div>

      <div class="modal_body">

        <div class="log_in_div_option_a">
            <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
        </div>

        <div class="log_in_div_option_b">
            <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
        </div>

        <hr class="hr"></hr>

        <p class="log_in_div_option_c">Or log in using your e-mail</p>

        <div>
            <input title="Enter username" class="firstname" name="firstname" type="text" required placeholder="Enter e-mail">
        </div>

        <div>
            <input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Enter password">
        </div>         
      </div>

      <div class="modal-footer">
        <button type="button" class="btn_close" data-dismiss="modal">Close</button>

        <button type="button" class="btn_log_in">Log In</button>
      </div>

    </div>
  </div>
</div>

Here's my modal CSS code:

    /* */
.modal_header{
    min-height:16.43px;
    padding:15px;
    border-bottom:1px solid #e5e5e5;
    background-color: #A2E55A;
}

/* */
.modal_title{
    font-size: 25px;
    color: #999999;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    background-color: #A2E55A;
    color: #FFFFFF;    
}

/* */
.modal_body{
    position:relative;
    padding:15px;
    background-color: #FFFFFF;
}

/* */
.log_in_div_option_a {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;     
    background-color: #FFFFFF;
}

/* */
.log_in_div_option_b {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;     
    margin-top: 15px;
    background-color: #FFFFFF;
}

/* */
.log_in_div_option_c {
    font-family:'Trebuchet MS', Tahoma, Sans-serif; 
    color: #999999;
    font-size: 20px;
    font-weight: bold;
}

/* Log In button */
.btn_log_in {
    right: 0px;
    width: 150px;  
    height: 36px;
    border:none;
    font-weight: normal;
    font-size: 20px;  
    margin-top: 0px;

    background: #CCC;
    background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    -pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);

    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;

    -webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
    -moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
    box-shadow: inset 1px 0 0px rgba(255,255,255,.4);

    color: #F5F5F5;
}

/* */
.btn_log_in:hover,
.btn_log_in:focus,
.btn_log_in.focus,
.btn_log_in:active,
.btn_log_in.active {
    background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    -pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);

    border-color: #ADADAD;
}
\$\endgroup\$
1
\$\begingroup\$

Your HTML is pretty good, beyond the fact that you do not have a doctype or other supporting HTML elements. You should always construct your HTML files like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Page Title Here</title>
    </head>
    <body>
        <!-- Markup here -->
    </body>
</html>

According to the HTML validator at W3C, you have only one other problem. You should not use a closing </hr> tag; you should just leave that element open.

<hr class="hr"></hr>

Your CSS is perfect according to the CSS validator at W3C; however, you should either remove the /* */ comments at the top of each section or actually use them to state what is happening or what is being modified.

\$\endgroup\$
2
  • \$\begingroup\$ I would say to make it a self closing tag <hr class="hr" /> but that is more XHTML than HTML5 I always have the habit of closing tags, I don't like to leave them open. \$\endgroup\$ – Malachi Jan 29 '15 at 20:05
  • 1
    \$\begingroup\$ Yes, this validates also. \$\endgroup\$ – user34073 Jan 29 '15 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.