Here is the Code also in fiddle http://jsfiddle.net/SgtRx/ (should done this earlier, sorry)
Okay, My navigation bar is within the Div Wrapper, underneath the header, and on top of the content area (body).
I'm a pretty novice user, so excuse any mistakes I may be making.
When I added border to separate each block (button or text) it separated the buttons well, however, it leaves a small whitespace at the end of the nav bar (the right-hand side).
The wrapper Div is 1000px and I have 5 buttons, each 200px, Therefore without borders they fit in perfect, but with the borders if I keep the width at 200px the nav bar moves down, and when I reduce the width of the nav bar, it leaves the white space on the right. I have been doing this for 2 days and i finally give in. Please Help if you can. Thanks.
<body>
<div id="wrapper">
header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" order="0" align="center" cellpadding="0" cellspacing="0"/>
<nav id="mainnav">
<ul>
<li><a href="index.html" class="noBorder" >Home</a></li>
<li>Sightseeing</li>
<li>Eating Out</li>
<li>What's On</li>
<li>Test</li>
<li>Test1</li>
<li>Where to Stay</li>
</ul>
</nav></div>
</header>
And the CSS
#mainnav ul {
margin-top: auto;
margin-bottom: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
float: left;
width: 1000px;
margin-left: auto;
list-style-type: none;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin-right: auto;
right: 0px;
left: 0px;
top: 0px;
bottom: 25px;
}
/*This will style all links nested in the <nav> element with the ID mainnav*/
#mainnav a {
width: 197px;
display: block;
float: left;
text-align: center;
background-color: #020202;
color: #FCFCFC;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
line-height: 290%;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
left: 0px;
margin-top: auto;
border-color: #FFFFFF;
border-left-style: solid;
border-width: thin;
right: 0px;
bottom: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
opacity: 1;
}
.noBorder {
border-left-style: none !important;
}
I highly recommand you to use width:20% for each button instead of using fixed value.
Same goes for the navbar, use width:100%
This is your anserw:
jsfiddle
#mainnav a{
width:19.91%;
}
Here is the code:
I used display flex on ul.
Than set direct child li of ul *flex:1.
Lastly, I set a tag to width:100%
I have removed some unwanted code.
#charset "utf-8";
body {
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
margin: 0;
background-color: #250e20;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
padding-bottom: 0px;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
min-width: 739px;
max-width: 1000px;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
position: static;
}
#hero {
clear: left;
position: relative;
}
#hero img {
min-width: 100%;
min-height: 100%;
}
h1,
h2 {
color: #3399cc;
font-family: source-sans-pro;
font-weight: 600;
text-transform: none;
}
h1 {
font-size: 73px;
text-align: center;
text-transform: uppercase;
margin-top: 0px;
color: #ffffff;
}
#main {
width: 58%;
float: left;
margin-left: 2px;
}
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
clear: left;
background-color: #02080a;
color: #ffffff;
padding-left: 2%;
bottom: 10px;
position: static;
padding-right: 2px;
}
figure {
width: 420px;
}
figcaption {
display: block;
font-weight: bold;
font-size: 14px;
text-align: center;
}
figure img {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
background-color: #ffffff;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}
.centered {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
clear: none;
}
.floatleft {
margin-right: 10px;
float: left;
}
.floatright {
margin-left: 10px;
float: right;
}
/*This will style links in all states*/
a {
text-decoration: none;
font-weight: bold;
right: 0px;
}
a:link {
color: #ff6600;
}
a:visited {
color: #ff944c;
}
a:visited {
color: #ff944c;
}
a:hover,
a:active,
a:focus {
color: #f5f406;
text-decoration: underline;
list-style-type: none;
}
/*This targets the unordered list nested inside the <nav> element with the ID mainnav*/
#mainnav ul {
padding: 0;
display: flex;
width: 100%;
list-style-type: none;
position: relative;
right: 0px;
left: 0px;
bottom: 25px;
}
#mainnav ul>li {
flex: 1;
}
/*This will style all links nested in the <nav> element with the ID mainnav*/
#mainnav a {
z-index: 1;
width: 100%;
display: inline-block;
text-align: center;
background-color: #020202;
color: #fcfcfc;
text-transform: uppercase;
font-size: 16px;
line-height: 24px;
border-radius: 0px;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0px;
text-shadow: 0px 0px;
position: relative;
border-color: #ffffff;
border-left-style: solid;
border-width: thin;
}
.noBorder {
border-left-style: none !important;
}
#mainnav a:hover,
#mainnav a:active,
#mainnav a:focus,
#mainnav a.thispage {
text-decoration: none;
background-color: #43a6cb;
}
#hero article {
width: 36%;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 10px;
right: 43px;
background-color: #d88673;
border-radius: 15px;
color: white;
}
#hero h2 {
color: white;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: -7px;
}
#container {
background-color: #e1e54e;
display: block;
width: 1000px;
height: 420px;
float: left;
overflow: auto;
}
#prev {
background-image: url(../images/larrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 420px;
float: left;
position: relative;
z-index: 99;
}
#next {
background-image: url(../images/rarrow.png);
background-repeat: no-repeat;
background-position: center center;
display: block;
width: 100px;
height: 420px;
float: right;
position: relative;
z-index: 99;
}
#slider {
display: block;
width: 1000px;
height: 420px;
float: left;
position: absolute;
overflow: hidden;
}
article,
aside,
figure,
footer,
header,
nav {
display: block;
}
#test {
height: 220px;
margin-top: -8px;
margin-bottom: -8px;
padding-bottom: 0px;
position: static;
width: 1000px;
}
<body>
<div id="wrapper">
<header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" border="0" align="center" cellpadding="0" cellspacing="0" />
<nav id="mainnav">
<ul>
<li>Home</li>
<li>Sightseeing</li>
<li>Eating Out</li>
<li>What's On</li>
<li>Where to Stay</li>
</ul>
</nav>
</div>
</header>
<div id="hero">
<div id="hero2">
<div id="container">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="images/slide2.jpg" width="1000" height="420" />
<img src="images/slide3.jpg" width="1000" height="420" />
</div>
<div class="controller" id="next"></div>
</div>
</div>
</div>
<article id="main">
<h2>Riding the Cable Cars</h2>
<p>No visit to San Francisco is complete without a ride on the iconic cable cars that climb up the vertiginous hills of the city. Of the twenty-three lines established between 1873 and 1890, three remain: two routes from downtown near Union Square
to Fisherman's Wharf, and a third route along California Street.</p>
<p>The cable cars rely on cables running constantly beneath the road’s surface. The driver—or gripman—uses a lever to grip the cable to pull the car and its passengers up the hill. The gripman requires not only great strength, but also great
skill. He needs to know where to release the cable to coast over crossing cables and points. The conductor works in close cooperation with the gripman, operating the brake at the rear of the car to prevent it from running out of control on the
downward slopes.</p>
<figure><img src="images/cable_car1.jpg" width="400" height="266" alt="" />
<figcaption>The cable car terminus near Union Square</figcaption>
</figure>
<p>Although the cable cars are now mainly a tourist attraction, they're still used by local commuters to get to and from work. The California Street line is particularly popular among commuters on weekdays.</p>
</article>
<aside id="sidebar">
<h2>Cable Car Tips</h2>
<p>A single ride on a cable car costs $6. If you plan to travel around the city, it's often cheaper to buy a Muni Passport, which gives you unlimited rides on San Francisco's extensive public
transport system, including the cable cars (but not the BART subway system). Even a single-day passport ($14) will save you money if you make a return trip, and stop off to visit Chinatown one way.</p>
There are often long lines at the cable car terminus, particularly on the Powell-Mason and Powell-Hyde routes. If you don't want to wait, try walking a few stops along the route. The conductor usually leaves a small number of places to pick up passengers
on the way. The California Street route is generally less crowded (but not as spectacular).
</aside>
<footer>
<div id: "footer">
<p>© Copyright 2014 Bayside Beat</p>
</div>
</footer>
</div>
</body>
</html>
Related
I am finishing up a site for my church and I am having trouble figuring out how to keep my section content inside of the container. It overflows down beyond the footer. I am not very experienced with CSS so I'm not sure where the problem is. I have tried making adjustments to the display type of the section. I already have overflow: hidden included. I'm not sure where the problem is, beyond my inexperience, that is. I know my limits are surpassed with this project for sure. I just want to help my church out with this and finish it up. Any help is appreciated greatly.
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
position: absolute;
top: 47px;
width: 100%;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#container {
height: 100%;
width: 100%;
margin-right: auto;
}
#wrapper {
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
height: auto;
width: auto;
color: #333;
position: relative;
top: 310px;
padding-left: 20px;
}
h1 {
position: relative;
top: 240px;
color: #333;
margin-left: 20px;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft {
padding-left: 40px;
width: 50%;
position: relative;
float: left;
margin: auto;
line-height: 1.8;
}
.floatRight {
width: 38%;
position: relative;
float: left;
margin: auto;
text-align: right;
padding-right: 20px;
line-height: 1.8;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
position: absolute;
bottom: 0px;
color: #777;
width: 100%;
background-color: #840D55;
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>
Updated styles (without positioning - it seems you don't need it here - and other bloat). Use margins to set distances among elements accordingly to your ideas, not positioning. Also you might want to add normalize.css before your styles for better cross-browserness. So, you can start again from here:
html {
box-sizing: border-box;
font-size: 14px;
}
*, *:before, *:after {
box-sizing: inherit;
}
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#wrapper {
width: 90%;
margin: 0px auto;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
color: #333;
padding-left: 20px;
}
section:after {
content: "";
display: table;
clear: both;
}
h1 {
color: #333;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft, .floatRight {
line-height: 1.8;
width: 50%;
text-align: left;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-left: 10%;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
color: #fff;
text-align: center;
padding: 1rem;
background-color: #840D55;
}
#media (max-width: 767px) {
#wrapper {
width: 100%;
}
.floatLeft, .floatRight {
width: 100%;
padding: .8rem;
}
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of
Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
My slideshow div is paced above my header nav in HTML to create a fullscreen slideshow but all the elements on my page are fading with my slideshow, how do I prevent that?
Thank you
I'm new at this, so I'm not sure if the layout is correct or not.
enter code here
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
"use strict";
var scroll_start = 0;
var startchange = $('#about');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('#header').css('background-color', '#3A3939');
} else {
$('#header').css('background-color', 'transparent');
}
});
});
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'images/pic3.png';
backgrounds[1] = 'images/pic2.png';
backgrounds[2] = 'images/pic1.png';
backgrounds[3] = 'images/pic4.png';
function changeBackground() {
currentBackground++;
if(currentBackground > 3) currentBackground = 0;
$('.slideshow').fadeOut(900,function() {
$('.slideshow').css({
'background-image' : "url('" + backgrounds[currentBackground] + "')"
});
$('.slideshow').fadeIn(1000);
});
setTimeout(changeBackground, 3500);
}
$(document).ready(function() {
setTimeout(changeBackground, 3500);
});
</script>
</head>
<body>
<div id="home">
<div class="slideshow">
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="styledimg"></div>
</nav>
</div>
<div id="head-soc">
<div id="linkedin-icon">Linkedin</div>
<div id="youtube-icon">Youtube</div>
<div id="facebook-icon">Facebook</div>
</div>
<div class="content">
<p>Create, Collaborate, Innovate</p>
</div>
</div>
</div>
<div id="about">
<div class="wrapper">
<h4>Titus Jackson</h4>
<p>Film Maker ~ Screen Writer ~ Editor</p>
</div>
<img src="images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
<div id="section2">
<p>For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators tulsa has to offer. We love working on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.</p>
<p>Our paramount value is to approach the material with excellence, and an original point of view to tell a unique and compelling story. It is our belief that life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.</p>
<p>We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created multiple award winning music vidoes, short films and even a feature film. Feel free to take a look around the site, and drop us an email, we look forward to hearing from you.</p>
<img src="images/email1.png" alt="email" width="26" height="26" />
</div>
</div>
<div id="projects">
<h5>View our current projects:</h5>
<div class="wrapper1">
<iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
<p>Eugene Gregory Promo</p>
</div>
<div id="wrapper2">
<iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
<p>Family Cup Promo</p>
</div>
<div class="wrapper3">
<iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
<p>This Generation</p>
</div>
</div>
<div id="contact">
<section3>
<h3>To connect with Us:</h3>
<p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
<p>If your interested in our work, you can connect with us via email or phone.</p>
</section3>
<div class="section4">
<img src="images/email1.png" alt="email" width="26" height="26" />
<a href="mailto:titusjackson#mac.com">
<p>titusjackson#mac.com</p>
</a><img src="images/phone.png" alt="phone" width="24" height="24" />
<p>+1 (918) 671-3340</p>
</div>
</div>
<footer>
</footer>
</body>
</html>
#charset "UTF-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#header {
width: 100%;
margin-top: -15px;
position: fixed;
background-color: transparent;
transition-duration: 1s;
}
div#header nav {
width: 1425;
height: 110px;
}
div#header ul {
list-style: none;
margin-left: 100px;
float: left;
}
div#header li {
float: left;
margin-left: 64px;
margin-top: 10px;
}
div#header a {
color: white;
text-decoration: none;
line-height: 45px;
font-size: .9em;
text-transform: capitalize;
}
div#header a:hover {
color: rgba(249,0,3,1.00);
}
div#styledimg {
background-image: url(images/logo.png);
background-repeat: no-repeat; width: 224px;
height: 85px;
float: right;
margin-right: 150px;
margin-top: 10px;
z-index: 1003;
}
/*page-specific header styles*/
#header {
background-color: rgba(60,59,59,1.00);
width: 1425;
height: 110px;
}
/* layout styles*/
/*home page*/
.slideshow {
background-image:url(images/pic3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 500px 0px 0px;
background-attachment: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 900px;
line-height: 0px;
margin-top: -330px;
padding-top: -15px;
}
#header {
background-color: transparent;
}
#head-soc {
width: 129;
height: 86;
margin: 10px;
padding: 0px;
float: right;
margin-right: 40px;
margin-top: 255px;
right: 25px;
position: fixed;
z-index: 2;
}
#head-soc a {
margin-top: 10px;
margin-right: 20px;
}
#linkedin-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: 0px 0px;
}
#linkedin-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: 0px -43px;
}
#youtube-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
margin-left: 20px;
background-position: -43px 0px;
}
#youtube-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -43px -43px;
}
#facebook-icon a {
text-indent: -9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 43px;
width: 43px;
border: 0;
background-image: url(images/socialsprites_white.png);
display: block;
float: right;
background-position: -86px -85px;
}
#facebook-icon a:hover {
background-image: url(images/socialsprites_white.png);
background-position: -86px -128px;
}
.content p {
font-family: BlairMdITC TT-Medium;
font-size: 44px;
line-height: 120%;
width: 550px;
text-align: center;
padding-top: 360px;
margin-top: 330px;
margin-left: 575px;
color: rgba(248,241,241,1.00);
}
/* about page*/
div#about {
background-color:rgba(188,184,184,1.00);
height: 550px;
margin-top: -35px;
padding-top: 100px;
}
.wrapper h4 {
font-famiy: Geneva;
font-size: 25px;
padding-left: 224px;
color: rgba(249,0,3,1.00);
margin-bottom: -20px;
}
.wrapper p {
font-family: Geneva;
font-size: 12px;
margin-left: 226px;
margin-top: 20px;
margin-bottom: 15px;
color: rgba(134,133,133,1.00);
}
h6 {
padding-left: 225px;
margin-top: -20px;
margin-bottom: 10px;
color: rgba(60,59,59,1.00);
}
img {
float: left;
margin-left: 225px;
margin-right: 15px;
}
#section2 {
font-family: Helvetica;
font-size: 16px;
color: rgba(60,59,59,1.00);
width: 1280px;
padding-top: -80px;
height: 300px;
}
#section2 p {
color: rgba(60,59,59,1.00);
}
#section2 img {
margin-left: 2px;
}
span {
color: rgba(249,0,3,1.00);
}
/* projects page */
div#projects {
background-color: #3A3939;
background-position: 25px;
height: 450px;
margin: 0px;
line-height: 0;
padding-top: 25px;
}
.wrapper1 {
float: left;
width: 265;
height: 200px;
margin-left: 200px;
padding-top: 50px;
}
#wrapper2 {
float: right;
width: 265;
height: 200px;
margin-right: 200px;
padding-top: 50px;
}
.wrapper3 {
float: left;
margin-left: 175px;
padding-top: 50px;
width: 265;
height: 200px;
}
.wrapper1 p {
margin-left: 42px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
#wrapper2 p {
margin-left: 65px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
.wrapper3 p {
margin-left: 70px;
font-family: BlairMdITC TT-Medium;
font-size: 20px;
color: rgba(249,0,3,1.00);
margin-top: 20px;
}
div#projects h5 {
margin-left: 650px;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
color:rgba(179,178,178,1.00);
padding-bottom: 45px;
margin-bottom: -15px;
}
p {
font-size: 16px;
margin-left: 195px;
color: rgba(249,247,247,1.00);
}
/* contact page */
div#contact {
background-image:url(images/studio4.png);
background-size: cover;
background-attachment: fixed;
padding-top: 35px;
padding-bottom: 100px;
}
section3 h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: rgba(249,0,3,1.00);
margin-left: 660px;
margin-top: 75px;
}
section3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: rgba(255,255,255,1.00);
width: 650px;
padding-left: 85px;
margin-left: 385px;
}
.section4 {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: rgba(255,255,255,1.00);
margin-left: 440px;
margin-top: 50px;
}
.section4 a {
text-decoration: none;
}
.section4 a p:hover {
color: rgba(249,0,3,1.00);
}
/* ~~ The footer ~~ */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
}
You've placed all of your HTML inside of the div with the slideshow class:
<div class="slideshow"> //this is left open
//other divs are closed later on like this one:
<div id="styledimg"></div>
//but all the divs below slideshow are inside of the slideshow div
So whatever animations you're doing to the slideshow div, will affect all of its children.
I created a hamburger dropdown menu which was working until recently, which I'm guessing is due to a browser update in Chrome. So I'm looking into improving the stability of it across browsers. Now it does not display at all. In Chrome is looks like it is positioned correctly via the dev tools. (My website if anyone wants to inspect: http://alexandstein.com/main/dndchar ) I tried checking the Z-index, but it seems I've already set that to 30.
Here is the HTML for the navigation, which includes the hamburger menu.
<nav id="navigation">
<ul>
<span id="logo">
<li>Alexworks</li>
</span>
<span id="links">
<li>About-Meta</li><li>Projects</li><li>Music</li> </span>
<span id="hamburgerSection">
<li id="hamburger" class="menuFocused"><img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall">
</li>
</span></ul>
<div id="hamburgerMenu" style="display: block;">
<div id="controls">
<img height="35" width="35" class="textControls" id="smallTextButton" src="/resources/images/icons/TextIconSmall.png" alt="Small">
<img height="35" width="35" class="textControls" id="medTextButton" src="/resources/images/icons/TextIconMed.png" alt="Medium">
<img height="35" width="35" class="textControls" id="largeTextButton" src="/resources/images/icons/TextIcon.png" alt="Large">
</div>
<p>Table of Contents</p><p>
</p><ul id="tableOfContents"><li>Preface</li>
<li>Instructions</li>
<li>DnD Character Manager</li>
<li>Notes</li>
</ul>
</div>
</nav>
The pertinent CSS:
#hamburgerMenu{
background-color: rgba(30,30,30, 0.9);
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding: 9px;
width: 230px;
position: fixed;
top: 35px;
right:0%;
z-index: 30;
font-size: 12pt;
border-left-style: solid;
border-left-color: rgba(100,100,100, 0.5);
border-left-width: 4px;
overflow-x: hidden;
.textControls{
width: 35px;
height:35px;
margin-right: 5px;
display: inline;
background-color: white;
color: black;
text-decoration: underline;
text-align: center;
opacity: 0.5;
}
.textControls:hover{
opacity: 1.0;
}
}
Here is the navigation CSS if anyone wants to check the parent element for any quirks:
/*NAVIGATION BAR*/
#navigation{
min-width: #MIN-WIDTH;
list-style-type: none;
text-align: center;
width: 100%;
margin: 0%;
padding: 0%;
padding-top: .3em;
position: fixed;
top: 0px;
right:0px;
z-index: 10;
background-color: black;
height: 35px;
overflow-y: hidden;
overflow-x: scroll;
ul{
margin: 0%;
padding: 0%;
padding-top: 0%;
}
a{
margin-top: 5px;
margin-right: .4em;
color: #HEADER_TEXT;
}
a:visited{
color: #999;
}
a:hover{
color: #bbb;
}
li{
display: inline-block;
width: 13em;
height: 1.8em;
border-bottom-style: solid;
border-bottom-color: red;
}
li:hover{
background-color: #333;
}
.iconSmall{
width: 30px;
height:30px;
}
#logo{
display: inline-block;
text-align: left;
width: inherit;
float:left;
letter-spacing: 5px;
}
#links{
display: inline-block;
right: 0px;
}
#hamburger{
width: 30px;
border-bottom-style: none;
float: right;
}
}
The problem is the overflows on your #navigation element. With these overflows, you are telling the browser to not show anything outside the scope of the #navigation element.
The most likely reason why it was working before and isn't now is overflow-x and overflow-y are still experimental (and also not backward compatible). I'd recommend taking them out.
Picture with the chrome inspector changes:
I am having trouble with my footer menu links and social icon buttons. I created the footer so that it will stretch across the entire browser window. However now when I lay the menu links and social media icons inside the div they are moving whenever the page is re-sized. What do I need to do in order to make the placement of the menu links and social media links stay in the proper place?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MECA Basketball Club</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
<script type="text/javascript" src="jQuery/infinite-rotator.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-2.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-3.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-4.js"></script>
<style type="text/css">
body
{
background-image: url(img/backgroundimg.png);
background-repeat: repeat-x;
/*background-color:white;*/
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
}
#header
{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 47px;
background-image: url(img/headerimg.png);
}
#headerlogo
{
position: absolute;
top: 0;
width: 201px;
height: 118px;
background-image: url(img/headerlogo_padding.png);
}
#header-nav-menu
{
position: relative;
left: 580px;
top: 0px;
width: 400px;
list-style-type: none;
}
.nav-button-header-menu-1
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 125px;
}
.nav-button-header-menu-2
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 104px;
}
.nav-button-header-menu-3
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 105px;
}
.nav-button-header-menu-1:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-2:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-3:hover
{
color: #d4d3d2;
}
#main-nav-container
{
width: 197px;
height: 500px;
float: left;
margin-top: 95px;
}
#mainnav
{
position: relative;
top: 0px;
left: 0px;
list-style-type: none;
margin: 0;
padding-left: 8px;
}
.navbutton-red-top
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 10px 10px 0px 0px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black-bottom
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red-top:hover
{
background: #e91101;
}
.navbutton-red:hover
{
background: #e91101;
}
.navbutton-black:hover
{
background: #2c2b2b;
}
.navbutton-black-bottom:hover
{
background: #2c2b2b;
}
#content
{
background-color: white;
width: 1024px;
float: left;
box-shadow: 0px 3px 20px #515050;
}
#rotating-item-wrapper
{
position: relative;
margin-left: 240px;
margin-top: 20px;
padding: 150px;
}
.rotating-item
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#placeholderdiv
{
padding-left: 40px;
padding-top: 10px;
}
#slideshow
{
padding-left: 40px;
padding-top: 10px;
}
#video1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
.stats-offense
{
padding-left: 10px;
padding-top: 10px;
float: left;
}
#events1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
#rotating-item-wrapper-2
{
position: relative;
left: 455px;
top: 281px;
}
.rotating-item-2
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#rotating-item-wrapper-3
{
position: relative;
left: 240px;
top: 532px;
padding: 300px;
}
.rotating-item-3
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
.stats-defense
{
position: relative;
left: 766px;
top: -68px;
overflow: auto;
padding-bottom: 206px;
}
#rotating-item-wrapper-4
{
position: relative;
left: 240px;
top: -260px;
padding: 35px;
}
.rotating-item-4
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#footer-home
{
position: absolute;
bottom: -600px;
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#footer-nav-menu-left
{
position: absolute;
left: 0px;
list-style-type: none;
margin-left: 430px;
}
#footer-nav-menu-right
{
position: absolute;
list-style-type: none;
margin-left: 550px;
}
.nav-button-footer
{
font-family: Calibri;
color: white;
text-decoration: none;
}
.nav-button-footer:hover
{
color: #c5c5c4;
}
#SocialMedia
{
font-family: Calibri;
color: white;
}
#Facebook-icon
{
}
#Twitter-icon
{
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="headerlogo"></div>
<ul id="header-nav-menu">
<li><a class="nav-button-header-menu-3" href="#RegisterLeague">Login</a></li>
<li><a class="nav-button-header-menu-2" href="#RegisterLeague">Join The
Club</a></li>
<li><a class="nav-button-header-menu-1" href="#RegisterLeague">Register
League</a></li>
</ul>
<div id="content">
<div id="main-nav-container">
<ul id="mainnav">
<li><a class="navbutton-red-top" href="#stats">STATS</a></li>
<li><a class="navbutton-red" href="#stats">EVENTS</a></li>
<li><a class="navbutton-red" href="#stats">FIND A LEAGUE</a></li>
<li><a class="navbutton-red" href="#stats">SCHEDULE</a></li>
<li><a class="navbutton-black" href="#stats">BECOME A REFEREE</a></li>
<li><a class="navbutton-black" href="#stats">REGISTER LEAGUE</a></li>
<li><a class="navbutton-black-bottom" href="#stats">JOIN THE CLUB</a>
</li>
</ul>
</div>
<div id="rotating-item-wrapper">
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd1.png" />
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd2.png" />
</div>
<div id="video1">
<img src="img/ContentArea1/Video/video1img.png" />
</div>
<div class="stats-offense">
<img src="img/ContentArea1/Stats/stats1img.png" />
</div>
<div id="events1">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-2">
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad2Img.png" />
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad23Img.png" />
</div>
<div id="rotating-item-wrapper-3">
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad3Img.png" />
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad4Img.png" />
</div>
<div class="stats-defense">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-4">
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner1img.png"
/>
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner2img.png"
/>
</div>
</div>
<div id="footer-home">
<ul id="footer-nav-menu-left">
<li><a class="nav-button-footer" href="#RegisterLeague">About</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Contact Us</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Press Inquiry</a>
</li>
</ul>
<ul id="footer-nav-menu-right">
<li><a class="nav-button-footer" href="#RegisterLeague">Terms of Use</a>
</li>
<li><a class="nav-button-footer" href="#RegisterLeague">Privacy Policy</a>
</li>
</ul>
<div id="SocialMedia">Follow Us</div>
<div id="Facebook-icon">
<img src="img/SocialMediaIcon/FB_icon.png" alt="Facebook" /></div>
<div id="Twitter-icon">
<img src="img/SocialMediaIcon/Twitter_icon.png" alt="Twitter" /></div>
<div id="Instagram-icon">
<img src="img/SocialMediaIcon/IG_icon.png" alt="Instagram" /></div>
<div id="YouTube-icon">
<img src="img/SocialMediaIcon/YouTube_icon.png" alt="YouTube" /></div>
</div>
</div>
</body>
</html>
Click the link below to see how it currently looks:
http://www.micre8tivegroup.com/default.html
As I was writing on the comments section, this is not a single thing issue. This is a problem with many things being done incorrectly. But mainly:
The structure of the page is poorly designed. I understand that this page is more of testing, but creating a web site is not directly getting into coding but analyzing and designing a solution. Coding may be the "fun part", but it's not the most important.
The positioning of the elements is incorrect. As a personal recommendation: avoid using position:absolute for controls. In your page, the logo is a good example of position absolute (although it could be done in other ways), all the rest absolute positioning shouldn't be there and breaks the page.
Here you have a link to a version the solves the position problems that you commented about: http://muzaw.com/test.html. Test it, and let me know if that's what you were aiming for (I know not everything will fit perfectly but that's just a matter of changing some values in the CSS).
The changes that I made:
Removed the position absolute for the header and footer (or changed to position:relative)
Restructured the page to fit a "more convenient" web page design.
Changed the CSS of some of the elements.
I understand you are learning, that I sound patronizing, and that my comments and answer may frustrate you; but if you start learning bad things from the beginning, it will be worse later.
I've found a way to do what you want, but the header and the footer will be the same width as your mainContainer.
Just change your CSS to :
#footer-home
{
position: absolute;
bottom: 0; /* Put it back to 0 */
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
/* Add the code below */
left: 0;
right: 0;
position: absolute;
}
That way, the footer will always stay at the bottom.