CSS3 2 Background Images

[Wes]

Alright I know I am doing something wrong but cant figure it out.

Here is the live version of the site http://wesascolese.com/ascoleseSAlife/

This is what it should look like http://i14.photobucket.com/albums/a309/ … Wave-2.png

The part that I am attempting to recreate is the gradient at the bottom that comes up from the top of the footer. I had originally just made it the footer background but I want text to be able to over lap it.

here is my css:

Code:

/*
RESET
*/
* { margin: 0; padding:0; }
html { overflow-y:scroll; }
html, body { height:100% }
body { font-size:62.5%; font-family:”Georgia”, Times New Roman, Times, serif; color:#fff;}
ul { list-style:none; }
ol { list-style:decimal inside; }
a { outline: none; text-decoration: none; color:#414141;}
a img { border:none; }
a:hover { color:#004c87; }
img { vertical-align:middle; }
table { border-collapse:collapse; }

/*
UTILITY
*/

.floatLeft { float:left; }
.floatRight { float:right; }
.clear { clear:both; }

/*
TYPOGRAPHY
*/
p { font-size:11px; line-height:1.2em; color:#2d2d2d; font-family:Verdana, Geneva, sans-serif; padding:5px 0 10px 5px; }
h2#tagline { font-size:30px; font-family:”Georgia”, Times New Roman, Times, serif; padding:123px 0 10px 10px; color:#222222; font-weight:normal;}
h2#title { font-size:20px; font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; padding:0 0 0 5px; color:#222222; font-weight:normal; text-transform:uppercase;}

/*
SITE
*/
#pagewrap { width:960px; margin:0px auto -128px; min-height:100%; height:auto !important; height:100%; background:url(images/bg) top left repeat-x, url(images/bottom) bottom no-repeat; }
#push { height:128px; }
#columnOne { width:630px; margin:10px;}

#datebox { height:65px; width:48px; background:url(images/db.png) no-repeat; margin:0 10px 0 5px;}
.month { font-size:12px; padding-top:5px; text-align:center; font-family:”Georgia”, Times New Roman, Times, serif; color:#6696bc; text-transform:uppercase; font-weight:normal;}
.day { font-size:20px; text-align:center; font-family:”Georgia”, Times New Roman, Times, serif; color:#6696bc; text-transform:uppercase;font-weight:normal;}
.year { font-size:12px; text-align:center; font-family:”Georgia”, Times New Roman, Times, serif; color:#6696bc; text-transform:uppercase;font-weight:normal;}

/*
HEADER
*/
.header { width:960px;}
h1#logo { background:url(images/logo.jpg) no-repeat; height:103px; width:340px; text-indent:-1000em; margin-top:15px;}

/*
Navigation
*/
#navigation { font-family:”Georgia”, Times New Roman, Times, serif; font-size:11px; }
#navigation ul { list-style:none; margin-top:46px; border-top: 1px solid #666; width:80px;}
#navigation ul li { border-bottom:1px solid #878787; }
#navigation ul li a { display:block; border-top:1px solid #9e9e9e; border-bottom:1px solid #9e9e9e; margin-left:3px;}
#navigation ul li a:hover { background-color:#878787; color:#004c87; margin-left:2px;}

/*
Footer
*/
#footer { width:960px; height:128px; background:url(images/footer) repeat-x; margin:0 auto;}

[Wes]

Well I had already considered the option. I wanted to get around that, but I guess theres not a way.

On another note; yes I understand all of the CSS needs to be in an external, but this is for a class and he has some ridiculous requirements.

Thanks anyway

[luxurychair]

There’s no functional reason for CSS to be in an external file. It works just fine in <style> tags. When I develop I always do it in batches directly in a <style> tag and then move it out to the external files in chunks. It’s much easier to have the markup right next to the CSS when developing (at least for me) than to constantly be juggling windows.

Before launch, yes, move it out. While troubleshooting, that’s the last thing I would worry about.

Also: Bravo on your teacher teaching CSS3. I only learned ancient techniques. Where are you going to school?

[Author]

Posts