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;}
Related
I am building a personal website, and want to get a dropdown menu working. So far the first part is working, but the second (dropdown in dropdown) isn't.
It is the "Alternate History" line that isn't showing up.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
#links img,
footer img,
li img,
h1 img,
h2 img,
h3 img,
p img,
.dropme img {
height: 1em;
}
footer {
clear: both;
text-align: center;
padding-top: 2em;
}
body {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 1em;
background: #111;
color: #eee;
}
html {
padding-bottom: 500px;
}
dt {
color: orange;
margin-top: 2px;
}
dd {
margin-bottom: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
text-shadow: -1px 3px 3px rgba(0, 0, 0, 0.68);
}
h1 {
color: red;
}
h2 {
color: goldenrod;
}
h3 {
color: teal;
}
a {
color: lime;
text-decoration: none;
}
a:hover {
color: red;
}
.menubar li a {
display: block;
}
.menubar {
display: inline-block;
margin: 0;
padding: 0;
zoom: 1;
}
nav {
margin-left: auto;
margin-right: auto;
font-size: large;
text-align: center;
}
.menubar li {
display: block;
float: left;
width: 100px;
min-height: 1.5em;
background: #222;
border: #444 solid 2px;
padding: 3px;
margin: 4px;
}
.menubar li:hover {
background: #000;
}
.menubar a {
text-decoration: none;
}
.menubar li ul {
visibility: hidden;
position: absolute;
padding-top: 10px;
}
.menubar li:hover ul {
visibility: visible;
padding-left: 0;
margin-left: -7px;
}
.menubar li ul li {
float: none;
position: relative;
width: 150px;
text-align: left;
}
code {
color: green;
/* overflow-x: auto; */
}
/* pre { */
/* background: var(--color256); */
/* border: 1px solid var(--color8); */
/* border-radius: 4px; */
/* padding: 5px; */
/* display: block; */
/* align: center; */
/* max-width: 900px; */
/* /1* background: #1d2021; *1/ */
/* } */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smash Civilization's Homepage</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta charset="utf-8" />
</head>
<body>
<nav>
<ul class="menubar">
<h1><big>Smash Civilization</big></h1>
<div id="links">
<div class="cat">
<li>Home</li>
<li>About</li>
<li>Literature
<ul>
<li>Category</li>
<ul>
<li>Alternate History</li>
</ul>
<li>Dewey Decimal</li>
</ul>
<li>Issues</li>
<li>Podcasts</li>
<li>Talks</li>
<li>Vision</li>
</div>
</div>
</ul>
</nav>
</body>
</html>
What do I need to fix to get this working correctly? Any help is most appreciated!
it's my first year on coding and i'm doing this for a school Project. We have to do a responsive site and i'm already facing a problem when trying to add a navbar to my site. Whenever i add it, it just goes too much to the left and wont go in the middle. I tried searching google for help but none of them worked so thought i'd register here to ask. Thanks in advance!
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
If you want your menu items centered inside the whole menu bar, just do as #Pete said:
li {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center; <-----------
}
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
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.
So here's what I should be getting
But this is what I'm getting
As you can see the yellow section is missing. Here's my working example http://jsfiddle.net/Qk543/ but for some weird reason I cannot replicate it. Here's my code for the defective page.
<div class="wrap">
<div class="foot">
<ul class="styl">
<a id="html" href="#">
<li style="background: #F16529">
WORD
</li>
</a>
<a id="css" href="#">
<li style="background: #2AA9E0">
WORD
</li>
</a>
<a id="php" href="#">
<li style="background: #8892BF">
WORD
</li>
</a>
<a id="js" href="#">
<li style="background: #F0DB4F">
WORD
</li>
</a>
</ul>
</div>
</div>
And the CSS to it...
h1 {
padding: 80px 0 40px;
font-size: 40px;
line-height: 48px;
color: #505762;
}
.search h1 {
padding: 60px 0;
}
.slidey {
overflow: hidden;
padding: 30px 0;
background: #f3f5f8;
border-bottom: 1px solid #e5e8ed;
}
.js-enabled .slidey {
-webkit-transition: margin-top .2s;
-moz-transition: margin-top .2s;
transition: margin-top .2s;
}
.slidey b, .slidey label {
display: block;
font-weight: 500;
padding-bottom: 15px;
font-size: 15px;
font-weight: 500;
}
.slidey form, .slidey aside {
float: left;
width: 50%;
}
.slidey form input {
padding: 20px;
width: 75%;
}
.slidey li {
list-style: none;
}
.slidey a {
display: block;
text-decoration: none;
color: #717985;
}
.slidey a:hover {
color: #414b59;
}
.slidey li span {
float: right;
opacity: .6;
}
#top {
overflow: hidden;
padding: 20px 35px;
background: #fff;
border-bottom: 1px solid rgba(22,36,54,.1);
}
#top a {
float: left;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #8895a7;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover {
color: #4171b1;
}
#top ul {
list-style: none;
float: right;
}
#top ul li {
float: left;
padding-left: 40px;
}
#top ul a {
display: inline-block;
color: #555f6d;
}
#top ul img {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
width: 16px;
height: 16px;
opacity: .4;
}
#top ul a:hover img {
opacity: .7;
}
#top ul a.active img {
opacity: 1;
}
/**
* Index page listing, category listing, search page results
*/
.items {
list-style: none;
}
.items > li {
padding: 70px 0 60px;
color: #97aec9;
background: #3c4552;
}
.posts .items > li:first-child {
background: #fff !important;
padding: 110px 0;
}
.items li h1 a, .posts .items > li:first-child h2 a {
color: #3d4551;
}
.items h1 {
padding: 0 0 8px;
}
.items h1 a {
text-decoration: none;
}
.items h2 {
font-size: 32px;
line-height: 41px;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: rgba(176,200,236,.8);
text-decoration: none;
}
.items h2 a:hover {
color: #fff;
}
.items .content {
padding: 10px 0 0;
}
.items .content p {
padding-bottom: 15px;
}
/**
* Pagination
*/
.pagination {
overflow: hidden;
padding: 30px 0;
margin-bottom: 50px;
border-top: 1px solid rgba(22,36,54,.1);
border-bottom: 1px solid rgba(22,36,54,.1);
}
.pagination:empty {
display: none;
}
.pagination a {
float: left;
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: #6f7b8b;
}
.pagination a:hover {
color: #3c4857;
}
.pagination a.next {
float: right;
}
/**
* Give some extra space to single-page wrappers
*/
.content.wrap {
padding-bottom: 50px;
}
.content.wrap ul, .content.wrap ol, .items li ul {
padding: 20px 30px;
}
.content.wrap ul ul, .content.wrap ol ol, .items li ul ul {
padding: 0 20px;
}
/**
* Footnotes and straplines
*/
.footnote, .commentlist time, .items footer {
display: block;
padding: 5px 0 15px;
color: #98a2b1;
font-size: 14px;
font-style: italic;
white-space: nowrap;
}
.footnote {
padding: 20px 0 40px;
}
/**
* Comment form
*/
ul.commentlist {
margin-bottom: 40px;
list-style: none;
border-top: 1px solid rgba(22,36,54,.1);
}
ul.commentlist .wrap {
position: relative;
}
ul.commentlist li {
padding: 40px 0;
border-bottom: 1px solid rgba(22,36,54,.1);
}
ul.commentlist time {
font-size: 13px;
}
ul.commentlist h2 {
font-size: 25px;
line-height: 33px;
}
ul.commentlist .counter {
position: absolute;
right: 0;
top: 0;
font-size: 25px;
font-weight: 300;
color: #cdd2da;
}
#comment {
overflow: hidden;
}
#comment label[for] {
display: none;
}
#comment p {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 10px;
text-indent: 0;
}
#comment p + p {
margin-right: 0;
}
#comment p.textarea {
float: none;
width: 100%;
}
#comment input, #comment textarea {
width: 100%;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
border: 1px solid rgba(22,36,54,.2);
border-radius: 4px;
}
#comment input:focus, #comment textarea:focus {
outline: none;
background: #f7f9fc;
}
#comment textarea {
min-height: 150px;
max-height: 800px;
resize: vertical;
}
#comment button {
display: inline-block;
padding: 9px 18px;
background: #4e82ce;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
#comment button:hover {
background: #3c6eb7;
}
*{padding:0;margin:0;}
body {
text-align: center;
padding-top: 50px;
font-family: "Helvetica Neue", sans-serif;
}
.foot{
bottom: 0px;
position: fixed;
width:100%;
margin: 0px;
font-weight: 400;
}
.foot li{
opacity: 0.95;
position: relative;
float: left;
list-style: none;
width: 25%;
height: 60px;
text-align: center;
}
.foot a{
font-size: 1.5em;
color: #fff;
height: 75px;
position: relative;
text-indent: 0;
text-decoration: none;
line-height: 60px;
}
.foot li:nth-child(1){
background: #B36C4E;
}
.foot li:nth-child(2){
background: #2AA9E0;
}
.foot li:nth-child(3){
background: #8892BF;
}
.foot li:nth-child(4){
background: #F0DB4F;
}
a:link{text-decoration: none}
a:hover{text-decoration: none}
a:visited{text-decoration: none}
a:active{text-decoration: none}
.content {
padding-right: 5%;
padding-left: 5%;
}
Any ideas?
You're using floats, so there's a good chance your last element is a pixel or so too wide for the container it's in and it's floating to the next line.
Try changing the width to 24% on each element and you'll probably see all four.
If you don't want to play with the width, try adding this to your css:
* {
box-sizing: border-box;
}
That includes any padding/margin in the width so that 25% width will be the true width instead of 25% plus padding/margin.
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?