Web Design Forums

Ehab · 21-04-2008, 07:24

hello again,
ok so my computer crashed on me a couple of days ago due to a horrible vista bug that cost me almost 20GB of irrecoverable data, all i tried to do was run the built in disk cleanup util and thank god i cancelled in time before windows literally ate itself up, but anyways, back up again and very frustrated and deadlines approaching so im doing everything again from scratch. basic layout, i want a centered div with a drop shadow on both sides. i started with a container, aligned it to the center, two divs on top of each other inside of it, one with the shadow and the top one with the content. i am trying to set the background color in the body tag to black so it matches the fadeout color of the shadow, but its not working for some reason, its staying white. is it becasue i am using z-index ?? (ive never used it before). here is the CSS and html again.

CSS:
body
{
margin: 0;
padding: 0;
text-align: center;
background: #000000;
}

#container
{
width: 80%;
margin: 0 auto;
}

#contentBack
{
position:absolute;
top: 0;
z-index: 0;
width: 975px;
height: 100%;
margin-left:0;
background-image: url(images/bg2.png);
background-repeat: repeat-y;
}

#contentFront
{
position: absolute;
top: 0;
z-index: 1;
width: 925px;
height: 100%;
margin-left:25px;
background-image: url(images/WSNEW.png);
}

HTML:

<body>
<div id="container">
<div id="contentBack"></div>
<div id="contentFront"></div>
</div>
</body>
</html>

Ehab · 21-04-2008, 20:35

nevermind. it was the css header:

@charset "utf-8";
/* CSS Document */

that was doing it for some reason. i deleted it and it works fine now.

flappypenguin · 02-05-2008, 17:59

you should change the code to

Code:

background-color: #000000;

As having the short hard code "background" with only 1 attribute will cause it to fail css validation such as AAA. Only ever use shorthand if you are using multiple attributes ie;

Code:

background:url(../images/blah.gif) top left no-repeat #000000;

I know you fixed the bug, but thats just a bit of advice

pgo · 04-05-2008, 01:31

You can also shorten many hex color codes.

#000 = #000000
#AC9 = #AACC99

Ehab · 06-05-2008, 13:18

thanks for the tips guys

seen.to · 06-05-2008, 13:33

Quote:

Originally Posted by flappypenguin

you should change the code to

Code:

background-color: #000000;

As having the short hard code "background" with only 1 attribute will cause it to fail css validation such as AAA. Only ever use shorthand if you are using multiple attributes ie;

Code:

background:url(../images/blah.gif) top left no-repeat #000000;

I know you fixed the bug, but thats just a bit of advice

background: #000; is perfectly valid and IMO preferable to the long version.

pgo · 06-05-2008, 14:34

Quote:

Originally Posted by seen.to

background: #000; is perfectly valid and IMO preferable to the long version.

I think he means using the background property with only one value.

Using...

Code:

background: red;

Instead of...

Code:

background-color: red;

I can neither confirm nor deny that the first is bad.

weldo · 07-05-2008, 06:13

i do know that CSS validation and AAA are two entirely different things ...

i use background: #000;

it may bring up a css warning - but who cares ... its still valid.

21-04-2008, 07:24	#1 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	z-index? hello again, ok so my computer crashed on me a couple of days ago due to a horrible vista bug that cost me almost 20GB of irrecoverable data, all i tried to do was run the built in disk cleanup util and thank god i cancelled in time before windows literally ate itself up, but anyways, back up again and very frustrated and deadlines approaching so im doing everything again from scratch. basic layout, i want a centered div with a drop shadow on both sides. i started with a container, aligned it to the center, two divs on top of each other inside of it, one with the shadow and the top one with the content. i am trying to set the background color in the body tag to black so it matches the fadeout color of the shadow, but its not working for some reason, its staying white. is it becasue i am using z-index ?? (ive never used it before). here is the CSS and html again. CSS: body { margin: 0; padding: 0; text-align: center; background: #000000; } #container { width: 80%; margin: 0 auto; } #contentBack { position:absolute; top: 0; z-index: 0; width: 975px; height: 100%; margin-left:0; background-image: url(images/bg2.png); background-repeat: repeat-y; } #contentFront { position: absolute; top: 0; z-index: 1; width: 925px; height: 100%; margin-left:25px; background-image: url(images/WSNEW.png); } HTML: <body> <div id="container"> <div id="contentBack"></div> <div id="contentFront"></div> </div> </body> </html>

02-05-2008, 17:59	#3 (permalink)
flappypenguin shouting at a monitor! Join Date: May 2008 Location: Glasgow, Scotland Posts: 10	you should change the code to Code: background-color: #000000; As having the short hard code "background" with only 1 attribute will cause it to fail css validation such as AAA. Only ever use shorthand if you are using multiple attributes ie; Code: background:url(../images/blah.gif) top left no-repeat #000000; I know you fixed the bug, but thats just a bit of advice

04-05-2008, 01:31	#4 (permalink)
pgo Moderator Join Date: Jan 2005 Location: Brooklyn, NYC Posts: 11,869	You can also shorten many hex color codes. #000 = #000000 #AC9 = #AACC99 __________________ Find good advice in the beginners web design thread. patrick o'neill web developer \| blog \| spam humor

07-05-2008, 06:13	#8 (permalink)
weldo now with added beard Join Date: Mar 2004 Location: Liverpool Posts: 4,963	i do know that CSS validation and AAA are two entirely different things ... i use background: #000; it may bring up a css warning - but who cares ... its still valid. __________________ fuck signatures

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

21-04-2008, 20:35	#2 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	nevermind. it was the css header: @charset "utf-8"; /* CSS Document */ that was doing it for some reason. i deleted it and it works fine now.

06-05-2008, 13:18	#5 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	thanks for the tips guys

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)