CSS Layout alginment problems
Question
I am creating a webpage, but have some problems with the page layout, especially the alignment. The problems are:
My login part cannot be fully shown in the header, and cannot be aligned well. I would like it to look like this website: http://www.seek.com.au
The page has a two-column layout, but right now they look ugly. Is there a better way to style it? For example these two columns centered in the page, and there are nice borders around them.
How to add images to the background and the logo(in the header)?
I'd like to make the page layout better by modifying the CSS or HTML, I tried hours and hours but still didn't figure it out.Please give me some advice, thanks.
Here is the HTML and CSS:
<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>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
</html>
Here is 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;
}
/** Content Div **/
.content
{
clear: both; /* clear #nav ul li's following elements */
width: 100%; /* set the width of #content to 100% */
overflow: hidden; /* make it stretch to contain the floated elements */
margin-top: 3em;
}
.sidebar
{
float: left;
width: 30%;
margin-right: 5%;
}
.main
{
float: left;
width: 65%;
overflow: hidden; /* make it stretch to contain the floated elements */
}
/** Footer Div **/
.footer
{
clear: left; /* starts the footer below the floated content */
overflow: hidden; /* make it stretch to contain the floated elements */
width: 100%; /* fix float containment fail */
margin-top: 1em;
}
ul.footer-menu
{
list-style-type: none;
padding: 0;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#999;
}
ul.footer-menu li
{
display:inline-block;
}
ul.footer-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.footer-menu li a:hover, a:active
{
background-color:#7A991A;
}
.copyright
{
text-align: center;
}
/** 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;
}
input[type="submit"]
{
display: block;
width: 7em;
height: 1.8em;
background: white;
font-size: inherit;
border: 1px solid #04699d;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0,0,0,.5);
text-align: center;
}
.main form {
width: 30em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
I made a jsfiddle also: http://jsfiddle.net/JA3x9/
Can anyone help?
2 answers
solution1
0 ACCPTED 2013-11-12 04:42:34
This is a lot of change, but assuming you can make your elements in the header (and other places) <div> s instead of lists ( <ul> , <li> , etc), give this a try:
CSS:
body {
background-color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header {
margin: 0;
min-height: 70px;
overflow: hidden;
}
.hd-banner {
background-color: #FFFFCC;
height: 95px;
left: 0;
margin: 0;
max-width: 50%;
position: absolute;
text-align: center;
top: 0;
width: 1000px;
}
.login {
left: 50%;
margin: 0;
max-width: 50%;
position: relative;
top: 10px;
}
.hd-caption {
clear: both;
height: 35px;
}
.hd-login-top, .hd-login-bottom {
display: inline;
text-align: center;
}
.t1, .t2, .t3, .b1, .b2, .b3 {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 32%;
width: 400px;
}
.state-inp-sign-in {
height: 28px;
line-height: 24px;
outline: medium none;
width: 130px;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
ul.menu {
background-color: #98BF21;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 1em;
text-align: center;
}
ul.menu li {
display: inline-block;
}
ul.menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
ul.menu li a:hover, a:active {
background-color: #7A991A;
}
.content {
clear: both;
margin-top: 3em;
overflow: hidden;
width: 100%;
}
.sidebar {
float: left;
margin-right: 5%;
width: 30%;
}
.main {
float: left;
overflow: hidden;
width: 65%;
}
.footer {
clear: left;
margin-top: 1em;
overflow: hidden;
width: 100%;
}
ul.footer-menu {
background-color: #999999;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 0;
text-align: center;
}
ul.footer-menu li {
display: inline-block;
}
ul.footer-menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
width: 120px;
}
ul.footer-menu li a:hover, a:active {
background-color: #7A991A;
}
.copyright {
text-align: center;
}
.sidebar form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 15em;
}
.sidebar legend {
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
label {
color: #04699D;
text-align: left;
width: 8em;
}
input[type="submit"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #04699D;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
font-size: inherit;
height: 1.8em;
width: 7em;
}
.main form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 30em;
}
.hd-login-bottom a {
color: #04699D;
text-decoration: none;
}
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">
<div class="hd-login-top t1">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email" />
</div>
<div class="hd-login-top t2">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password" />
</div>
<div class="hd-login-top t3">
<input type="submit" id="signIn" name="signIn" value="Sign in" />
</div>
</div>
<div class="hd-caption-2">
<div class="hd-login-bottom b1">
<label for="RememberMe"><input name="RememberMe" type="checkbox" value="true"> <input name="RememberMe" type="hidden" value="false" /> Remember me</label>
</div>
<div class="hd-login-bottom b2">
<a href="">Trouble signing in?</a>
</div>
<div class="hd-login-bottom b3">
<input type="submit" name="action" value="Register" />
</div>
</div>
</form>
</div>
</div>
<!-- end #header -->
<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>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
solution2
0 2013-11-12 04:56:02
Alter your style sheet as follows:
1) and 3)
.header {
margin: 0;
overflow: hidden;
display: table;
padding: 20px;
background-color: #fFc;
width: 100%;
}
.hd-banner {
margin: 0;
display: table-cell;
background: url(logo.png) 0 0 no-repeat;
}
h1 {
font-size:1.5em;
}
.login {
display: table-cell;
}
li.l-row {
display:table;
}
ul.full-width {
width:100%;
}
.l-column {
padding: 2px 2px;
overflow: hidden;
display:table-cell;
}
.hd-caption {
top: 30%;
right: 20px;
}
2)
.content {
clear: both;
width: 100%;
overflow: hidden;
margin-top: 3em;
display: table;
}
.sidebar {
width: 30%;
display: table-cell;
padding: 20px;
}
.main {
display: table-cell;
padding: 20px;
}
3) already covered in first part by
background: url(logo.png) 0 0 no-repeat;
you need to add the l-row and full width classes your your form as follows
<ul class="hd-login">
<li class="l-row">
<ul class="full-width">
<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 class="l-row">
<ul class="full-width">
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
layout problems with CSS position
CSS layout problems
Problems with layout css and javascript
CSS grid layout problems
Layout problems with CSS
CSS Layout Problems
CSS Layout Problems, FlowChart Design
css news article layout problems
css and div tag layout problems
CSS: Special Fluid Layout Problems
Related Tags