I have a div block with an image, a heading and a paragraph. I want to change the background-color and the text color of that div when i hover on it but only the background-color changes, the color tag is simply ignored. How can I fix this?
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
color: #24252a;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
NOTE: I am still very new to programming with css, and I am doing this for a school project.
PS: some of the names are written in german, as it is my native language.
Have a great rest of your day!
Lucien
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
I wanted to set up an image as a transparent background image for my website but anything I try just doesn't wanna work. I've seen on the internet how it works for others, but for me it just doesn't. I converted my image from png to jpeg, but that didn't brought success
Here is my full CSS file
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: url(DS Organization logo.jpg)
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #050505;
text-align: center;
border: 1px solid #000307;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #000000;
background: rgb(99, 99, 99);
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #050505;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
The url-path is treated as a string and it needs to be enclosed in quotes. For more information on url(), visit mdn
Whenever I load my page, the content area for the product jumps to position (shifts downwards) and so do the social media icons in the footer. You'll see this happen if you refresh the page or simply click on either of the product categories on the left or the navigation links in the fixed footer.
This is happening predominately in Safari. I'm running 8.0.7 on Mac OS X 10.10.4 (Yosemite). Firefox 45.0.2 seems ok. Chrome 50.0.2661.86 acts a little weird with the icons flashing and copyright text, so I believe that has the same issue though the load time may be quicker.
I've looked at my CSS, but I can't fathom why it's doing it(?). I'm really stuck and realise it's perhaps something simple I'm overlooking. Driving me loopy! :-(
A friend told me it has something to do with the floats for the catalogue_wrapper_right, it shouldn't be there. That's for the content. And, I'm not sure again for the footer. Help much appreciated to get this fixed.
The product content text is being populated using PHP from my database.
The key elements here to look at are catalogue_wrapper and catalogue_wrapper_right for the content, and then container and social for the footer div blocks.
Thanks.
CSS:
/* ===============================
Author: Ashley Smith
Date: July 11, 2015
Notes:
Colour Palette:
---------------
Light Cream: #f2f3ee
Orange: #d17f38
Yellow: #e8c04f
Brown: #4b2707
=============================== */
/* General */
body {
background: url('../images/wood 4.jpg') top left no-repeat; top no-repeat; background-attachment: fixed;
background-size: 100% 100%;
color: black;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-size: 14px;
font-family: 'Open Sans', "Helvetica Neue", Arial, sans-serif;
}
.container {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
clear: both;
}
/* Typography */
p {
margin: 0;
padding: 0;
}
a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* Header */
header.main{
background: white;
padding: 10px;
margin-top: -30px;
margin-bottom: -30px;
height: 141px;
}
header nav {
text-align: center;
}
header nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
line-height: 141px;
}
header nav ul li {
display: inline-block;
padding: 0 20px;
}
header nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
header nav ul li#logo a {
display: block;
width: 200px;
height: 150px;
padding: 0;
background: url('../images/LogoM.svg') center center no-repeat;
background-size: 300px;
}
header nav ul li#logo a p {
opacity: 0;
}
/* Small Basket */
#small_basket {
width: 200px;
margin-bottom: 20px;
}
#basket_left dt {
clear: left;
width: 170px;
}
#basket_left {
margin-top: 30px;
margin-bottom: 0;
}
#basket_left dd {
text-align: right;
width: 150px;
margin-bottom: 15px;
}
#basket_left, #basket_left dd, #basket_left dt {
float: left;
}
#basket_left dd.bl_ti, #basket_left dd.bl_st, #basket_left dd.bl_vat, #basket_left dd.bl_total {
display: block;
width: 0px;
padding: 0;
clear: all;
margin-left: 0px;
}
.your_bas {
width: 200px;
border-bottom: dashed 1px #aaa;
padding-bottom: 9px;
}
.check_button {
border-bottom: dashed 1px #aaa;
}
.check_button, .check_button a {
clear: left;
padding: 0px 0px 14px 0px;
font-style: normal;
font-size: 14px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
text-transform: none;
}
.red {
color: red;
}
span.cart_pic {
background: url('../images/cart.png') center center no-repeat;
display: inline-block;
position: relative;
top: 10px;
left: 15px;
width: 30px;
height: 30px;
}
/* Store Content Styling */
#wrapper {
width: 1280px;
text-align:left;
margin:0 auto;
padding: 14px 0;
}
#outer {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#cat_left {
width: 150px;
}
#cat_left p {
font-size: 20px;
margin: -5px;
font-weight: 300;
text-indent: 5px;
}
#cat_right {
margin-left: 147px;
width: 900px
}
#cat_navigation {
margin-top: 20px;
margin-bottom: 14px;
width: 200px;
line-height: 35px;
list-style: none;
border-top: dashed 1px #aaa;
padding: 0;
float: left;
}
#cat_navigation li {
float: left;
background-color: rgba(209,209,209,0.4);
text-align: center;
width: 100%;
padding: 2px;
margin-bottom: 10px;
}
#cat_navigation li a {
width: 150px;
opacity: 0.2;
font-size: 14px;
font-weight: 300;
padding: 0;
}
#cat_navigation li a.act {
opacity: 1;
font-weight: 700;
}
#cat_prod {
border-bottom: dashed 1px #aaa;
margin-bottom: 0;
padding-bottom: 14px;
}
#cat_prod h1 {
font-size: 20px;
margin: -5px;
margin-bottom: 1px;
font-weight: 300;
}
/* Catalogue Styling For Products Alignment... Continued */
.catalogue_wrapper {
width:100%;
border-bottom: dashed 1px #aaa;
height: 100%;
display: block;
clear: both;
position: static;
}
.catalogue_wrapper_left {
display: inline-block;
width: 120px;
margin-top: 20px;
}
.catalogue_wrapper_right {
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -120px;
margin-bottom: -40px;
}
.catalogue_wrapper_right h4 a {
padding: 0;
font-size: 20px;
}
.catalogue_wrapper_left a img {
width: 120px;
height: 150px;
}
.catalogue_wrapper_left a {
padding: 0;
}
/* Catalaogue Floats */
#cat_left, #cat_right, #catalogue_wrapper, #catalogue_wrapper_left, #catalogue_wrapper_right {
float: left;
}
/* Catalogue Products Pages */
.catalogue_wrapper_product_right {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -70px;
margin-bottom: -40px;
}
.product_info {
font-size: 14px;
display: block;
width: 750px;
text-transform: none;
top: -63px;
}
/* Buttons */
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Basket and Checkout Buttons */
.sbm, .btn {
vertical-align: middle;
cursor: pointer;
display:block;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.sbm_blue {
background: transparent;
background-color: #43a9d9;
border-radius: 4px;
border: none;
padding: 10px 15px;
}
.btn {
text-transform: uppercase;
background: transparent;
background-color: #43a9d9;
border: none;
border-radius: 4px;
color: white;
}
#btn_login {
text-transform: uppercase;
border-radius: 4px;
background: transparent;
background-color: #43a9d9;
border: none;
color: white;
padding: 0px 15px;
}
#btn {
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
padding: 0px 15px;
}
.fl_l {
float: left;
}
.fl_r {
float: right;
}
/* Basket Button */
.add_to_basket {
padding: 6px 12px;
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
}
/* Basket Page */
.ta_r, th.ta_r, .td.ta_r {
text-align: right;
padding: 10px;
}
.ta_left {
text-align: left;
padding: 10px;
}
.ta_right {
text-align: right;
padding: 10px 0px;
}
.col_15 {
width: 15%
}
.tbl_repeat {
width: 900px;
margin-top: 25px;
}
.ta_left_name {
text-align: left;
padding: 10px;
width: 650px;
}
.ta_left_qty input {
width: 40px;
}
.ta_r a {
padding: 0;
text-transform: none;
}
.fld_qty {
border: solid 1px #aaa
}
.fld_qty {
width: 30px;
text-align: right;
padding: 0
}
/* Checkout Page */
.tbl_insert {
margin-bottom:14px;
width: 900px;
line-height: 34.5px;
}
.tbl_insert td {
padding:3px;
}
.tbl_insert th {
padding: 3px 10px 3px 0;
width: 170px;
font-weight: normal;
vertical-align: top;
}
.fld {
width: 700px;
}
.warn {
display: block;
color: #900;
padding: 0;
vertical-align: text-bottom;
}
/* Orders Table */
.order_table {
width: 900px;
}
th.fix_width {
width: 900px;
}
hr#prod_break {
/* Gradient transparent - color - transparent */
border: 0;
height: 1px;
width: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.tbl_repeat
{
position:relative;
-webkit-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.tbl_repeat:before, .tbl_repeat:after
{
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:400px / 100px;
border-radius:400px / 100px;
}
/* Product Paging */
.paging {
list-style: none;
width: 900px;
float: left;
/* background: #efefef; */
padding: 10px 10px;
color: white;
}
.paging li {
float: left;
margin-right: 10px;
font-size: 14px;
}
.paging a {
text-transform: none;
text-decoration: underline;
color: black;
padding: 0;
font-weight: normal;
color: white;
}
/* Pagination Navigation Buttons
http://www.flaticon.com/packs/metrize - - no class colour: #D9D9D9
*/
a.first {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/first.svg') top center no-repeat;
background-size: 32px;
}
a.firstno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/firstno.svg') top center no-repeat;
background-size: 32px;
}
a.previous {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previous.svg') top center no-repeat;
background-size: 32px;
}
a.previousno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previousno.svg') top center no-repeat;
background-size: 32px;
}
a.next {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/next.svg') top center no-repeat;
background-size: 32px;
}
a.nextno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/nextno.svg') top center no-repeat;
background-size: 32px;
}
a.last {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/last.svg') top center no-repeat;
background-size: 32px;
}
a.lastno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/lastno.svg') top center no-repeat;
background-size: 32px;
}
a#top_of_page {
display: block;
position: relative;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
background-color: #43a9d9;
top: -31px;
left: 45px;
color: white;
border-radius: 4px;
padding: 7px;
}
/* Proceed to Paypal */
#frm_pp {
display: none
}
.dn {
display: none;
}
/* Google reCAPTCHA */
.g-recaptcha {
display: inline-block;
position: relative;
width: 304px;
height: 78px;
}
/* Footer */
footer.main, #footer {
bottom: 0px;
width: 100%;
height: 182px;
position: fixed;
text-align: center;
margin-bottom: -20px;
}
footer.main div.footbord {
border-top-left-radius: -10px;
border-top-right-radius: -10px;
background-color: blue;
}
#uncopyright, #credits {
width: 100%;
margin: 5px 5px;
text-align: center;
display: inline-block;
position: static;
clear: both;
}
#uncopyright {
display: inline-block;
position: static;
margin-top: -20px;
clear: both;
}
div.social img {
width: 40px;
position: relative;
margin: 5px;
display: inline-block;
}
.social {
position: static;
height: 56px;
display: inline-block;
}
.social, .social a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* -- Center Placeholder For Form Text and Keep Entry Field Left -- */
::-webkit-input {
text-align: left;
}
::-webkit-input-placeholder {
text-align: center;
}
::-moz-placeholder {
text-align: center;
}
/* -- Blank Spacing At Bottom Of Main Container -- */
div.nav_top {
height: 30px;
width: 100px;
}
div.nav_top_after {
height: 30px;
width: 100px;
}
div.cont_bot {
height: 230px;
width: 100px;
}
div.cat_space {
height: 20px;
}
/* Force Elements To Self Clear Its Children: http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
I fixed it by messing around all evening with floats in CSSEdit. A great application!
I have a WordPress site, with installed theme Enfold and the MemberMouse plugin.
I have also made some signup,login pages by using Membermouse.
But my login page is not nice.: http://i.stack.imgur.com/Vwy6b.png
I want to it make like this one or similar:http://i.stack.imgur.com/tR145.png
( reflexionyoga(dot)com/login/ )
Can someone guide me how to change CSS styles and make the changes?
Thanks
Here's a Styling page you could use:
body{
padding-left:20px;
margin: 0;
padding: 0;
text-align: left;
font-family: verdana, tahoma, arial, sans-serif;
background-color: #ACE367;
color: black;
}
p{
font-size: 15px;
margin: 10px;
padding-left: 15px;
}
a{
font-size: 15px
color: #958F81;
text-decoration: none;
}
h1{
color:#191970;
text-align: left;
font-size: 20px;
margin: 10px;
padding-left: 20px;
}
.big{
color: #191970;
font-size: 60px;
}
h2{
text-align: left;
font-size: 15px;
margin: 15px;
padding-left: 20px;
}
img{
border-radius: 8px;
border: 1px solid #ddd;
display: block;
margin: auto;
}
ul {
padding-left: 10px;
padding-top : 0;
list-style-type: none;
margin: 0;
padding: 50px;
width: 200px;
background-color: #ACE367;
font-family: "Lucida Console", Monaco, monospace;
}
li a {
display: block;
color: #000;
padding: 5px 10px;
text-decoration: none;
border-bottom: 1px solid #555;
}
li a:hover {
background-color: #555;
color: white;
}
.note{
color:red;
font-size:10px;
}
input, select {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input {
width: 100%;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
padding-left: 20px;
padding-right: 20px;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
form {
padding-left: 50px;
padding-right: 600px;
padding-bottom: 20px;
padding-top: 15px;
}
.body-cen{
padding-left: 250px;
padding-right: 250px;
padding-bottom: 50px;
padding-top: 25px;
}
.pd{
padding-left:30px;
}
hr {
width:100%;
height:2px;
background: #fff
}
input[type=radio]{
padding-left:0;
}
p{
padding-left:10px;
}
I'm a beginner and would like to get some help and see where I'm making a mistake. I've adjusted my css to try to make the footer drop to the bottom of the page no matter the screen size that's view the page. I tried adjusting the body height to be at 100%, but that did not work.
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
If there is any advice on how I can solve my issue, it would be much appreciated thanks.
Here are some pictures to give you an example & the CSS
Mobile
Tablet Vertical
Tablet Horizontal
CSS:
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
color: #000000;
width:100%;
height:100%;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1em;
margin-top: 1.8em;
text-align:left;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 100%;
}
ul, ol {
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
#wrapper {
overflow: hidden;
background-color: #FFFFFF;
}
#bottom-wrapper {
overflow: hidden;
position:relative;
bottom:0;
height: 100px;
padding: 5px 0px 0px 0px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#bottom {
overflow: hidden;
width: 960px;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
}
.abouttext {
width: 625px;
margin: 10px auto;
}
.three {
width: 1000px;
margin: 10px auto;
padding: 10px 140px;
}
.container {
width: 880px;
margin: 10px auto;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
/* Header */
#header-wrapper {
overflow: hidden;
height: 110px;
background: url(images/blue-background.jpg) repeat-x left top;
}
#header {
overflow: hidden;
width: 100%;
height: 200px;
margin: 0 auto;
padding: 0px 20px;
font-weight: bold;
}
/* Banner */
#banner {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
#banner .image-style {
border: 15px solid #F4F4F4;
}
/* Logo */
#logo {
float: left;
width: 400px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 10px 0px 0px 0px;
font-size: 3.0em;
}
#logo p {
margin-top: -10px;
padding: 0px 0px 0px 5px;
font-size: 20px;
color: #FFFFFF;
}
#logo p a {
color: #FFFFFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}
/* Splash */
#splash {
overflow: hidden;
padding: 0px 0px 0px 0px;
border-bottom: 1px dashed #E7E2DC;
letter-spacing: 0px;
text-align: center;
vertical-align:middle;
font-size: 18px;
}
div.home-rt, div.cat{
/*width:310;height:355;*/
text-align:center;/*border:solid 2px #e0e0e0;*/
margin: 0 auto;
vertical-align:top;
display:inline-block;
cursor:pointer;
}
.iPad_1, .iPad_2, .iPad_3, .iPad_4, .iPad_Air, .iPad_Mini, .iPad_MiniRetina
{
margin:10px 10px 10px 10px;
}
.iPhone_2G, .iPhone_3G, .iPhone_3GS, .iPhone_4, .iPhone_4S, .iPhone_5, .iPhone_5C, .iPhone_5S
{
margin:10px 10px 10px 10px;
}
#splash div.home-rt {
/*margin-top:10px;
margin-bottom:10px;*/
width:310;
height:355;
background:#fff;
}
#splash .home-rt {
text-align:center !important;
}
#splash span {
color: #313131;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: center;
margin: 0;
padding: 15px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 10px 0px 15px 30px;
text-decoration: none;
text-align: center;
font-size: 20px;
font-weight: 300;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #000000;
}
#menu .current_page_item a {
}
/* Page */
#page {
padding: 30px 0px 0px 0px;
}
/* Content */
#content {
float: left;
width: 620px;
padding: 0px 40px 0px 0px;
background: url(images/img05.jpg) no-repeat right 40px;
}
.post {
overflow: hidden;
}
.post .title {
padding: 0px 0px 10px 0px;
letter-spacing: -3px;
}
.post .title a {
border: none;
color: #7D7764;
}
.post .meta {
margin-bottom: 30px;
padding: 0px;
text-align: left;
font-size: 16px;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 10px 0px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
margin-bottom: 30px;
}
.more {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
margin-right: 10px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
.comments {
display: block;
float: left;
width: 88px;
height: 25px;
padding: 2px 0px 0px 0px;
background: url(images/img08.jpg) no-repeat left top;
text-align: center;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 320px;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #000000;
}
#sidebar h2 {
padding: 0px 0px 30px 0px;
letter-spacing: -3px;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Three Column Footer Content */
#footer-content {
background: url(images/img04.png) no-repeat center top;
color: #E2B8C6;
}
#footer-bg {
overflow: hidden;
padding: 170px 0px;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
letter-spacing: -2px;
text-shadow: 1px 2px 0px #861F40;
font-size: 16px;
color: #FFFFFF;
}
#column1 {
float: left;
width: 320px;
margin-right: 20px;
}
#column2 {
float: left;
width: 320px;
}
#column3 {
float: right;
width: 320px;
}
/* Footer */
#footer {
height: 100px;
margin: 0 auto;
padding: 10px 0px 0px 0px;
/*background: url(images/img04.png) no-repeat center top;*/
}
#footer p {
margin: 0;
padding-top: 150px;
line-height: normal;
text-align: center;
color: #000000;
}
#footer a {
color: #000000;
}
#marketing {
overflow: hidden;
margin-bottom: 30px;
padding: 20px 0px 10px 0px;
border-top: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
#marketing .text1 {
float: left;
margin: 0px;
padding: 0px;
letter-spacing: -2px;
font-size: 14px;
color: #000000;
}
#marketing .text2 {
float: right;
}
#marketing .text2 a {
display: block;
width: 252px;
height: 38px;
padding: 15px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
letter-spacing: -2px;
text-align: center;
font-size: 12px;
color: #000000;
}
.box1 {
overflow: hidden;
height: 100px;
background: url(images/img04.jpg) no-repeat center bottom;
}
.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style1 li {
padding: 7px 0px 7px 0px;
border-top: 1px dashed #E7E2DC;
}
.list-style1 .first {
padding-top: 0px;
border-top: none;
}
.list-style2 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style2 li {
padding: 7px 0px 7px 0px;
background: url(images/img06.png) repeat-x left top;
}
.list-style2 a {
color: #E2B8C6;
}
.list-style2 a:hover {
color: #C76485;
}
.list-style2 .first {
padding-top: 0px;
background: none;
}
You mentioned:
I'm trying to make it so the bottom footer is just below the fold, so it can only be seen once you scroll down, and not seen we you first get to the page.
I don't think css alone is capable of doing this, I got a quick jsfiddle for you that may help.
windowHeight = $(window).height();
footerHeight = $(".footer").height();
$(".wrap").css({
"height": windowHeight + footerHeight
});