1 reply [Last post]
Amstelkrat
Amstelkrat's picture
Offline
newbie
Last seen: 5 years 37 weeks ago
Timezone: GMT+1
Joined: 2014-11-16
Posts: 1
Points: 2

Hello,

On my weebly site, I've got a lot of space before the content text.
(site: floor123test.weebly.com)

Does anybody know where to fix my problem?

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class='  wsite-theme-light'>
<div id="wrapper">
    <div class="bg-wrapper">
        <div id="header">
            <div id="sitename">{logo}</div>
        </div>
        <div id="navigation">{menu}</div>
        <div id="content-wrapper">
            <div id="content">{content}</div>
        </div>
    </div>
    <div id="footer">
        <div id="footer-content">{footer}</div>
    </div>
</div>
</body>
</html>

CSS code:

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

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

a img {
border: 0;
}

a {
text-decoration: none;
}

/* General Styling
--------------------------------------------------------------------------------*/

html {
height: 100%;
}

page {
background-color: #fed906;
}

body {
font-family: 'Open sans', sans-serif;
font-size: 15px;
color: #8e8e8e;
min-height: 100%;
background-color: #fed906;
}

.splash-page {
background-color: ##fed906;
}

.bg-wrapper {
background-color: ##fed906;
text-align: center;
}

h2 {
font-family: 'Alice', sans-serif;
font-size: 26px;
font-weight: normal;
color: #484848;
padding: .3em 0;
}

p,
div.paragraph {
padding: .5em 0;
}

align {
color: #ffffff;
}

hr.styled-hr {
background-color: #d0d0d0;
}

#wrapper blockquote {
border-left: 5px solid #d0d0d0;
margin-left: 20px;
padding-left: 20px
}

#header {
text-align: center;
padding-top: 52px;
padding-bottom: 25px
}

#sitename a,
#sitename a:link,
#sitename a:visited {
color: #484848;
font-family: 'Raleway', sans-serif;
font-size: 36px;
text-transform: uppercase;
background: url('yellow_icons.png') -9999px -9999px no-repeat;
}

a:link, a:visited {
color: #dea227;
}

a:hover {
color: #000000;
}

#content-wrapper {
width: 1050px;
margin: auto;
background-color: #DDDDDD;
padding-left: 0px;
padding-right: 25px;
border: 2px solid;
border-color: #000000;
border-radius: 25px;
}

.wsite-form-container {
margin-top: 0 !important;
}

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

.bg-wrapper {
padding-bottom: 100px;
}

#footer {
font-family: 'Open sans', sans-serif;
font-size: 14px;
padding-top: 45px;
padding-bottom: 45px;
}

#footer-content {
width: 960px;
margin: auto;
}

#footer h2 {
font-family: 'Raleway', sans-serif;
font-size: 18px;
text-transform: uppercase;
}

.weebly-footer {
font-size: 13px;
margin-top: 30px;
}

/* Nav and Menus
--------------------------------------------------------------------------------*/

#navigation {
padding-bottom: auto;
width: 950px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 25px;
color: #000000;
display: inline-block;
margin-bottom: 15px;
}
#navigation li {
display: inline-block;
padding: 10px 14px;
}

#navigation li:hover,
#navigation li#active {
background-color: #fed906;
color: #000000;
}

#navigation a:link, #navigation a:visited {
color: inherit;
}

#navigation a:hover {
}

#wsite-menus .wsite-menu li a {
background-color: #dddddd;
border: none;
color: #000000;
text-transform: uppercase;
}

#wsite-menus .wsite-menu li a:hover {
background-color: #dddddd;
color: #000000;
}

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

.wsite-button,
.wsite-button .wsite-button-inner {
color: white;
background-image: none !important;
background-color: #dea227;
}

.wsite-button .wsite-button-inner {
background-color: inherit;
}

.wsite-button-highlight {
background-color: #dea227;
}

.wsite-button-highlight:hover {
background-color: #f7b732;
}

.wsite-button-highlight:active {
background-color: #c88a0c;
}

.wsite-button-normal {
background-color: #484848;
}

.wsite-button-normal:hover {
background-color: #616161;
}

.wsite-button-normal:active {
background-color: #303030;
}

/* Image
--------------------------------------------------------------------------------*/

.galleryCaptionHover .galleryCaptionHolder {
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
-webkit-backface-visibility: hidden;
}

.partialImageGalleryCaption.galleryCaptionHolder {
height: auto;
}

.galleryCaptionHover.galleryImageHolder:hover .galleryCaptionHolder {
opacity: 1;
}

.galleryCaptionHolderInner {
display: table;
height: 100%;
}

.galleryCaptionInnerTextHolder {
display: table-cell;
vertical-align: middle;
}

.wslide-caption {
height: 100%;
text-align: center;
font-size: 0;
opacity: 0 !important;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
-webkit-backface-visibility: hidden;
}

.wslide-slide-inner1:hover .wslide-caption {
opacity: 1 !important;
}

.wslide-caption:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}

.wslide-caption-text {
display: inline-block;
vertical-align: middle;
font-size: 13px;
}

#content-wrapper #content .galleryImageBorder {
border-color: #d0d0d0;
}

#content-wrapper #content .wsite-image-border-hairline a img,
#content-wrapper #content .wsite-image-border-thin a img,
#content-wrapper #content .wsite-image-border-medium a img,
#content-wrapper #content .wsite-image-border-thick a img {
border-color: #d0d0d0;
}

/* Banner
--------------------------------------------------------------------------------*/

.banner-wrap {
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
}

#banner {
width: 550px;
height: 100%;
margin: auto;
display: table;
}

#banner-container {
display: table-cell;
vertical-align: middle;
}

.banner-wrap a {
color: #ffd784;
}

.banner-wrap a:hover {
text-decoration: underline;
}

.banner-wrap .button-wrap div {
text-align: center !important;
}

.banner-wrap .wsite-button-inner {
font-family: 'Open sans', sans-serif;
text-transform: uppercase;
font-size: 15px;
}

#banner h2 {
font-size: 55px;
color: white;
font-weight: bold;
}

#banner p {
font-size: 20px;
padding-top: 36px;
padding-bottom: 45px;
color: white;
}

/* Page type: Landing page
--------------------------------------------------------------------------------*/

.landing-page .banner-wrap {
background-image: url(%%HEADERIMG%%);
height: 482px;
margin-bottom: 20px;
}

/* Page type: Splash page
--------------------------------------------------------------------------------*/

.splash-page, .filler {
height: 100%;
background-color: #0978E4;
}

.splash-page .banner-wrap {
background-image: url(splash_header.jpg);
height: 100%;
width: 100%
}

.splash-page #banner {
min-height: 500px;
}

.splash-page #wrapper {
height: 100%;
width: 110%;
border-spacing: 0;
}

.splash-page #wrapper td {
padding: 0;
}

.spacer {
height: 0px;
}
#wsite-content {
padding-left: 150px;

/* Page type: Tall Header page
--------------------------------------------------------------------------------*/

.tall-header .banner-wrap {
background-image: url(tall_header.jpg);
height: 403px;
margin-bottom: 20px;
}

/* Page type: Short Header page
--------------------------------------------------------------------------------*/

.short-header .banner-wrap {
background-image: url(short_header.jpg);
height: 302px;
margin-bottom: 20px;
}

/* Product Element
--------------------------------------------------------------------------------*/

.wsite-product {
border: 0px solid #d0d0d0;
border-radius: 2px;
background: inherit;
box-shadow: none;
}

.wsite-product .wsite-product-title {
font-family: 'Alice', sans-serif;
color: white;
font-size: 26px;
}

.wsite-product-image {
border: 1px solid #d0d0d0;
border-radius: 0;
}

/* Form inputs
--------------------------------------------------------------------------------*/

.wsite-input, .wsite-form-input, select {
border: solid 1px #d0d0d0;
border-radius: 2px;
margin: 8px 0;
outline: none;
background-image: none;
height: 27px;
font-size: 13px;
}

.wsite-form-phone-separator {
margin: 8px 0;
}

.wsite-form-label {
font-weight: normal;
}

select {
font-family: 'Open sans', sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: '';
padding-left: 8px;
padding-top: 2px;
padding-bottom: 2px;
background: url('downarrow.png') no-repeat 99% 9px;
background-color: white;
height: 27px;
}

select::-ms-expand {
display: none;
}

#wsite-com-checkout-payment-info select {
background: none;
}

.wsite-form-field input[type='checkbox']:checked,
.wsite-form-field input[type='checkbox']:not(:checked),
.wsite-form-field input[type='radio']:checked,
.wsite-form-field input[type='radio']:not(:checked),
.wsite-com-product-option input[type='radio']:checked,
.wsite-com-product-option input[type='radio']:not(:checked) {
display: none;
}

.wsite-form-field input[type='checkbox']:checked + label:before,
.wsite-form-field input[type='checkbox']:not(:checked) + label:before,
.wsite-form-field input[type='radio']:checked + label:before,
.wsite-form-field input[type='radio']:not(:checked) + label:before,
.wsite-com-product-option-label input[type='radio']:checked + span:before,
.wsite-com-product-option-label input[type='radio']:not(:checked) + span:before {
content: '';
display: inline-block;
height: 22px;
width: 22px;
vertical-align: middle;
margin-right: 8px;
}

.wsite-form-field input[type='checkbox']:not(:checked) + label:before {
background: url('default_icons.png') -714px -35px;
}

.wsite-form-field input[type='checkbox']:checked + label:before {
background: url('yellow_icons.png') -722px -32px;
}

.wsite-form-field input[type='radio']:not(:checked) + label:before,
.wsite-com-product-option-label input[type='radio']:not(:checked) + span:before {
background: url('default_icons.png') -663px -35px;
}

.wsite-form-field input[type='radio']:checked + label:before,
.wsite-com-product-option-label input[type='radio']:checked + span:before {
background: url('yellow_icons.png') -671px -32px;
}

/* Social Links
--------------------------------------------------------------------------------*/

.wsite-social-item, .wsite-com-product-social {
width: 27px;
height: 27px;
margin: 0;
}

.wsite-social-item + .wsite-social-item,
.wsite-com-product-social + .wsite-com-product-social {
margin-left: 10px;
}

.wsite-social-facebook, .wsite-com-product-social-facebook { background: url('default_icons.png') -41px -31px; }
.wsite-social-facebook:hover, .wsite-com-product-social-facebook:hover { background: url('yellow_icons.png') -41px -31px; }
.wsite-social-facebook:active, .wsite-com-product-social-facebook:active { background: url('default_icons.png') -41px -71px; }

.wsite-social-twitter, .wsite-com-product-social-twitter { background: url('default_icons.png') -92px -32px; }
.wsite-social-twitter:hover, .wsite-com-product-social-twitter:hover { background: url('yellow_icons.png') -92px -32px; }
.wsite-social-twitter:active, .wsite-com-product-social-twitter:active { background: url('default_icons.png') -92px -72px; }

.wsite-social-linkedin, .wsite-com-product-social-linkedin { background: url('default_icons.png') -148px -32px; }
.wsite-social-linkedin:hover, .wsite-com-product-social-linkedin:hover { background: url('yellow_icons.png') -148px -32px; }
.wsite-social-linkedin:active, .wsite-com-product-social-linkedin:active { background: url('default_icons.png') -148px -72px; }

.wsite-social-mail, .wsite-com-product-social-mail { background: url('default_icons.png') -206px -33px; }
.wsite-social-mail:hover, .wsite-com-product-social-mail:hover { background: url('yellow_icons.png') -206px -33px; }
.wsite-social-mail:active, .wsite-com-product-social-mail:active { background: url('default_icons.png') -206px -73px; }

.wsite-social-rss, .wsite-com-product-social-rss { background: url('default_icons.png') -263px -31px; }
.wsite-social-rss:hover, .wsite-com-product-social-rss:hover { background: url('yellow_icons.png') -263px -31px; }
.wsite-social-rss:active, .wsite-com-product-social-rss:active { background: url('default_icons.png') -263px -71px; }

.wsite-social-flickr, .wsite-com-product-social-flickr { background: url('default_icons.png') -320px -31px; }
.wsite-social-flickr:hover, .wsite-com-product-social-flickr:hover { background: url('yellow_icons.png') -320px -31px; }
.wsite-social-flickr:active, .wsite-com-product-social-flickr:active { background: url('default_icons.png') -320px -71px; }

.wsite-social-plus, .wsite-com-product-social-plus { background: url('default_icons.png') -379px -31px; }
.wsite-social-plus:hover, .wsite-com-product-social-plus:hover { background: url('yellow_icons.png') -379px -31px; }
.wsite-social-plus:active, .wsite-com-product-social-plus:active { background: url('default_icons.png') -379px -71px; }

.wsite-social-pinterest, .wsite-com-product-social-pinterest { background: url('default_icons.png') -434px -31px; }
.wsite-social-pinterest:hover, .wsite-com-product-social-pinterest:hover { background: url('yellow_icons.png') -434px -31px; }
.wsite-social-pinterest:active, .wsite-com-product-social-pinterest:active { background: url('default_icons.png') -434px -71px; }

.wsite-social-vimeo, .wsite-com-product-social-vimeo { background: url('default_icons.png') -494px -32px; }
.wsite-social-vimeo:hover, .wsite-com-product-social-vimeo:hover { background: url('yellow_icons.png') -494px -32px; }
.wsite-social-vimeo:active, .wsite-com-product-social-vimeo:active { background: url('default_icons.png') -494px -72px; }

.wsite-social-yahoo, .wsite-com-product-social-yahoo { background: url('default_icons.png') -552px -32px; }
.wsite-social-yahoo:hover, .wsite-com-product-social-yahoo:hover { background: url('yellow_icons.png') -552px -32px; }
.wsite-social-yahoo:active, .wsite-com-product-social-yahoo:active { background: url('default_icons.png') -552px -72px; }

.wsite-social-youtube, .wsite-com-product-social-youtube { background: url('default_icons.png') -610px -31px; }
.wsite-social-youtube:hover, .wsite-com-product-social-youtube:hover { background: url('yellow_icons.png') -610px -31px; }
.wsite-social-youtube:active, .wsite-com-product-social-youtube:active { background: url('default_icons.png') -610px -71px; }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 10 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

vertical-algn

#banner-container {
  display: table-cell;
  vertical-align: middle;
}
Replace vertical-align with margin-top to adjust top spacing.

#banner {
  display: table;
  height: 100%;
  margin: auto;
  width: 550px;
}
Use the margin property to adjust the element's position left and right.

Not sure why you would use table properties here.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.