Databases
StackOverflow2013
Postsdbo
POHTML/CSS header cannot fully displayed in browser
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML/CSS header cannot fully displayed in browser
    text
    copied!<p>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?</p> <p>HTML</p> <pre><code>&lt;body&gt; &lt;!-- begin #header --&gt; &lt;div class="header"&gt; &lt;div class="hd-banner"&gt; &lt;h1&gt;Marryland Learning Center&lt;/h1&gt; &lt;/div&gt; &lt;div class="login"&gt; &lt;form id="loginForm" action="/" method="post"&gt; &lt;div class="hd-caption"&gt; &lt;ul class="hd-login"&gt; &lt;li&gt; &lt;ul&gt; &lt;li class="l-column"&gt; &lt;input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email"&gt; &lt;/li&gt; &lt;li class="l-column"&gt; &lt;input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password"&gt; &lt;/li&gt; &lt;li class="l-column"&gt; &lt;input type="submit" id="signIn" name="signIn" value="Sign in"&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;ul&gt; &lt;li class="l-column"&gt; &lt;input name="RememberMe" type="checkbox" value="true"&gt;&lt;input name="RememberMe" type="hidden" value="false"&gt; &lt;label&gt;Remember me&lt;/label&gt; &lt;/li&gt; &lt;li class="l-column"&gt; &lt;a href=""&gt;Trouble signing in?&lt;/a&gt; &lt;/li&gt; &lt;li class="l-column"&gt; &lt;input type="submit" name="action" value="Register"&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- end #header --&gt;&lt;/div&gt; &lt;div class="nav"&gt; &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href=""&gt;Students&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Teachers&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Training&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!-- end #nav --&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS</p> <pre><code>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; } </code></pre> <p>Update: After changing the CSS according to the answer, another issue is the button(Register and Signin) alignment: <img src="https://i.stack.imgur.com/VXHzG.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload