I downloaded a website template to use for a small project but for some reason the sidebar used for navigation gets cut short when the content DIV isn't at least the height of the page. I've been tinkering with the CSS and inspecting it through Firefox Web Developer but aside from having the "min-height" set to something very large, I am not sure how to fix this issue.
Any suggestions as to what to look at in the CSS would be greatly appreciated.
http://brutalservers.com/dp/index.html
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Device Portal</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tablesorter").tablesorter();
}
);
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
<script type="text/javascript">
$(function(){
$('.column').equalHeight();
});
</script>
</head>
<body>
<header id="header">
<hgroup>
<h1 class="site_title">Device Portal</h1>
<h2 class="section_title">Dashboard</h2><div class="btn_view_site">View Site</div>
</hgroup>
</header> <!-- end of header bar -->
<section id="secondary_bar">
<div class="user">
<p>Brett Powell (3 Messages)</p>
<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container">
<article class="breadcrumbs">Website Admin <div class="breadcrumb_divider"></div> <a class="current">Dashboard</a></article>
</div>
</section><!-- end of secondary bar -->
<aside id="sidebar" class="column">
<form class="quick_search">
<input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</form>
<hr/>
<h3>Devices</h3>
<ul class="toggle">
<li class="icn_new_article">New Article</li>
<li class="icn_edit_article">Edit Articles</li>
<li class="icn_categories">Categories</li>
<li class="icn_tags">Tags</li>
</ul>
<h3>Datacenters</h3>
<ul class="toggle">
<li class="icn_add_user">Add New User</li>
<li class="icn_view_users">View Users</li>
<li class="icn_profile">Your Profile</li>
</ul>
<h3>IP Allocations</h3>
<ul class="toggle">
<li class="icn_folder">File Manager</li>
<li class="icn_photo">Gallery</li>
<li class="icn_audio">Audio</li>
<li class="icn_video">Video</li>
</ul>
<h3>Inventory</h3>
<ul class="toggle">
<li class="icn_settings">Options</li>
<li class="icn_security">Security</li>
<li class="icn_jump_back">Logout</li>
</ul>
</aside><!-- end of sidebar -->
<section id="main" class="column">
<article class="module width_3_quarter">
<header><h3 class="tabs_involved">Content Manager</h3>
<ul class="tabs">
<li>Posts</li>
<li>Comments</li>
</ul>
</header>
<div class="tab_container">
<div id="tab1" class="tab_content">
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Entry Name</th>
<th>Category</th>
<th>Created On</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Lorem Ipsum Dolor Sit Amet</td>
<td>Articles</td>
<td>5th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipsum Lorem Dolor Sit Amet</td>
<td>Freebies</td>
<td>6th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sit Amet Dolor Ipsum</td>
<td>Tutorials</td>
<td>10th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Articles</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Articles</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
</tbody>
</table>
</div><!-- end of #tab1 -->
<div id="tab2" class="tab_content">
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Comment</th>
<th>Posted by</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Lorem Ipsum Dolor Sit Amet</td>
<td>Mark Corrigan</td>
<td>5th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipsum Lorem Dolor Sit Amet</td>
<td>Jeremy Usbourne</td>
<td>6th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sit Amet Dolor Ipsum</td>
<td>Super Hans</td>
<td>10th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Alan Johnson</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Dobby</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
</tbody>
</table>
</div><!-- end of #tab2 -->
</div><!-- end of .tab_container -->
</article><!-- end of content manager article -->
<article class="module width_quarter">
<header><h3>Messages</h3></header>
<div class="message_list">
<div class="module_content">
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
</div>
</div>
<footer>
<form class="post_message">
<input type="text" value="Message" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
<input type="submit" class="btn_post_message" value=""/>
</form>
</footer>
</article><!-- end of messages article -->
<div class="clear"></div>
</section>
</body>
</html>
CSS:
/* Essentials */
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
background: #F8F8F8;
font-size: 12px;
}
.clear {
clear: both;
}
.spacer {
height: 20px;
}
a:link, a:visited {
color: #77BACE;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Header */
header#header {
height: 55px;
width: 100%;
background: #222222 url(../images/header_bg.png) repeat-x;
}
header#header h1.site_title, header#header h2.section_title {
float: left;
margin: 0;
font-size: 22px;
display: block;
width: 23%;
height: 55px;
font-weight: normal;
text-align: left;
text-indent: 1.8%;
line-height: 55px;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
header#header h1.site_title a {
color: #fff;
text-decoration: none;
}
header#header h2.section_title {
text-align: center;
text-indent: 4.5%;
width: 68%;
background: url(../images/header_shadow.png) no-repeat left top;
}
.btn_view_site {
float: left;
width: 9%;
}
.btn_view_site a {
display: block;
margin-top: 12px;
width: 91px;
height: 27px;
background: url(../images/btn_view_site.png) no-repeat;
text-align: center;
line-height: 29px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 #000;}
.btn_view_site a:hover {
background-position: 0 -27px;
}
/* Secondary Header Bar */
section#secondary_bar {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
}
section#secondary_bar .user {
float: left;
width: 23%;
height: 38px;
}
.user p {
margin: 0;
padding: 0;
color: #666666;
font-weight: bold;
display: block;
float: left;
width: 85%;
height: 35px;
line-height: 35px;
text-indent: 25px;
text-shadow: 0 1px 0 #fff;
background: url(../images/icn_user.png) no-repeat center left;
margin-left: 6%;
}
.user a {
text-decoration: none;
color: #666666}
.user a:hover {
color: #77BACE;
}
.user a.logout_user {
float: left;
display: block;
width: 16px;
height: 35px;
text-indent: -5000px;
background: url(../images/icn_logout.png) center no-repeat;
}
/* Breadcrumbs */
section#secondary_bar .breadcrumbs_container {
float: left;
width: 77%;
background: url(../images/secondary_bar_shadow.png) no-repeat left top;
height: 38px;
}
article.breadcrumbs {
float: left;
padding: 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
height: 23px;
margin: 4px 3%;
}
.breadcrumbs a {
display: inline-block;
float: left;
height: 24px;
line-height: 23px;
}
.breadcrumbs a.current, .breadcrumbs a.current:hover {
color: #9E9E9E;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.breadcrumbs a:link, .breadcrumbs a:visited {
color: #44474F;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
font-weight: bold;}
.breadcrumbs a:hover {
color: #222222;
}
.breadcrumb_divider {
display: inline-block;
width: 12px;
height: 24px;
background: url(../images/breadcrumb_divider.png) no-repeat;
float: left;
margin: 0 5px;
}
/* Sidebar */
aside#sidebar {
width: 23%;
background: #E0E0E3 url(../images/sidebar.png) repeat;
float: left;
min-height: 500px;
margin-top: -4px;
}
#sidebar hr {
border: none;
outline: none;
background: url(../images/sidebar_divider.png) repeat-x;
display: block;
width: 100%;
height: 2px;}
/* Search */
.quick_search {
text-align: center;
padding: 14px 0 10px 0;
}
.quick_search input[type=text] {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #bbb;
height: 26px;
width: 90%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 30px;
background: #fff url(../images/icn_search.png) no-repeat;
background-position: 10px 6px;
}
.quick_search input[type=text]:focus {
outline: none;
color: #666666;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
/* Sidebar Menu */
#sidebar h3 {
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 10px 0 10px 6%;
display: block;
float: left;
width: 90%;
}
.toggleLink {
color: #999999;
font-size: 10px;
text-decoration: none;
display: block;
float: right;
margin-right: 2%
}
#sidebar .toggleLink:hover {
color: #77BACE;
text-decoration: none;
}
#sidebar ul {
clear: both;
margin: 0; padding: 0;
}
#sidebar li {
list-style: none;
margin: 0 0 0 12%; padding: 0;
}
#sidebar li a {
color: #666666;
padding-left: 25px;
text-decoration: none;
display: inline-block;
height: 17px;
line-height: 17px;
text-shadow: 0 1px 0 #fff;
margin: 2px 0;
}
#sidebar li a:hover {
color: #444444;
}
/* Sidebar Icons */
#sidebar li.icn_new_article a {
background: url(../images/icn_new_article.png) no-repeat center left;
}
#sidebar li.icn_edit_article a {
background: url(../images/icn_edit_article.png) no-repeat center left;
}
#sidebar li.icn_categories a {
background: url(../images/icn_categories.png) no-repeat center left;
}
#sidebar li.icn_tags a {
background: url(../images/icn_tags.png) no-repeat center left;
}
#sidebar li.icn_add_user a {
background: url(../images/icn_add_user.png) no-repeat center left;
}
#sidebar li.icn_view_users a {
background: url(../images/icn_view_users.png) no-repeat center left;
}
#sidebar li.icn_profile a {
background: url(../images/icn_profile.png) no-repeat center left;
}
#sidebar li.icn_folder a {
background: url(../images/icn_folder.png) no-repeat center left;
}
#sidebar li.icn_photo a {
background: url(../images/icn_photo.png) no-repeat center left;
}
#sidebar li.icn_audio a {
background: url(../images/icn_audio.png) no-repeat center left;
}
#sidebar li.icn_video a {
background: url(../images/icn_video.png) no-repeat center left;
}
#sidebar li.icn_settings a {
background: url(../images/icn_settings.png) no-repeat center left;
}
#sidebar li.icn_security a {
background: url(../images/icn_security.png) no-repeat center left;
}
#sidebar li.icn_jump_back a {
background: url(../images/icn_jump_back.png) no-repeat center left;
}
#sidebar p {
color: #666666;
padding-left: 6%;
text-shadow: 0 1px 0 #fff;
margin: 10px 0 0 0;}
#sidebar a {
color: #666666;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar footer {
margin-top: 20%;
}
/* Main Content */
section#main {
width: 77%;
min-height: 500px;
background: url(../images/sidebar_shadow.png) repeat-y left top;
float: left;
margin-top: -2px;
}
#main h3 {
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 20px;
}
/* Modules */
.module {
border: 1px solid #9BA0AF;
width: 100%;
margin: 20px 3% 0 3%;
margin-top: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff;
}
#main .module header h3 {
display: block;
width: 90%;
float: left;
}
.module header {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.module footer {
height: 32px;
width: 100%;
border-top: 1px solid #9CA1B0;
background: #F1F1F4 url(../images/module_footer_bg.png) repeat-x;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
}
.module_content {
margin: 10px 20px;
color: #666;}
/* Module Widths */
.width_full {
width: 95%;
}
.width_half {
width: 46%;
margin-right: 0;
float: left;
}
.width_quarter {
width: 26%;
margin-right: 0;
float: left;
}
.width_3_quarter {
width: 66%;
margin-right: 0;
float: left;
}
/* Stats Module */
.stats_graph {
width: 64%;
float: left;
}
.stats_overview {
background: #F6F6F6;
border: 1px solid #ccc;
float: right;
width: 26%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.overview_today, .overview_previous {
width: 50%;
float: left;}
.stats_overview p {
margin: 0; padding: 0;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
.stats_overview p.overview_day {
font-size: 12px;
font-weight: bold;
margin: 6px 0;
}
.stats_overview p.overview_count {
font-size: 26px;
font-weight: bold;
color: #333333;}
.stats_overview p.overview_type {
font-size: 10px;
color: #999999;
margin-bottom: 8px}
/* Content Manager */
.tablesorter {
width: 100%;
margin: -5px 0 0 0;
}
.tablesorter td{
margin: 0;
padding: 0;
border-bottom: 1px dotted #ccc;
}
.tablesorter thead tr {
height: 34px;
background: url(../images/table_sorter_header.png) repeat-x;
text-align: left;
text-indent: 10px;
cursor: pointer;
}
.tablesorter td {
padding: 15px 10px;
}
.tablesorter input[type=image] {
margin-right: 10px;}
ul.tabs {
margin: 3px 10px 0 0;
padding: 0;
float: right;
list-style: none;
height: 24px; /*--Set height of tabs--*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
border: 1px solid #ccc;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
line-height: 24px;
}
ul.tabs li a {
text-decoration: none;
color: #999;
display: block;
padding: 0 10px;
height: 24px;
}
ul.tabs li a:hover {
color: #44474F;
}
html ul.tabs li.active a {
color: #44474F;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #F1F2F4;
-webkit-box-shadow: inset 0 2px 3px #818181;
-moz-box-shadow: inset 0 2px 3px #818181;
box-shadow: inset 0 2px 3px #818181;
}
html ul.tabs li:first-child, html ul.tabs li:first-child a {
-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
html ul.tabs li:last-child, html ul.tabs li:last-child a {
-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
#main .module header h3.tabs_involved {
display: block;
width: 60%;
float: left;
}
/* Messages */
.message {
border-bottom: 1px dotted #cccccc;
}
input[type=submit] {
background: #D0D1D4 url(../images/btn_submit.png) repeat-x;
border: 1px solid #A8A9A8;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
font-weight: bold;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
color: #666;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
input[type=submit]:hover {
color: #333333;
}
input[type=submit].alt_btn {
background: #D0D1D4 url(../images/btn_submit_2.png) repeat-x;
border: 1px solid#30B0C8;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
font-weight: bold;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
color: #003E49;
text-shadow: 0 1px 0 #6CDCF9;
cursor: pointer;
}
input[type=submit].alt_btn:hover {
color: #001217;
}
input[type=submit].btn_post_message {
background: #D0D1D4 url(../images/post_message.png) no-repeat;
display: block;
width: 37px;
border: none;
height: 24px;
cursor: pointer;
text-indent: -5000px;
}
input[type=submit].btn_post_message:hover {
background-position: 0 -24px;
}
.post_message {
text-align: left;
padding: 5px 0;
}
.post_message input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #bbb;
height: 20px;
width: 70%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 10px;
background-position: 10px 6px;
float: left;
margin: 0 3.5%;
}
.post_message input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
color: #666666;
}
.post_message input[type=image] {
float: left;
}
.message_list {
height: 250px;
overflow-x:hidden;
overflow-y: scroll;
}
/* New/Edit Article Module */
fieldset {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #F6F6F6;
border: 1px solid #ccc;
padding: 1% 0%;
margin: 10px 0;
}
fieldset label {
display: block;
float: left;
width: 200px;
height: 25px;
line-height: 25px;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
padding-left: 10px;
/*margin: -5px 0 5px 0;*/
text-transform: uppercase;
vertical-align: middle;
}
fieldset input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}
fieldset input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
fieldset textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0 0.5%;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}
fieldset textarea:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
.submit_link {
float: right;
margin-right: 3%;
padding: 5px 0;
}
.submit_link select {
width: 150px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
#main .module_content h1 {
color: #333333;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 22px;
margin: 8px 0px;
}
#main .module_content h2 {
color: #444444;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 18px;
margin: 8px 0px;
}
#main .module_content h3 {
color: #666666;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 0px;
}
#main .module_content h4 {
color: #666666;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 0px;
}
#main .module_content li {
line-height: 150%;
}
Set the height of these two elements two 100%
<aside id="sidebar" class="column" style="height: 100%;">
<section id="main" class="column" style="height: 100%;">
the style is also inline
Set the height of your sidebar 100% and it will work
<aside id="sidebar" class="column" style="height: 100%;">
Related
I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>
instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>
just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>
I am trying to design a pop up that seems like Facebook. Currently I had successfully implement pop up code . Now i am finding difficulty in design CSS of the pop up . Kindly help me to design the pop up same like the attached image.
Current Implementation
Final look Pop Up i need
..............................................................................................................................................................
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
padding: 30px;
max-width: 350px;
width: 100% !important;
background-color: #F7F7F7;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
}
.loginmodal-container h1 {
text-align: center;
font-size: 1.8em;
font-family: roboto;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
padding: 17px 0px;
font-family: roboto;
font-size: 14px;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
}
Login
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
<h1>Login to Your Account</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
Register - Forgot Password
</div>
</div>
</div>
</div>
your html and css tweaked to achieve your final lookup.
check below
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
max-width: 350px;
width: 100% !important;
background-color: #eceff6;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
border:8px solid;
border-color:rgba(0,0,0,0.5);
}
#popupHeader
{
background-color:#3c5899;padding:5px;
margin-bottom:25px;
}
.loginmodal-container form{padding:35px;}
.loginmodal-container h1 {
text-align: center;
font-size: 1.2em;
margin:0px;
font-family: roboto;
color:#fff;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 30px;
font-size: 16px;
width: 100%;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #5e75a7;
padding: 10px 0px;
font-family: roboto;
font-size: 14px;
margin-top:20px;
border-radius:4px;
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #6a8acf;
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
margin-bottom:50px;
}
.login-help a{display:block;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Login
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="loginmodal-container">
<div class="row" id="popupHeader">
<div class="col-xs-12 text">
<h1>Login to Your Account</h1>
</div>
</div>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
RegisterForgot Password
</div>
</div>
</div>
</div>
You can try javascript for this.. in that script function you add styles and check..
Where you are writing code for displaying that modal 'login-modal'??
The following html code gives a html form in a table but though i aligned the table to center it does not align to the center and remains in the left side of the web page!
<!DOCTYPE html>
<html>
<head>
<style>input.textfill {
float: right;
}</style>
<link type="text/css" rel="stylesheet" href="order.css" >
<script type="text/javascript">
var textbox = function(me){
if(me.checked == false){
var textb = document.createElement('textarea');
textb.name = "Address";
textb.id="Address";
textb.required=true;
textb.placeholder="Address";
me.parentNode.appendChild(textb);
}
setInterval(function(){
if(me.checked == false){
me.parentNode.removeChild(textb);
return false;
}
});
};
var i = 1;
function addkid() {
if (i <= 2) {
i++;
var div = document.createElement('div');
div.innerHTML ='<br><div class="headingbox">'+ 'Prescription Copy-'+i+':'+'</div>'+'<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn-' + i + '">Upload</span>'+'</label>'+' <input id=remove type="button" value="-" onclick="removekid(this)">';
document.getElementById('kids').appendChild(div);
document.getElementById("uploadBtn-" + i).onchange = function() {
document.getElementById("uploadFile-"+i).value = this.value;
};
}
}
function removekid(div) {
document.getElementById('kids').removeChild(div.parentNode);
i--;
}
</script>
</head>
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);onTimeChange ();">
<table align="Center" >
<tr><td height="40"><br>
<div class="headingbox" id="hBoxNIC" > National ID </div>
<div style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</div>
</td></tr>
<tr><td height=50 ><div class="headingboxs">Pick up</div>
<input type=radio name=DP required value="Pickup">
<div style=" float: right;"><div class="headingboxs">
Delivery</div>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>
<tr><td height="50"><div class="headingbox" >Expected Time </div>
<div style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
</div>
<div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </div>
<script>
var input = document.getElementById('time');
function validateTime (element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
</script>
</td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
<div style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele /><br>
</div>
<div class="error" id="phoneerror" > error occured </div><br></td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
<div style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx#gmail.com" /><br>
</div>
<div class="error" id="emailerror" > error occured </div><br>
</td></tr>
<tr>
<td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</div></td></tr>
<script>
document.getElementById("uploadBtn" ).onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
</script>
</div></td></tr>
<tr><td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place >
<input class="button" type=reset name=reset value=Cancel> </td></tr>
</table>
</form>
</body>
</body>
</html>
The css code is as follows
* { margin:0; padding:0;font-family: Arial; }
#orders {
padding: 0px 25px 25px;
background: #dcdcfb;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position:center;
width:60%;
margin: 20px;
}
#orders .inputs .buttonS {
width: 100%;
outline:none;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#b9c5dd 0%,
#a4b0cb);
background: -webkit-gradient(
linear, left top, left bottom,
from(#b9c5dd),
to(#a4b0cb));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#orders .inputs .buttonS:hover {
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
#orders .inputs .buttonDis {
outline:none;
width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#Address{
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select, input[type=date], input[type=text], input[type=password],input[type=time] {
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select:focus, input[type=date], input[type=text]:focus{
background: #fff;
box-shadow: 0px 0px 0px 3px #8efffc, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
outline: none;
}
.inputs ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 18px;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.inputs ul li:hover label{
color: #FFFFFF;
}
.inputs ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.inputs input[type=radio]:checked ~ label{
color: #0DFF92;
}
.headingboxs{ /*for the radio button headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:-2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 2%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headingbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:0;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.poperror {
opacity:0;
visibility: visible;
width: 300px;
background-color: white;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 5;
!top: 100%;
!left: 100%;
margin-left: 10px;
margin-top: -15px;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.poperror::after {
content: "";
position: absolute;
bottom: 100%;
left: 5%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent white transparent;
}
.error{
color:red;
font-size:10px;
text-align:left;
width: 350px;
margin-left:auto;
margin-right:auto;
margin-top:-12px;
margin-bottom:-10px;
font-style: italic;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity:0;
}
.column{
width:50%;
float:left;
}
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#remove{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
#add{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
.inputBtnSection{
display:inline-block;
vertical-align:top;
font-size:0;
font-family:verdana;
}
.disableInputField{
display:inline-block;
vertical-align:top;
height: 27px;
margin: 0;
font-size:14px;
padding:0 3px;
}
.fileUpload {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-2 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-3 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.uploadBtn{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-2{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-3{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
table {
align-self: center;
border: 2px solid CadetBlue;
border-radius: 5px;
}
#add_kid(){
width: 50px;
font-size: 10px;
}
.button:hover {
cursor:pointer;
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
.button{
margin-left:30px;
outline:none;
width: 20%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
width: 150px;
background-color:grey;
border-radius: 5px;
height: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
background-color: #7c7d7e;
}
#dlg-header{
background-color:aliceblue;
color: white;
font-size: 20px;
padding: 10px;
margin: 10px 10px 0px 10px;
}
#dlg-body{
background-color: white;
color: black;
font-size: 14px;
padding: 10px;
margin: 0px 10px 0px 10px;
}
#dlg-footer{
background-color: #f2f2f2;
text-align: right;
padding: 10px;
margin: 0px 10px 10px 10px;
}
#dlg-footer button{
background-color: grey;
color: white;
padding: 5px;
border: 0px;
}
please help to rectify this problem so that i can align the form to the center
form {
width: 980px;
margin: 0 auto;
}
Declare the width. So you can use the value AUTO in margin. margin: 0 auto do the trick
I have implemented this calendar on mozilla firefox satisfactorily and when I try to view it on chrome, table doesn't fill all the parent section. The table height is the same as the parent section but it have moved a little bit to the bottom generating a white space between the section and the table.
Chrome:
Firefox:
In firefox works.
This is the code, you can try it on the demo and see the differences between chrome and firefox:
.right{
float:right !important;
}
.wz-ui-input[type="checkbox"] {
display: none;
}
.wz-ui-input {
background-color: #fcfeff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
color: #464646;
cursor: text;
font-size: 13px;
height: 28px;
padding: 0 10px;
width: 204px;
}
.wz-ui-input[type="checkbox"] + label i {
background: url("#static/checkbox_white.png") no-repeat scroll -17px 0 / 51px 17px rgba(0, 0, 0, 0);
display: inline-block;
height: 17px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 17px;
}
/* Shadow */
.hide {display:none;}
.abs {position:absolute; z-index: 3;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}
/* Calendar Top Bar */
.wz-ui-header{
width:100%;
height: 39px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #f1f1f1;
-webkit-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
background-image: -webkit-linear-gradient(bottom, #b83e38, #da605b);
background-image: -moz-linear-gradient(bottom, #b83e38, #da605b);
background-image: -o-linear-gradient(bottom, #b83e38, #da605b);
background-image: -ms-linear-gradient(bottom, #b83e38, #da605b);
background-image: linear-gradient(to top, #b83e38, #da605b);
}
.shadow-border{
height: 38px;
width:100%;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #fdfeff;
border: solid 1px rgba(0,0,0,.15);
}
.calendar-menu{
display:block;
float:left;
width:85%;
}
.calendar-menu li {
border-bottom: 2px solid transparent;
color: #e9b9b7;
display: inline-block;
font-size: 15px;
height: 28px;
margin: 0 11px;
padding: 8px 1px 0;
}
.calendar-menu li.active-type {
border-bottom: 3px solid #7ebe30;
color: #ffffff;
}
.calendar-menu li:hover {
border-bottom: 3px solid #fff;
}
.calendar-menu-nav{
width:auto;
float:left;
}
.calendar-menu-event-finder {
width:auto;
height: 21px;
padding: 5px 10px;
}
.calendar-menu-event-finder input{
width: 137px;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px rgba(0,0,0,.05);
border: solid 1px #a64440;
}
.calendar-buttons{
border-left: 1px solid #9f3e3a;
height: 100%;
width: 135px;
}
.wz-view-minimize, .wz-view-maximize, .wz-view-close, .close-image {
border: 1px solid transparent;
border-radius: 2px;
float: left;
height: 9px;
padding: 6px;
width: 10px;
margin: 9px 10px 10px;
}
.wz-view-minimize i{
background: url("#static/minimize.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-maximize i{
background: url("#static/enlarge.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-close i {
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.close-image i{
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
/* Calendar general */
.calendar-head {
background: none repeat scroll 0 0 #fff;
height: 35px;
}
#day-calendar, #week-calendar, #month-calendar{
display: none;
}
.calendar-active{
width: 100%;
height: 85%;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
display:block !important;
}
/* Calendar Modals */
#my-calendars-modal{
width: 210px;
height: 122px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
position: absolute;
display: none;
margin-left: 12px;
margin-top: 31px;
z-index: 2;
}
#my-calendars-modal .my-calendars-list {
margin-left: 11px;
margin-top: 11px;
}
#my-calendars-modal .my-calendars-list articles {
margin-bottom: 11px;
font-size: 13px;
}
#my-calendars-modal .calendar {
display: block;
width: 100% !important;
}
#my-calendars-modal .calendar i{
float: left;
}
#my-calendars-modal .calendar span figure {
border-radius: 4px;
float: left;
height: 8px;
margin-right: 5px;
position: relative;
top: 4px;
width: 8px;
}
#my-calendars-modal .deleteCalendar{
margin-right: 10px;
font-size: 12px;
color:#dc513a;
}
#work span figure{
background-color: #34aadc;
}
#office span figure{
background-color: #5856d6;
}
#home span figure{
background-color: #f79a03;
}
#my-calendars-modal .add-new-calendar{
text-align: center;
border-top: 1px solid #dadada;
width: 100%;
padding: 11px 0;
font-size: 13px;
}
#create-event-modal{
width: 289px;
height: 289px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 11.5%;
font-size:13px;
}
#create-calendar-modal{
width: 289px;
height: 198px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 17%;
font-size:13px;
}
#create-calendar-modal .calendar-name input{
width: 161px;
height: 26px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
border-radius: 3px;
}
#create-calendar-modal .calendar-name {
margin-left: 6%;
position: relative;
top: 32px;
float: left;
}
#create-calendar-modal .calendar-color {
margin-left: 9%;
position: relative;
top: 39px;
float: left;
}
#create-calendar-modal .calendar-color input{
width: 16px;
height: 12px;
}
#create-calendar-modal .calendar-description {
margin-left: 6%;
position: relative;
top: 49px;
float: left;
}
#create-calendar-modal .calendar-description textarea{
width: 260px;
height: 49px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
margin-top: 6px;
border-radius: 3px;
}
#create-calendar-modal .create-calendar-button{
width: 71px;
height: 23px;
background-color: #75d142;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px rgba(255,255,255,.3);
border: solid 1px #1b961b;
background-image: -webkit-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -moz-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -o-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -ms-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: linear-gradient(to top, #4e9c21, #7ebe30);
margin-right: 10px;
margin-top: 68px;
color: #fff;
border-radius: 4px;
}
#create-calendar-modal .close-image {
float: right;
left: 250px;
position: absolute;
top: -4px;
cursor: pointer;
}
#create-calendar-modal .close-image i{
cursor: pointer;
}
.my-calendars, .current-month, .create-event {
float: left;
font-size: 14px;
margin-left: 12px;
padding: 11px 0;
width: auto;
}
.my-calendars, .my-calendars span, .create-event, .my-calendars img, .current-month img, .create-event span, .create-event img, .add-new-calendar, .add-new-calendar img, .add-new-calendar span, .deleteCalendar{
cursor:pointer;
}
.current-month{
margin-left:29%;
}
.current-month span{
margin: 0 20px;
}
.create-event{
margin-right: 20px;
}
.calendar-body{
height: 481px;
}
.calendar-body table{
width:100%;
height: 100%;
background: white;
}
td.other-month-cell{
background: #f1f1f1;
}
.calendar-days th{
font-size: 14px;
}
thead{
height: 33px;
background-color: #f1f1f1;
border-bottom: solid 2px #cacaca;
}
tbody{
height: 443px;
}
/* Month calendar */
#month-calendar td, #month-calendar th {
border: 1px solid #dadada;
text-align: left;
width: 14.2857%;
}
#month-calendar td span {
top: 6px;
margin-left: 6px;
position: relative;
}
#month-calendar .calendar-day-bar th {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#month-calendar .day-selected{
background-color: rgba(126,190,48,.1);
border: solid 1px #7ebe30 !important;
}
#month-calendar .event {
color: #4a4a4a;
font-size: 12px;
font-weight: bold;
height: 18px;
margin-left: 2px;
padding-left: 4px;
padding-top: 4px;
position: absolute;
width: 125px;
}
#month-calendar .office{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #d1c4e9;
}
#month-calendar .event:nth-child(2){
margin-top: 10px;
display: block;
}
#month-calendar .event:nth-child(3){
margin-top: 32px;
display: block;
}
#month-calendar .event:nth-child(3)::after {
font-weight: 100;
content: '\A \A 5 more...';
white-space: pre;
color: #828282;
}
/* Week calendar */
#week-calendar td, #week-calendar th {
border: 1px solid #dadada;
text-align: left;
padding-left: 6px;
padding-top: 6px;
width: 12.5%;
}
#week-calendar .calendar-day-bar th, #week-calendar .calendar-day-bar td {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#week-calendar .hour-cell{
height: 41px;
}
/* Day calendar */
/* Images transformation */
.right-arrow{
transform: rotateY(180deg);
}
.wz-selectable, input, textarea, [contentEditable], [contentEditable] * {
cursor: text;
outline: medium none;
}
.wz-unselectable {
cursor: default;
}
[contentEditable] * {
color: inherit;
font-family: inherit;
}
link {
display: none;
height: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
b {
font-weight: bold;
}
ol, ul {
list-style: outside none none;
}
hr {
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: none;
}
audio {
display: none;
height: 0;
}
<section class="calendar-head">
<section class="my-calendars">
<span>My calendars</span>
<img src="https://static.inevio.com/app/207/flechita.png" alt="">
</section>
<section class="current-month">
<img class="left-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
<span>September 2013</span>
<img class="right-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
</section>
<section class="create-event right" id="create-event">
<img src="" alt="+">
<span>Create new event</span>
</section>
<section id="my-calendars-modal">
<section class="my-calendars-list">
<articles id="work" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Work</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="office" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Office</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="home" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Home</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
</section>
<section class="add-new-calendar" id="add-new-calendar">
<img src="" alt="+">
<span>Add new calendar</span>
</section>
</section>
<section id="create-event-modal">
<figure class="close-image create-event-modal-close">
<i></i>
</figure>
<!-- Falta implementar -->
</section>
<section id="create-calendar-modal">
<figure class="close-image create-calendar-modal-close">
<i></i>
</figure>
<form>
<artricle class="calendar-name">
<input type="text" placeholder=" Name of calendar">
</artricle>
<artricle class="calendar-color">
<span>Color</span>
<input type="color">
</artricle>
<artricle class="calendar-description">
<span>Description</span><br>
<textarea></textarea>
</artricle>
<button type="submit" class="create-calendar-button right">Create</button>
</form>
</section>
</section>
<section id="month-calendar" class="calendar-body calendar-active">
<table>
<thead class="calendar-day-bar">
<tr class="title-row">
<th class="title-cell">Sunday</th>
<th class="title-cell">Monday</th>
<th class="title-cell">Thusday</th>
<th class="title-cell">Wednesday</th>
<th class="title-cell">Thursday</th>
<th class="title-cell">Friday</th>
<th class="title-cell">Saturday</th>
</tr>
</thead>
<tbody class="calendar-days">
<tr class="week-row">
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="day-cell"><span>1</span></td>
<td class="day-cell"><span>2</span></td>
<td class="day-cell"><span>3</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>4</span></td>
<td class="day-cell"><span>5</span></td>
<td class="day-cell"><span>6</span></td>
<td class="day-cell"><span>7</span></td>
<td class="day-cell"><span>8</span></td>
<td class="day-cell"><span>9</span></td>
<td class="day-cell"><span>10</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>11</span></td>
<td class="day-cell"><span>12</span></td>
<td class="day-cell"><span>13</span></td>
<td class="day-cell"><span>14</span></td>
<td class="day-cell">
<span>15</span>
<article class="event office"> Me voy a casar</article>
<article class="event"> Reunion con el jefe</article>
</td>
<td class="day-cell"><span>16</span></td>
<td class="day-cell"><span>17</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>18</span></td>
<td class="day-cell"><span>19</span></td>
<td class="day-cell"><span>20</span></td>
<td class="day-cell"><span>21</span></td>
<td class="day-cell day-selected"><span>22</span></td>
<td class="day-cell"><span>23</span></td>
<td class="day-cell"><span>24</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>25</span></td>
<td class="day-cell"><span>26</span></td>
<td class="day-cell"><span>27</span></td>
<td class="day-cell"><span>28</span></td>
<td class="day-cell"><span>29</span></td>
<td class="day-cell"><span>30</span></td>
<td class="day-cell"><span>31</span></td>
</tr>
</tbody>
</table>
</section>
I'm having trouble finding out why the right section of the header goes under the left section when you zoom out in Safari, Chrome and Opera.
Here is the demo of the header.
If you open the demo in safari, chrome or opera you'll see that the right section of the header goes beneath the left section of the header.
I want to make the header stay in one line when you zoom out in different browsers.
Here is the code I have.
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
You can fix this by setting fixed widths for the child elements (inputs, etc..).
But why would you zoom to 25%?