CODEWITHSUNDEEP
htmlcss
user2967661
user2967661

Reputation: 13

HTML/CSS header cannot fully displayed in browser

The header part contains a logo and a login panel, but the login panel can only be shown half in the browser(while it actually has to lines, pls see HTML). Any way to adjust the CSS to make the login panel fully displayed?

HTML

<body>
<!-- begin #header -->
<div class="header">
  <div class="hd-banner">
      <h1>Marryland Learning Center</h1>
  </div>
  <div class="login">
    <form id="loginForm"  action="/" method="post">
    <div class="hd-caption">
      <ul class="hd-login">
        <li>
          <ul>
            <li class="l-column">
            <input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
            </li>
            <li class="l-column">
            <input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
            </li>
            <li class="l-column">
            <input type="submit" id="signIn" name="signIn" value="Sign in">
            </li>
          </ul>
    </li>
    <li>
          <ul>
            <li class="l-column">
            <input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
            <label>Remember me</label>
            </li>
            <li class="l-column">
          <a href="">Trouble signing in?</a>
                </li>
            <li class="l-column">
                <input type="submit" name="action" value="Register">  
            </li>
          </ul>
        </li>
      </ul>
    </div>
    </form>
  </div>
<!-- end #header --></div>

<div class="nav">
    <ul class="menu">
    <li><a href="">Students</a></li>
    <li><a href="">Teachers</a></li>
    <li><a href="">Training</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
<!-- end #nav --></div>
</body>

CSS

body 
{
    margin: 0;
    padding: 0; 
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%; /* em best practice, target size ÷ size of content = result */ 
    background-color: rgba(255,255,255,1);
}


/** Header Div **/
/* style .header div: floating the 3-column elements to the left, and giving them width seperately*/
.header 
{
    margin: 0;
    overflow: hidden;  
}

.hd-banner 
{
    float: left;
    width: 50%;
    margin: 0;
    background-color: #FFC;
}


.login
{
    position: relative;
}

.hd-caption
{
    position: absolute;
    top: 30%;
    right: 20px;
}

.hd-login
{
    display: inline-block;
    margin-top: 30px;
    list-style: none;
}

ul
{
    margin: 10px 0;
}

.hd-login li
{
    height: 33px;
    list-style: none;
}

.l-column 
{
    margin-left: 18px;
    overflow: hidden;
    float: left;
}

.state-inp-sign-in
{
    -moz-outline: none;
    outline: none;
    width: 130px;
    height: 28px;
    line-height: 24px;
}

button, input, select, textarea
{
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}


/** Nav Div **/
ul.menu 
{
        list-style-type: none;
        padding: 1em;
        clear: both; /* starts the nav below the floated header */
        overflow:hidden;
        text-align:center;
        background-color:#98bf21;
}

ul.menu li 
{
        display:inline-block;
}

ul.menu li a:link, a:visited 
{
        margin:0 auto;
        display:block;
        width: 120px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        padding:4px;
        text-decoration:none;
        text-transform:uppercase;
}
ul.menu li a:hover, a:active 
{
        background-color:#7A991A;
}

/** forms styling **/
.sidebar form 
{
    width: 15em;
    border: 1px solid #666;
    border-radius: 10px;
    box-shadow: .2em .2em .5em #999;
    background-color: #d0e9f6;
    padding:1em;
}

.sidebar legend 
{
    text-align: left;
    font-weight: bold;
    font-size: 1.2em;
}

label {
    display: block;
    width: 8em;
    text-align: left;
    color: #04699d; 
}

Update: After changing the CSS according to the answer, another issue is the button(Register and Signin) alignment: enter image description here

Upvotes: 1

Views: 529

Answers (1)

Angry Goomba
Angry Goomba

Reputation: 470

The problem is twofold:

  1. you're limiting the height of .hd-login li which cuts off the panel

  2. the margin-top on your hd-login is pushing the panel too low.

Remove the height attribute on your .hd-login li

Change the margin-top attribute to -5px on .hd-login

I strongly recommend that you make your CSS responsive; as it stands if you reduce window size it collapses your window which is not ideal.

Cheers

Upvotes: 1

Related Questions