I'm trying to modify the default ASP.NET MVC4 website template, but I can't figure out why my css isn't working. It's probably a rookie mistake. I've been searching and trying to fix it for hours now, but I can't figure it out.
The gradient works in the footer, but not inside the header. I'd like everything from the black border to the main content(everything inside the header element) to have it's background as one big gradient. Even the backup background-color doesn't work, however it(color, not gradient) does work when I size my browser window down to mobile-size. Any ideas?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page - Test</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">Test</p>
</div>
<div class="float-right">
<section id="login">
Hei, <span class="username">Anonymous</span>!
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<!---->
<section class="content-wrapper main-content clear-fix">
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
Learn more…
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
Learn more…
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
Learn more…
</li>
</ol>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - Test</p>
</div>
<div class="float-right">
<p>Under development. ALPHA</p>
</div>
</div>
</footer>
<!--<script src="/Scripts/jquery-1.8.2.js"></script>
-->
</body>
</html>
CSS:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body {
/*background-color: #7ac0da;*/
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited,
a:active, a:hover {
color: #333;
}
/*header, footer, hgroup,
nav, section {
display: block;
}*/
mark {
background-color: #a6dbed;
padding-left: 5px;
padding-right: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #000;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
h5 a:link, h5 a:visited, h5 a:active {
padding: 0;
text-decoration: none;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
header .content-wrapper {
margin-top: 20px;
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -moz-linear-gradient(0% 0% 0deg,#7AC0DA, #a4d4e6);
/*background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);*/
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
footer {
clear: both;
font-size: .8em;
height: 100px;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -moz-linear-gradient(0% 0% 0deg,#7AC0DA, #a4d4e6);
background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #fff;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
color: #fff;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin: 0;
padding: 0;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
color: #fff;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
ol.round li.zero {
background: url("../Images/orderedList0.png") no-repeat;
}
ol.round li.one {
background: url("../Images/orderedList1.png") no-repeat;
}
ol.round li.two {
background: url("../Images/orderedList2.png") no-repeat;
}
ol.round li.three {
background: url("../Images/orderedList3.png") no-repeat;
}
ol.round li.four {
background: url("../Images/orderedList4.png") no-repeat;
}
ol.round li.five {
background: url("../Images/orderedList5.png") no-repeat;
}
ol.round li.six {
background: url("../Images/orderedList6.png") no-repeat;
}
ol.round li.seven {
background: url("../Images/orderedList7.png") no-repeat;
}
ol.round li.eight {
background: url("../Images/orderedList8.png") no-repeat;
}
ol.round li.nine {
background: url("../Images/orderedList9.png") no-repeat;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
.label {
font-weight: 700;
}
/* login page */
#loginForm {
border-right: solid 2px #c8c8c8;
float: left;
width: 55%;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#loginForm .validation-summary-errors ul {
margin: 0;
padding: 0;
}
#loginForm .validation-summary-errors li {
display: inline;
list-style: none;
margin: 0;
}
#loginForm input {
width: 250px;
}
#loginForm input[type="checkbox"],
#loginForm input[type="submit"],
#loginForm input[type="button"],
#loginForm button {
width: auto;
}
#socialLoginForm {
margin-left: 40px;
float: left;
width: 40%;
}
#socialLoginForm h2 {
margin-bottom: 5px;
}
#socialLoginList button {
margin-bottom: 12px;
}
#logoutForm {
display: inline;
}
/* contact */
.contact h3 {
font-size: 1.2em;
}
.contact p {
margin: 5px 0 0 10px;
}
.contact iframe {
border: 1px solid #333;
margin: 5px 0 0 10px;
}
/* forms */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset legend {
display: none;
}
fieldset ol {
padding: 0;
list-style: none;
}
fieldset ol li {
padding-bottom: 5px;
}
label {
display: block;
font-size: 1.2em;
font-weight: 600;
}
label.checkbox {
display: inline;
}
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
textarea {
font-family: inherit;
width: 500px;
}
input:focus, textarea:focus {
border: 1px solid #7ac0da;
}
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
td input[type="submit"],
td input[type="button"],
td button {
font-size: 1em;
padding: 4px;
margin-right: 4px;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
}
}
The problem
I fixed your issues. Be careful when it comes to float these attributes can destroy your layout - if you do not apply propper clearing afterwards. The margin-issue came as you set a margin-top value for the h3 element which caused the footer to be further below. Generally a margin does not affect the actual dimension of an element. Same for the footer and the background is only as big as the footer's dimension.
Find my solution here:
http://jsfiddle.net/w4Jgh/
Clearfix
What methods of ‘clearfix’ can I use?
http://www.impressivewebs.com/clearing-floats-why-necessary/
Best regards
Try delete this in the CSS on line 45
.float-right {
float: right;
}
Does this make a change in the good direction?
Related
When I open the Chrome Dev Tools and view my web page at different sizes, white space appears on the sides/bottom of the page. When I refresh the page, this extra space goes away.
This also happens when I change the size of the browser as well. The nav and the main stay in place, but the footer moves up from the bottom. Creating empty space.
Is this normal or am I doing something wrong w/ the CSS? Is there something I can do to make sure that all elements stay at their positions no matter what shape the browser changes to?
/* 1440p */
#media only screen and (max-width: 2560px), screen and (max-height: 1440px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 18.05% 0%; /* changes */
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* 1080p */
#media only screen and (max-width: 1920px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 14.71% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* iPad Pro */
#media only screen and (max-width: 1024px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 49% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* iPad */
#media only screen and (max-width: 768px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 545px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 545px; /* changes */
padding: 44.6% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 106px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 545px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Surface Duo */
#media only screen and (max-width: 450px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 345px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 345px; /* changes */
padding: 32% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 67px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 345px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center; /* changes */
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline; /* added */
padding: 0px 8px; /* added */
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Pixel 2, Pixel 2 XL, iPhone 6/7/8 Plus */
#media only screen and (max-width: 414px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 245px;
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 245px;
padding: 32.2% 0%; /* changes */
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 47px;
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 245px;
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 15px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #1e242c;
margin: 0 auto;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: block;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Galaxy Fold, iPhone 5/SE, Moto G4, Galaxy S5, iPhone 6/7/8, iPhone X */
#media only screen and (max-width: 375px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 245px;
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 245px;
padding: 32.4% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 47px;
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 245px;
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 15px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #1e242c;
margin: 0 auto;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: block;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title.com</title>
<link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<!-- nav section -->
<nav id="nav">
<div id="nav-container">
<!-- nav links -->
<ul id="nav-links">
<li>
Sign Up |
</li>
<li>
Log In
</li>
</ul>
</div>
</nav>
<!-- main section -->
<main>
<div id="main-container">
<!-- main row 1 -->
<div>
<h1 id="logo">BIG TITLE</h1>
</div>
<!-- main row 2 -->
<div>
<input type="search" placeholder="Search">
</div>
</div>
</main>
<!-- sub footer 1 section -->
<section id="pre-footer-1">
<div class="footer-container">
<!-- browse the dicitionary links -->
<ul id="pre-footer-1-links">
<li>
Browse the Dictionary:
</li>
<li>
a |
</li>
<li>
b |
</li>
<li>
c |
</li>
<li>
d |
</li>
<li>
e |
</li>
<li>
f |
</li>
<li>
g |
</li>
<li>
h |
</li>
<li>
i |
</li>
<li>
j |
</li>
<li>
k |
</li>
<li>
l |
</li>
<li>
m |
</li>
<li>
n |
</li>
<li>
o |
</li>
<li>
p |
</li>
<li>
q |
</li>
<li>
r |
</li>
<li>
s |
</li>
<li>
t |
</li>
<li>
u |
</li>
<li>
v |
</li>
<li>
w |
</li>
<li>
x |
</li>
<li>
y |
</li>
<li>
z
</li>
</ul>
</div>
</section>
<!-- (4) pre-footer 2 section -->
<section id="pre-footer-2">
<div class="footer-container">
<!-- footer row 2 -->
<div>
<ul id="pre-footer-2-links">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Disclaimer
</li>
</ul>
</div>
</div>
</section>
<!-- (5) footer section -->
<footer>
<div class="footer-container">
<p id="copyright">© 2020 copyright</p>
</div>
</footer>
<!-- links to the js code -->
<script src="js/script.js"></script>
</body>
</html>
I see you have margin:0; for body the extra space shouldn't be added.
But try this:
* { margin: 0; height: 100vh;}
So initially the top half of my black menu blocks appeared over the top of the banner, but now the top half of them are cut off underneath of the banner like this:
Here is my styles.css file:
/* Base */
* {
margin: 0;
padding: 0;
}
body {
/*background-color: #F5F4F1;*/
background-image: url('./img/bg.jpg');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #353535;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#banner {
position: relative;
}
#banner__text-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
#banner__title {
font-size: 5.8rem;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h1,h2,h3,h4,h5,h6 {
margin: 30px 0;
/*font-weight: 200;*/
color: #8ca757;
}
h1 {
font-size: 35px;
}
h1 small {
font-size: 25px;
color: #666;
}
h2 + p {
margin-top: -20px;
}
h3 + p {
margin-top: -20px;
}
h2,h3,h4 {
font-size: 30px;
}
h4.error {
color: #faa722;
}
h5,h6 {
font-size: 20px;
}
p {
margin: 0 0 20px;
}
a:link, a:visited {
color: #8ca757;
}
a:hover {
color: #7a9347;
}
ul, ol {
margin: 0 0 10px 18px;
}
ul li, ol li {
margin: 0 0 15px;
}
hr {
border: none;
height: 18px;
width: 114px;
background-image: url('./img/hr.png') center center no-repeat;
margin: 20px auto;
}
small {
font-size: 12px;
}
blockquote {
background: white;
padding: 10px;
margin: 0 0 15px;
border-left: solid 4px #d1cbb8;
font-style: italic;
}
blockquote p {
margin: 5px 0 10px;
}
blockquote code {
font-style: normal;
}
code {
color: #006699;
font-weight: bold;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
sup {
font-size: 0.6em;
}
/* Layout */
.wrapper {
position: relative;
width: 620px;
margin: 40px auto;
padding: 40px;
background: white;
text-align: center;
}
.wrapper:before, .wrapper:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
width: 100%;
height: 100%;
background: #97917e;
z-index: -1;
}
.wrapper:before {
top: 10px;
left: -10px;
background: #514933;
}
#logo {
width: 240px;
margin: 0 auto;
display: block;
}
.sandbox {
padding: 20px;
background: #f8f5f1;
text-align: left;
}
aside {
background: white;
border: dashed 2px #97917e;
padding: 10px 20px;
margin: 40px;
}
aside h3 {
font-size: 24px;
margin-top: 10px;
}
aside h6 {
margin: 15px 0 5px;
}
table {
width: 100%;
font-size: 13px;
background: white;
margin: 0 0 20px;
}
table td {
border-bottom: solid 1px #d1cbb8;
padding: 4px;
}
table th {
background: #8ca757;
color: white;
padding: 4px;
font-weight: normal;
font-size: 15px;
}
/* Global */
input {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
autton, input.button {
display: inline-block;
background: #ccc;
outline: solid 2px #ccc;
border: solid 2px white;
color: white;
padding: 10px 15px;
margin: 20px 0;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
.button:hover, input.button:hover {
background: #bbb;
outline-color: #bbb;
}
.button.prev {
float: left;
background: #514933;
outline-color: #514933;
}
.button.prev:hover {
background: #494331;
outline-color: #494331;
}
.button.next, input.button.next {
background: #8ca757;
outline: solid 2px #8ca757;
float: right;
}
.button.next:hover, input.button.next:hover {
background: #7c9745;
}
input.button.next {
display: block;
float: none;
width: 100%;
}
.block {
display: block;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.copyright-info h4, .copyright-info h5 {
margin: 0;
line-height: 18px;
font-size: 14px;
text-align: center;
}
.copyright-info h4 {
font-weight: bold;
}
.copyright-info {
margin: 20px 0 40px;
}
/* Final example website */
#final-example .wrapper {
width: 800px;
padding: 0;
}
#final-example .content {
padding: 20px 50px 50px;
text-align: left;
}
#final-example #nav {
margin: -27px 0 0;
}
#final-example #nav ul {
display: inline-block;
list-style: none;
text-align: left;
}
#final-example #nav ul li {
display: inline-block;
text-align: center;
margin: 0 10px;
}
#final-example #nav ul li a {
display: block;
background: #353535;
outline: solid 2px #353535;
border: solid 2px white;
color: white;
padding: 10px 15px;
text-decoration: none;
}
#final-example #nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
#final-example #philosophy {
text-align: center;
font-size: 18px;
line-height: 22px;
}
#final-example #footer {
font-size: 12px;
line-height: 15px;
margin: 60px 0 0 0;
}
#final-example #footer strong {
display: block;
margin: 0 0 20px;
}
#final-example .column {
display: block;
float: left;
}
#final-example .column.three {
width: 203px;
margin-right: 45px;
}
#final-example .column.last {
margin: 0;
}
#final-example small {
display: block;
text-align: center;
margin: 40px 0 0;
}
#final-example .member {
width: 203px;
float: left;
margin-right: 45px;
}
#final-example .member:last-child {
margin: 0;
}
#final-example .member img {
max-width: 100%;
}
#final-example .closed {
color: #d13916;
}
#final-example .open {
color: #67b512;
}
#menu-items ul {
list-style: none;
margin: 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
}
#menu-items ul li a {
text-decoration: none;
font-weight: bold;
}
.price {
float: right;
font-size: 18px;
font-weight: bold;
color: #353535;
}
#contact {
width: 320px;
margin: 0 auto;
}
#contact-form label {
display: block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
border: solid 2px #353535;
outline: none;
font-size: 18px;
padding: 10px;
margin: 0 0 10px;
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#contact-form textarea {
resize: vertical;
height: 120px;
}
#contact-form input[type="checkbox"] + label {
display: inline;
cursor: pointer;
}
When I try to do this:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
}
to this
#final-example #nav {
margin: -27px 0 0;
}
this happens:
and text-align:center; did not work. Any ideas?
Here is the index.php:
<!DOCTYPE html>
<html>
<head>
<title>MicroUrb</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="/" title="Return to Home">
<img src="assets/img/banner0.jpg" alt="MicroUrb">
<div id="banner__text-content">
<h1 id="banner__title">MicroUrb</h1>
</div>
</a>
</div><!-- banner -->
<div id="nav">
<ul>
<li>Home</li>
<li>Team</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div class="content">
<div id="footer" class="cf">
<div class="column three">
<strong>Phone</strong>
609.505.3395
</div><!-- column -->
<div class="column three">
<strong>Location</strong>
<!-- location to go here -->
</div><!-- column -->
<div class="column three last">
<strong>Hours</strong>
<em>Tuesday - Thursday</em><br>
1:00pm - 9:00pm<br><br>
<em>Friday and Saturday</em><br>
4:00pm - 11:00pm<br><br>
<em>Sunday - Monday</em>
Closed<br><br>
</div><!-- column -->
</div><!-- footer -->
<small>©2017 MicroUrb</small>
</div><!-- content -->
</div><!-- wrapper -->
<div class="copyright-info">
<?php includes('../assets/includes/copyright.php'); ?>
</div><!-- copyright-info -->
</body>
</html>
Put a z-index on the nav and set the position to relative
#final-example #nav {
margin: -27px 0 0;
z-index: 5;
position: relative;
}
I believe to get the navigation in front of the banner like you are trying to achieve you could utilise the z-index property.
Add a z-index of 1 to your #final-example #nav {} and a z-index of 0 to your #banner {} which will bring the navigation in front of the banner while keeping its absolute positioning in the centre.
The final outcome will be:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
z-index: 1;
}
#banner {
position: relative;
z-index: 0;
}
Let me know if you need any other help.
You can use z-index on the nav element to make it appear above the banner if you set the banner to a lower z-index compared to the nav element.
So for example:
#final-example #nav {
z-index:1;
position:relative;
margin:-27px auto 0;
}
That said, it would be useful if you would've posted your html part as well.
Edit:
Further investigation and with a temporary asset, the code seems to work fine with the code posted above as can be seen in this JSFiddle: https://jsfiddle.net/t2d70q3y/2/
Let me know if you require further assistance.
I have a page designed here http://idc.interlinktravels.com/lanka/default7.aspx
once the Your Departure City is selected the page gets refreshed and the design breaks whereas this does not occur in IE 8 or Firefox, or Chrome.
I have no clue which code to share here...so please let me know if i need to share any of my design codes
here is the whole CSS code I did for this design:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited,
a:active, a:hover {
color: #333;
}
a:hover {
background-color: #c7d1d6;
}
header, footer, hgroup,
nav, section {
display: block;
}
mark {
background-color: #a6dbed;
padding-left: 5px;
padding-right: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #000;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
h5 a:link, h5 a:visited, h5 a:active {
padding: 0;
text-decoration: none;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
.main-content {
background: url("../Images/accent.png") no-repeat;
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
background: url("../Images/heroAccent.png") no-repeat;
}
header .content-wrapper {
padding-top: 20px;
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
background-color: #fff;
}
.featured .content-wrapper {
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
}
.content-wrapper img {
width:100%;
height:50%;
}
.featured hgroup.title h1, .featured hgroup.title h2 {
color: #fff;
}
.featured p {
font-size: 1.1em;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
ol.round li.zero {
background: url("../Images/orderedList0.png") no-repeat;
}
ol.round li.one {
background: url("../Images/orderedList1.png") no-repeat;
}
ol.round li.two {
background: url("../Images/orderedList2.png") no-repeat;
}
ol.round li.three {
background: url("../Images/orderedList3.png") no-repeat;
}
ol.round li.four {
background: url("../Images/orderedList4.png") no-repeat;
}
ol.round li.five {
background: url("../Images/orderedList5.png") no-repeat;
}
ol.round li.six {
background: url("../Images/orderedList6.png") no-repeat;
}
ol.round li.seven {
background: url("../Images/orderedList7.png") no-repeat;
}
ol.round li.eight {
background: url("../Images/orderedList8.png") no-repeat;
}
ol.round li.nine {
background: url("../Images/orderedList9.png") no-repeat;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
.label {
font-weight: 700;
}
/* login page */
#loginForm {
border-right: solid 2px #c8c8c8;
float: left;
width: 55%;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 40px;
float: left;
width: 40%;
}
#socialLoginForm h2 {
margin-bottom: 5px;
}
fieldset.open-auth-providers {
margin-top: 15px;
}
fieldset.open-auth-providers button {
margin-bottom: 12px;
}
/* contact */
.contact h3 {
font-size: 1.2em;
}
.contact p {
margin: 5px 0 0 10px;
}
.contact iframe {
border: 1px solid #333;
margin: 5px 0 0 10px;
}
/* forms */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset legend {
display: none;
}
fieldset ol {
padding: 0;
list-style: none;
}
fieldset ol li {
padding-bottom: 5px;
}
label {
display: block;
font-size: 1.2em;
font-weight: 600;
}
label.checkbox {
display: inline;
}
input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
textarea {
font-family: inherit;
width: 500px;
}
input:focus, textarea:focus {
border: 1px solid #7ac0da;
}
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
td input[type="submit"],
td input[type="button"],
td button {
font-size: 1em;
padding: 4px;
margin-right: 4px;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
}
}
/* END: Mobile Styles */
after some research I just break the table into 2 and wrap each of the table into DIV and its perfectly working now.
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.
I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one!
If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari.
I have provided below the CSS for the website.
I would appreciate if you guys can help me with the problem.
Thanks in advance. :)
==========================
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(images/templatemo_body_top.jpg);
background-color: #90857c;
background-repeat: repeat-x;
background-position: top;
text-align: left;
}
a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #073475; text-decoration: underline; }
h3 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h2 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h1 {
color: #696969;
font-size: 20px;
font-weight: bold;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.float_l { float: left; }
.float_r { float: right; }
.margin_r20 { margin-right: 20px; }
#templatemo_body_wrapper {
width: 100%;
background: url(images/templatemo_body_bottom.png) repeat-x bottom center;
}
#templatemo_wrapper {
width: 970px;
padding: 0 10px;
margin: 0 auto;
background: url(images/templatemo_wrapper_top.jpg) no-repeat top center;
}
/* header */
#templatemo_header {
clear: both;
width: 890px;
height: 60px;
padding: 20px 40px
}
#templatemo_header #site_title {
float: left;
padding-top: 15px;
}
#site_title a {
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
#site_title a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
/* end of header */
/* menu */
#templatemo_menu {
clear: both;
width: 970px;
height: 80px;
background: url(images/templatemo_menubar.png) no-repeat;
}
#search_box {
width: 990px;
height: 35px;
text-align: right;
}
#search_box form {
margin: 0;
padding: 5px 40px;
}
#search_box #input_field {
height: 20px;
width: 300px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#search_box #submit_btn {
height: 24px;
width: 100px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#666666;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#templatemo_menu ul {
width: 890px;
height: 35px;
margin: 0;
padding: 7px 40px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
margin-right: 40px;
font-size: 13px;
text-decoration: none;
color: #fff;
font-weight: normal;
outline: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
color: #162127;
}
/* end of menu */
/* contetnt */
#templatemo_content_wrapper {
clear: both;
padding: 0px 0;
}
#templatemo_content {
float: left;
margin-left: 10px;
width: 550px;
}
#banner {
margin: 0 0 10px 0;
}
#templatemo_content #content_top {
width: 550px;
height: 20px;
background: url(images/templatemo_content_top.png) no-repeat;
}
#templatemo_content #content_bottom {
width: 550px;
height: 20px;
background: url(images/templatemo_content_bottom.png) no-repeat;
}
#templatemo_content #content_middle {
width: 510px;
padding: 5px 20px 0px 20px;
background: url(images/templatemo_content_middle.png) repeat-y;
}
#content_middle p {
text-align: justify;
}
.templatemo_sidebar_wrapper {
width: 200px;
}
.templatemo_sidebar {
width: 197px;
padding-right: 3px;
background: url(images/templatemo_sidebar_middle.png) repeat-y;
}
.templatemo_sidebar_top {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_top.png) no-repeat;
}
.templatemo_sidebar_bottom {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_bottom.png) no-repeat;
}
.templatemo_sidebar .sidebar_box {
clear: both;
padding-bottom: 20px;
}
.sidebar_box1 {
padding: 15px;
}
.sidebar_box h2 {
color: #2d84ad;
font-size: 16px;
padding-left: 25px;
font-weight: bold;
margin: 0 0 10px 10px;
background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat;
}
.sidebar_box .sidebar_box_content {
padding: 15px;
background: url(images/templatemo_sidebar_box_top.png) top repeat-x;
}
.sidebar_box img {
border: 1px solid #999;
margin-bottom: 5px;
}
.sidebar_box .discount {
margin: 5px 0 0 0;
font-weight: bold;
}
.sidebar_box .discount span {
color: #C00;
}
.left_sidebar_box .discount a {
font-weight: bold;
color: #000;
}
.sidebar_box .categories_list {
margin: 0;
padding: 0;
list-style: none;
}
.categories_list li {
padding: 0;
margin: 0;
}
.categories_list li a {
display: block;
color: #201f1c;
padding: 5px 0 5px 20px;
background: url(images/list.png) center left no-repeat;
}
.categories_list li a:hover {
color: #439ac3;
text-decoration: none;
}
.news_box {
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
.news_box h4 {
padding: 2px 0;
margin: 0;
}
.news_box h4 a {
font-size: 12px;
font-weight: normal;
color: #1893f2;
}
#newsletter_box label {
display: block;
margin-bottom: 10px;
}
#newsletter_box .input_field {
height: 20px;
width: 155px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
#newsletter_box .submit_btn {
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
.product_box {
float: left;
width: 223px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCC;
text-align: center;
}
.product_box img {
margin-bottom: 10px;
}
.product_box h3 {
color: #2a2522;
font-size: 12px;
margin: 0 0 10px;
}
.product_box p {
margin-bottom: 10px;
}
.product_box p span {
color: #cf5902;
font-size: 14px;
font-weight: bold;
}
.product_box .detail {
float: right;
}
.product_box .addtocard {
float: left;
font-weight: bold;
padding-right: 20px;
background: url(images/templatemo_shopping_cart.png) bottom right no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer_wrapper {
background: url(images/templatemo_footer.png) repeat-x;
}
#templatemo_footer {
width: 910px;
height: 85px;
padding: 50px 40px 30px 40px;
margin: 0 auto;
text-align: center;
color: #a9a098;
}
#templatemo_footer a {
color: #d7d1cc;
font-weight: normal;
}
#templatemo_footer a:hover {
text-decoration: none;
color: #FFFF33;
}
#templatemo_footer .footer_menu {
margin: 0 0 30px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #d7d1cc;
}
.footer_menu li a {
color: #d7d1cc;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
/*twitter*/
#twitter_div {border-top: 0px;}
#twitter_div a {color: #0000ff !important;}
#twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;}
#twitter_update_list li {list-style-type: none; padding-right: 5px; }
#twitter_update_list li a {color: #0000ff; padding-right: 5px;}
#twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;}
#twitter_div a, #twitter_update_list li a {text-decoration: none !important;}
#twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}
Try moving the DIV with the class "templatemo_sidebar_wrapper" inside the DIV with the class "templatemo_content_wrapper".
On another note, there is quite a bit wrong with your site. I'm not trying to frustrate you or put you down, but you really should invest a serious amount of time into learning web design. It took me about 1 minute and 45 seconds to load your site which has a footprint of almost 10MB. This is extremely unacceptable by any standard. I would highly recommend switching to www.squarespace.com or something similar. I can tell you right now that it would cost more money to have a web design company fix your site than it would to have them design one from the ground up.
In its current state, your website will likely hurt your business more than it will help. Good luck.
Edit: Move "templatemo_sidebar_wrapper float_r" inside "templatemo_content_wrapper" (I'm not sure this is going to work...you have a lot going on on this page). Your code currently looks like this:
<div id="templatemo_content_wrapper">
<div class="templatemo_sidebar_wrapper float_l"></div>
<div id="templatemo_content"></div>
<div id="content_bottom"></div>
</div>
<div class="templatemo_sidebar_wrapper float_r"></div>