Toon posts:

[CSS] Background komt onder footer uit

Pagina: 1
Acties:
  • 309 views

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Beste mensen,

Ik heb een probleem bij de CSS van mij website.
De footer is onderaan de pagina gepostioneerd maar een kleine strook van de background komt er onder vandaan.

Hoe los ik dit op?

De code ziet er als volgt uit:


/* Resets
--------------------------------------------------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

fieldset {
border: 0;
}

a img {
border: 0;
}

.clear {
clear: both;
font-size: 0;
height: 0;
}

a {
color: #446d96;
text-decoration: none;
}

a:hover {
color: #608ebd;
text-decoration: none;
}

/* General Styling and Structure
--------------------------------------------------------------------------------*/

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #666666;
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
background: #9f9f9f url(atletiekbaanl.jpg) repeat-x;
}

p {
line-height: 1.5;
padding: .5em 0;
}

h1,
h2,
h3,
h4 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}

h1 {
font-size: 30px;
line-height: 1;
color: #fff;
}

h2,
h3 {
line-height: 1.3;
padding: .3em 0;
color: #333;
}

h4 {
font-size: 14px;
line-height: 1.2;
margin-bottom: 5px;
}

blockquote {
font-style:italic;
border-left:4px solid #ddd;
margin:10px 0 10px 0;
padding-left:20px;
line-height:1.5;
color:#888;
}

#header-wrap,
#banner-wrap,
#navigation-wrap,
#main-wrap,
#footer-wrap {
min-width: 960px;
height: 100%;

}

#header,
#banner,
#navigation,
#main,
#footer {
width: 960px;
margin: auto auto 0;
}

#header-wrap {
background: #3b67fb;
background: url(body-bgcopy.png) repeat-x top;
}

#header-top {
width: 960px;
margin: 0 auto;
}

#logo,
#logo a {
text-decoration: none;
font-size: 28px;
color: #333333;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}


/* Navigation
--------------------------------------------------------------------------------*/

#navigation-wrap {
background-color: ##0e71bf;
min-height: 15px;
}

#navigation {
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1;
background: none;
}

#navigation ul {
}

#navigation li {
float: left;
position: relative;
padding: 0;
margin: 0 15px 0 0;
}

#navigation li a {
float: left;
display: block;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 15px 12px;
margin: 0;
border: 0;
outline: 0;
}

#navigation li:hover a,
#navigation li#active a {
color: #ffffff;
background: #1189d5; color="#db0000""#3b67fb"color="#1397e1" color="#0e71bf"
}

/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/

#wsite-menus .wsite-menu li a {
padding: 8px;
color: #fff;
background: #9f9f9f;
border: 0;
border-bottom: 1px solid #3b67fb;
}

#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #1189d5;
}

/* Header Area
----------------------------------------------------------------------------*/

#header {
width: 100%;
height: 90px;
}

#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}

#header td {
vertical-align: middle;
text-align: left;
}

#logo {
padding: 25px 0 25px 10px;
}

#header-right {
padding: 0 10px 0 10px;
}

#header-right table {
float: right;
width: 1px;
}

#header-right td {
padding: 0;
}

/* TOP RIGHT: Phone Number
--------------------------------------------------------------------------------*/

#header-right .phone-number .wsite-text {
color: #333333;
text-align: right;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
display: block;
white-space: nowrap;
margin: 0 0 0 10px;
}

/* TOP RIGHT: Content Area
--------------------------------------------------------------------------------*/

#header-right .wsite-social {
vertical-align: middle;
margin: 0 0 0 12px;
}


.wsite-social-item {
width: 20px;
height: 20px;
margin: 0 0 0 3px;
background-image:url(social-midgrey.png);
}

.wsite-social-facebook {background-position:0 0;}
.wsite-social-facebook:hover {background-position:0 -20px;}
.wsite-social-facebook:active {background-position:0 -40px;}
.wsite-social-pinterest {background-position:-20px 0;}
.wsite-social-pinterest:hover {background-position:-20px -20px;}
.wsite-social-pinterest:active {background-position:-20px -40px;}
.wsite-social-twitter {background-position:-40px 0;}
.wsite-social-twitter:hover {background-position:-40px -20px;}
.wsite-social-twitter:active {background-position:-40px -40px;}
.wsite-social-linkedin {background-position:-60px 0;}
.wsite-social-linkedin:hover {background-position:-60px -20px;}
.wsite-social-linkedin:active {background-position:-60px -40px;}
.wsite-social-mail {background-position:-80px 0;}
.wsite-social-mail:hover {background-position:-80px -20px;}
.wsite-social-mail:active {background-position:-80px -40px;}
.wsite-social-rss {background-position:-100px 0;}
.wsite-social-rss:hover {background-position:-100px -20px;}
.wsite-social-rss:active {background-position:-100px -40px;}
.wsite-social-flickr {background-position:-120px 0;}
.wsite-social-flickr:hover {background-position:-120px -20px;}
.wsite-social-flickr:active {background-position:-120px -40px;}
.wsite-social-plus {background-position:-140px 0;}
.wsite-social-plus:hover {background-position:-140px -20px;}
.wsite-social-plus:active {background-position:-140px -40px;}
.wsite-social-vimeo {background-position:-160px 0;}
.wsite-social-vimeo:hover {background-position:-160px -20px;}
.wsite-social-vimeo:active {background-position:-160px -40px;}
.wsite-social-yahoo {background-position:-180px 0;}
.wsite-social-yahoo:hover {background-position:-180px -20px;}
.wsite-social-yahoo:active {background-position:-180px -40px;}
.wsite-social-youtube {background-position:-200px 0;}
.wsite-social-youtube:hover {background-position:-200px -20px;}
.wsite-social-youtube:active {background-position:-200px -40px;}

/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/

#header-right .search {
}

#header-right .wsite-search {
margin: 0 0 0 15px;
vertical-align: middle;
width: 205px;
height: 26px;
background: transparent url(searchForm-bg.png) no-repeat;
}

#header-right .wsite-search-input {
width: 150px;
height: 12px;
border: 0;
padding: 7px 10px 7px !important;
background: none;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
vertical-align: middle;
font-size: 12px;
}

#header-right .wsite-search-button {
vertical-align: middle;
width: 35px;
height: 26px;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 0;
background: none;
}

/* Footer
--------------------------------------------------------------------------------*/

#footer-wrap {
background: #9f9f9f;
background: url(body-bg.png) repeat-x;
margin: 0;

}

#footer {
padding: 25px 20px 40px;
margin-top: 0px;
margin-bottom: -20px;
height:73px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
font-size: 12px;
border: none;
text-align: right;
}

#footer-right {
float: right;
width: 240px;
text-align: right;
display: none;
}

.rights {
line-height: 19px;
vertical-align: middle;
}

.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 0px;
}

#footer h2 {
font-size:16px;
color:#555;
border-bottom:1px solid #ccc;
}

/* Footer Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-container {
margin-top:0px !important;
text-align:left !important;
}

.wsite-footer .wsite-form-label {
font-size: 1em !important;
padding: 5px 0 2px 0 !important;
}

.wsite-footer .wsite-form-field {
width:575px !important;
}

.wsite-footer .form-radio-container {
font-size:1em !important;
}

.wsite-footer .wsite-form-input, .wsite-footer .wsite-search-element-input {
font-size: 1em !important;
width: 100% !important;
background-color:#fff;
}

.wsite-footer .form-select {
width: 100% !important;
background-color:#fff;
}


/* main contents styles
--------------------------------------------------------------------------------*/

#main-wrap {
background: #FFFFFF;
}

#main {
padding: 0;
}

#banner-wrap {
background: #0f325c url(banner-wrap.png) repeat-x;
padding: 0px 0;(!25)
border-top: 1px solid #98999b;
border-bottom: 1px solid #98999b;
}

#banner {
position: relative;
}

#banner-detail,
#bannerleft {
border: 1px solid #989c9b;
margin: 1px;
}

.wsite-header {
}

#content {
min-height: 400px;
padding: 25px 18px;
background: #fff;
}

/* PAGE TYPE: tall-header
--------------------------------------------------------------------------------*/

.tall-header-page .wsite-header { /* the user-editable image */
height: 246px;
background: url(banner-tall.jpg) no-repeat 50% 50%;
}

/* PAGE TYPE: short-header
--------------------------------------------------------------------------------*/

.short-header-page .wsite-header { /* the user-editable image */
height: 146px;
background: url(banner-short.jpg) no-repeat;
}

/* PAGE TYPE: no-header-header
--------------------------------------------------------------------------------*/

.no-header-page #banner-wrap {
display: none;
}

.no-header-page #banner {
display: none;
}

.no-header-page .wsite-header { /* the user-editable image */
}

.no-header-page #banner-top {
display: none;
}

.no-header-page #banner-bot {
display: none;
}

/* PAGE TYPE: landing
--------------------------------------------------------------------------------*/

.landing-page #banner a {
color: #a3d5f9;
}

.landing-page #banner a:hover {
color: #a5c7e9;
}

.landing-page #banner {
padding: 0;
border-left: none;
}

#bannerleft {
float: left;
width: 531px;
}

#bannerleft .wsite-header { /* the user-editable image */
height: 246px;
background: url(banner-landing.jpg);
}

#bannerright {
float: right;
width: 360px;
padding: 0px 25px 0 25px;
height: 249px;
}

#bannerright h2 {
font-size: 24px;
color: #fff;
padding: 0px;
line-height: 24px;
}

#bannerright p {
padding: 20px 0px;
line-height: 140%;
color: #fff;
}

.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}

.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}

.landing-banner-inner {
#position: relative;
#top: -50%;
}

/* PAGE TYPE: splash
--------------------------------------------------------------------------------*/

.splash-page .wsite-header { /* the user-editable image */
height: 146px;
background: url(banner-splash.jpg) no-repeat;
}

.splash-page #header-wrap,
.splash-page #main-wrap,
.splash-page #footer-wrap {
min-width: 600px;
}

.splash-page #header,
.splash-page #main,
.splash-page #footer {
width: 600px;
}

.splash-page #banner {
width: 600px;
}

.splash-page #banner-bot {
background: none;
}

.splash-page #banner-top {
background: none;
}

.splash-page #header {
padding: 0;
}

.splash-page #title {
padding: 0;
}

.splash-page .social {
}

.splash-page .search {
display: none;
}

.splash-page .phone-number {
}

.splash-page #navigation {
display: none;
}

.splash-page #content {
height: auto !important;
min-height: 300px;
}

.splash-page #footer .wsite-social {
display: none;
}

.splash-page #footer {
text-align: center;
}

/* Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-label {
display: inline-block;
color: #333333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-weight: bold;
padding: 12px 0 5px 0;
}

.form-radio-container {
}

.wsite-form-input, .wsite-search-element-input {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
background: url(field.png) repeat-x;
color: #666666;
border: 1px solid #dadada;
padding: 8px 5px 5px !important;
line-height: 1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.form-select {
background: url(field.png) repeat-x;
color: #666666;
border: 1px solid #dadada;
font-size: 14px;
padding: 3px;
height: 27px;
line-height: 27px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* Buttons
--------------------------------------------------------------------------------*/


/* small */

.wsite-button {
color: #fff !important;
height: 34px;
display: inline-block;
font-size: 14px;
border: none;
font-weight: bold;
text-decoration: none;
padding: 0 17px 0 0;
background: url(button.png) no-repeat 100% -105px;
text-shadow:0 -1px 0 rgba(0,0,0,0.9);
}

.wsite-button:hover {
background-position: 100% -140px;
}

.wsite-button:active {
background-position: 100% -175px;
}

.wsite-button-inner {
height: 34px;
line-height: 34px;
display: block;
font-size: 14px;
font-weight: bold;
border: none;
text-decoration: none;
padding: 0 10px 0 20px;
background: url(button.png) no-repeat 0 0;
}

.wsite-button:hover .wsite-button-inner {
background-position: 0 -35px;
}

.wsite-button:active .wsite-button-inner {
background-position: 0 -70px;
}

/* large */

.wsite-button-large {
height: 41px;
background: url(button_large.png) no-repeat 100% -126px;
padding: 0 10px 0 0;
}

.wsite-button-large:hover {
background-position: 100% -168px;
}

.wsite-button-large:active {
background-position: 100% -210px;
}

.wsite-button-large .wsite-button-inner {
height: 41px;
line-height: 41px;
padding: 0 10px 0 20px;
background: url(button_large.png) no-repeat 0 0;
}

.wsite-button-large:hover .wsite-button-inner {
background-position: 0 -42px;
}

.wsite-button-large:active .wsite-button-inner {
background-position: 0 -84px;
}

/* highlight */

/*
Making the highlighted versions of the buttons is easy because we just need
to switch out the background images. This works because the different button
states (normal, :hover, :active) have their sprite coordinates in the same places.
*/

.wsite-button-large.wsite-button-highlight {
background-image: url(button_large_highlight.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight.png);
}

.wsite-button-highlight {
background-image: url(button_highlight.png);
color: #fff !important;
}

.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight.png);
}

Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Zo werkt het hier dus niet. "Het werkt niet" en dan honderden regels CSS dumpen (zonder code tags no less) is niet hoe we je kunnen of willen helpen. Maak een uitgeklede testcase, omschrijf je probleem duidelijk, laat alleen relevante code zien en gebruik code-tags om die te posten. Oftewel: lees De Quickstart even door en probeer het opnieuw in een nieuw topic.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Dit topic is gesloten.