- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
August 23, 2010 at 9:48 pm #30021
cecil
MemberOk this is driving me up the wall. I know it has be be such an easy fix but what is stoping me from having auto height. I know its a lot of code and I know that there is alot of things I can do to it to make it better and smother. Thanks for the help in advance! If it makes any difference, this site was written in HTML5 and I used some CSS3 attributes
body {
margin: auto;
width: 920px;
height: auto;
background: url('images/header_bg.png');
background-repeat: repeat-x;
padding-bottom: 30px;
font-family: "Arial";
}
#wrapper {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-box-shadow: 0px 3px 3px #111;
-webkit-box-shadow: 0px 3px 20px #111;
box-shadow: 0px 0px 9px #111;
}
header {
height: 251px;
background: url('images/header_bg.png');
background-repeat: repeat-x;
}
#ele {
background: url('images/header_elephant.jpg') no-repeat;
float: left;
}
#social {
margin-top: 30px;
margin-left: 30px;
border-left: 4px #ae0f18 solid;
float: left;
}
#social img {
padding-left: 35px;
}
section {
background: url(images/main_bg-full.png) repeat-y;
height: auto;
}
nav {
background: #56cfd1;
height: 47px;
width: 457px;
border-bottom: 3px #979590 solid;
border-right: 3px #979590 solid;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
border-bottom-right-radius: 15px;
}
nav ul {
padding-top: 13px;
padding-left: 47px;
}
nav li {
display: inline;
margin-right: 30px;
font-family: "Arial";
color: #262626;
font-size: 17pt;
font-weight: bolder;
}
section #page_description {
width: 590px;
margin-top: 15px;
margin-left: 15px;
}
section #heading {
font-family: "Arial";
font-size: 25px;
color: #262626;
font-weight: bolder;
}
#description {
padding: 20px;
padding-top: 10px;
font-family: "Arial";
font-size: 17px;
color: #262626;
line-height: 22px;
font-size: bold;
}
aside #sidebar {
width: 200px;
height: 20px;
}
#sidebar h3 img {
display: none;
}
.tips img {
display: none;
}
#content {
display: table;
}
#categories {
display: table-cell;
width: 620px;
}
.topic {
padding-bottom: 30px;
margin-left: 3px;
height: 84px;
cursor: pointer;
}
.stories{
margin-top: -15px;
}
#page_description li {
display: inline;
list-style: none;
width: auto;
padding: 5px 12px 5px 12px;
margin: 0px 5px 6px 0px;
float: left;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
#healthcare {
background: url('images/healthcare.png') no-repeat;
}
#cash_money {
background: url('images/cash_money.png') no-repeat;
}
#jobs {
background: url('images/jobs.png') no-repeat;
}
#job_titles {
margin-top: -15px;
}
#job_titles li {
background: #ffc200;
}
#sidebar {
display: table-cell;
width: 300px;
padding-left: 23px;
margin-top: -20px;
}
#sidebar li {
list-style: none;
margin: 0px 0px 13px 10px;
}
.feed{
border: 1px #656565 solid;
background: #d5d5d5;
width: 261px;
height: 250px;
padding-top: 10px;
margin-top: -4px;
opacity: .9;
}
.feed p {
padding-left: 7px;
font-family: "Arial";
font-size: 16px;
font-weight: bold;
}
#facebook_head {
background: url('images/facebook_sidebar.png') no-repeat;
height: 80px;
width: inherit;
margin-left: 15px;
}
footer {
background: url('images/footer_elephant.png') #dbd1b2 no-repeat;
height: 30px;
border-top: 2px #999486 solid;
padding-left: 20px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
footer p {
padding-left: 20px;
font-family: "Arial";
font-size: 14px;
color: #464646;
padding-top: 8px;
}
#social_title {
position: absolute;
top: 245px;
left: 645px;
font-size: 22px;
font-weight: bolder;
text-decoration: underline;
}
August 23, 2010 at 10:55 pm #81584demersdesigns
ParticipantWhat exactly are you trying to accomplish when you say you want the body height to be auto? Are you trying to make the footer always on the bottom of the screen no matter the content height?
August 23, 2010 at 11:03 pm #81573MemberSorry I suppose I should have made that more clear. I have Twitter, Facebook, and expanding divs on this site and when those divs expand I want the height of the page to expand with it. So yes I guess your correct.
August 23, 2010 at 11:31 pm #81574ParticipantI would say that you should check out Ryan Fait’s sticky footer method. This is what I use.
http://ryanfait.com/sticky-footer/
Hope that helps! -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
