- This topic is empty.
-
Hi everyone, I’m new here and looking for a CSS community to participate it. I do graphic design on the side and end up doing a lot of web development. Jobs tend to be far apart and I always seem to have to refresh my memory. eek!
Anyway… here’s my problems I’m dealing with right now:
Site I’m referring to: http://dawn-creative.com/svtap/index.html
1. I need the scroll background image in the #scroll div to stretch all the way to the bottom.
2. I’m using z-index to keep the grass footer in front of the scroll which works, however (and you’ll need to make your browser window small to see it), when you start scrolling far enough down, the grass starts to disappear.
3. When browser is full screen, bottom of footer disappears.I’ve been doing research on all problems and tried to “fix” it and am so overwhelmed by all the information that I don’t even know what I’ve done at this point.
Any help would be great. Thank you!
HTML:
Welcome
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamtus metus neque, cursus ut dapibus nec, mattis eu orci. Phasellus molestie aliquam nisi, non dapibus orci pretium sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed semper adipiscing arcu, ac dictum sem pulvinar id. Proin libero enim, sodales eu convallis et, posuere quis tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamtus metus neque, cursus ut dapibus nec, mattis eu orci. Phasellus molestie aliquam nisi, non dapibus orci pretium sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed semper adipiscing arcu, ac dictum sem pulvinar id. Proin libero enim, sodales eu convallis et, posuere quis tellus.
CSS:
@import "reset.css";
body {
background-color: #c0d0e0;
background-image: url(../images/bground-default.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
@font-face {
font-family: "CustomFont";
src: url(../style/BEFRISKY.TTF);
}
h1 {
font-family: CustomFont, Arial;
font-size: 140%;
margin-bottom: 7px;
}
h2 {
font-family: CustomFont, Arial;
font-size: 125%;
margin-bottom: 7px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: lighter;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
margin-bottom: 7px;
}
#scroll {
margin: 0 auto 0 auto;
background-image: url(../images/scroll.png);
background-repeat: no-repeat;
position: relative;
top: 100px;
width: 670px;
height: 100%;
padding: 140px 65px 50px 65px;
z-index: -1;
}
#header {
position: relative;
width: 670px;
}
#nav {
position: absolute;
bottom: 0;
right: 0;
}
#nav li{
font-family: CustomFont, Arial;
font-size: 140%;
list-style-type: none;
display:: inline;
float: left;
margin-left: 50px;
}
#content-container{
width: 100%;
min-height: 100%; !important
height: auto;
margin: 25px 0 0 0;
z-index: 0;
}
#main-content {
width: 450px;
float: left;
}
#sidebar {
width: 175px;
float: right;
padding: 0 0 0 25px;
border-left: solid thin #666;
}
.sidebar-section {
margin: 0 0 25px 0;
}
#footer {
background-image: url(../images/grass.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
width: 850px;
min-height: 335px;
margin: 0 auto 0 auto;
z-index: 10;
}
- The forum ‘CSS’ is closed to new topics and replies.