Ask your own question, for FREE!
Computer Science 8 Online
OpenStudy (anonymous):

Need some help with HTML5 and CSS - CSS: #body { background-color:#DF0101; } HTML5:

(closed div just before i closed html body) Why wont my background change color?

OpenStudy (anonymous):

the problem is clear

OpenStudy (anonymous):

let me show you how to write that script, then i will explain your error

OpenStudy (anonymous):

first of all i recommend that you use css3, because it fits to different browsers, as for your problem here is one way of how you code it

OpenStudy (anonymous):

so how would i fix this error?

OpenStudy (anonymous):

yes i am typing it

OpenStudy (anonymous):

ok, thanks,

OpenStudy (anonymous):

ok here is the answer the error u made is

OpenStudy (anonymous):

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { background: #000000; } </title> <title>Page title</title> </head> <body id="background"> </body> </html>

OpenStudy (anonymous):

you did not tell your browser that you want to use style sheet or css

OpenStudy (anonymous):

it is better if you use a different file for css then link it to the html file

OpenStudy (anonymous):

now copy the code then save ur notepad file as html, then display it in ur browser

OpenStudy (anonymous):

are u there?

OpenStudy (anonymous):

this was the problem of ur code

OpenStudy (anonymous):

<style type="text/css">

OpenStudy (anonymous):

ah. but i didnt post the top half of my code, here moment. ill show you what i have.

OpenStudy (anonymous):

sorry for the wait,

OpenStudy (anonymous):

<!DOCTYPE html> <html> <head> <link rel=stylesheet href="template.css"> <title>America-Craft</title> </head> <body> <div id="backgroundcolor"> <div id="bodycolor"> <div id="navigation_container"> <div class="l-triangle-top"></div> <div class="l-triangle-bottom"></div> <div class="rectangle"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Gallary</a></li> <li><a href="#">Donate</a></li> </ul> </div> <div class="r-triangle-top"></div> <div class="r-triangle-bottom"></div> </div> </div> </div> </body> </html>

OpenStudy (anonymous):

are u sure u linked to the css, is it in the right ../dir/whatever.css

OpenStudy (anonymous):

yes, my css file is called template.css

OpenStudy (anonymous):

yes but are they in the same folder

OpenStudy (anonymous):

would you like to see my css code? If it will help? :/ and yes they are in the same folder. side by side.

OpenStudy (anonymous):

did u test it on different browsers then?

OpenStudy (anonymous):

I tested it on chrome and firefox. it should be working, im not sure why it wont.

OpenStudy (anonymous):

Could we change the colour of the background through html? would that work better?

OpenStudy (anonymous):

ok i will test it for u, send me the css file

OpenStudy (anonymous):

what error are u getting or is it not doing anything

OpenStudy (anonymous):

Its just not showing up, the background remains white.

OpenStudy (anonymous):

#backgroundcolor { background-color:#DF0101; } #bodycolor { left: 1%; top: 2px; position:absolute; width:97%; height:1000; background-image: linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -o-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -moz-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -webkit-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -ms-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -webkit-gradient( linear, right top, left top, color-stop(0.19, rgb(199,10,10)), color-stop(0.59, rgb(255,255,255)), color-stop(0.77, rgb(89,0,255)) ); } #navigation li { list-style: none; display: block; float: left; margin: 1em; } #navigation li a { text-shadow: 0 3px 2px rgba(0,0,0,1.0); display: block; text-decoration: none; color: #f0f0f0; font-size: 2.0em; margin: 0 .5em; } #navigation li a:hover { margin-top: 2px; } #navigation_container { margin: 0 auto; width: 1000px; } .rectangle { background: #e5592e; height: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 500; /* the stack order: foreground */ margin: 3em 0; } .l-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: 1px; left: -50px; } .l-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -40px; left: -150px; } .r-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; right: -45px; top: -107px; } .r-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; top: -149px; right: -145px; }

OpenStudy (anonymous):

yes i can see the error now

OpenStudy (anonymous):

u missed the - in background color

OpenStudy (anonymous):

background-color

OpenStudy (anonymous):

u called it 2 different names between css and html5

OpenStudy (anonymous):

that's why it is undefined to the browser

OpenStudy (anonymous):

we all fall in that error, it easy to make such mistakes

OpenStudy (anonymous):

I dont see what your pointing at, where am i missing a dash?

OpenStudy (anonymous):

if your refering to the div name, it shouldnt matter, div is a class or group thing, just stateing the name. they match on both sides :/

OpenStudy (anonymous):

wait i will fix it for u

OpenStudy (anonymous):

Ill be back shortly, :)

OpenStudy (anonymous):

figure it out yet?

OpenStudy (anonymous):

ok yes

OpenStudy (anonymous):

nothing wrong with ur code

OpenStudy (anonymous):

just need to add those two lines to ur body-color css file

OpenStudy (anonymous):

display:block; overflow:hidden;

OpenStudy (anonymous):

it worked for me

OpenStudy (anonymous):

those browsers guy have to come to a solution

OpenStudy (anonymous):

it didnt work for me :/

OpenStudy (anonymous):

my css is now :

OpenStudy (anonymous):

#background-color { background-color:#DF0101; display:block; overflow:hidden; } #bodycolor { left: 1%; top: 2px; position:absolute; width:97%; height:1000; background-image: linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -o-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -moz-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -webkit-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -ms-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -webkit-gradient( linear, right top, left top, color-stop(0.19, rgb(199,10,10)), color-stop(0.59, rgb(255,255,255)), color-stop(0.77, rgb(89,0,255)) ); } #navigation li { list-style: none; display: block; float: left; margin: 1em; } #navigation li a { text-shadow: 0 3px 2px rgba(0,0,0,1.0); display: block; text-decoration: none; color: #f0f0f0; font-size: 2.0em; margin: 0 .5em; } #navigation li a:hover { margin-top: 2px; } #navigation_container { margin: 0 auto; width: 1000px; } .rectangle { background: #e5592e; height: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 500; /* the stack order: foreground */ margin: 3em 0; } .l-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: 1px; left: -50px; } .l-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -40px; left: -150px; } .r-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; right: -45px; top: -107px; } .r-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; top: -149px; right: -145px; }

OpenStudy (anonymous):

and it still doesnt work for me :/

OpenStudy (anonymous):

wait, why in my body-color div?

OpenStudy (anonymous):

# not div, sorry

OpenStudy (anonymous):

ok so i added it to my body-color, still doesnt work :/

OpenStudy (anonymous):

#background-color { background-color:#DF0101; } #bodycolor { left: 1%; top: 2px; position:absolute; width:97%; height:1000; display:block; overflow:hidden; background-image: linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -o-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -moz-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -webkit-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -ms-linear-gradient(right , rgb(199,10,10) 19%, rgb(255,255,255) 59%, rgb(89,0,255) 77%); background-image: -webkit-gradient( linear, right top, left top, color-stop(0.19, rgb(199,10,10)), color-stop(0.59, rgb(255,255,255)), color-stop(0.77, rgb(89,0,255)) ); } #navigation li { list-style: none; display: block; float: left; margin: 1em; } #navigation li a { text-shadow: 0 3px 2px rgba(0,0,0,1.0); display: block; text-decoration: none; color: #f0f0f0; font-size: 2.0em; margin: 0 .5em; } #navigation li a:hover { margin-top: 2px; } #navigation_container { margin: 0 auto; width: 1000px; } .rectangle { background: #e5592e; height: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 500; /* the stack order: foreground */ margin: 3em 0; } .l-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: 1px; left: -50px; } .l-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -40px; left: -150px; } .r-triangle-top { border-color: #d9542b transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; right: -45px; top: -107px; } .r-triangle-bottom { border-color: transparent transparent #d9542b; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; top: -149px; right: -145px; }

OpenStudy (anonymous):

ok i will make it work on your system

OpenStudy (anonymous):

I am running Ubuntu 12.10. I should be working, i dont understand.

OpenStudy (anonymous):

yes i will leave the answer for u then u can see it

OpenStudy (anonymous):

u can see it in the morning or whenever

OpenStudy (anonymous):

ok sweet thanks

OpenStudy (anonymous):

thanks for your effort, even if you dont get it after. thanks. you deserve the medal.

OpenStudy (anonymous):

no i don't like to fail i will have to make this work

OpenStudy (anonymous):

this should 100% work

OpenStudy (anonymous):

body { background-color:#df0101; text-align:center; color:#fff; } #container { width:1000px; height:100%; margin:0 auto; text-align:left; padding:0 2px; }

OpenStudy (anonymous):

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css.css"> <title>America-Craft</title> </head> <body> <div id="container"> <p>Lorem Ipsum...</p> </div> </body> </html>

OpenStudy (anonymous):

when i see u, i will tell u why?

OpenStudy (anonymous):

ok, so, im back, can you explain what you changed? and why?

OpenStudy (anonymous):

It worked :D ! Finally ! So, does it automatically pick up the body in css without making a div?

Can't find your answer? Make a FREE account and ask your own questions, OR help others and earn volunteer hours!

Join our real-time social learning platform and learn together with your friends!
Latest Questions
lovelove1700: u00bfA quu00e9 hora es tu clase?Fill in the blanks Activity unlimited attempts left Completa.
17 hours ago 0 Replies 0 Medals
glomore600: find someone says that that one person your talking to doesn't really like you should I take their advice and leave or should I ask the person i'm talking t
20 hours ago 5 Replies 0 Medals
gr3ve3: Does anyone know how to solve/start this out?
1 day ago 5 Replies 0 Medals
Addif9911: Him I dimmed the light that once felt mine, a glow I never meant to lose. I over-read the shadows, let voices crowd the room where only two hearts shouldu20
2 days ago 4 Replies 0 Medals
EdwinJsHispanic: Poem to my mom who proved my point "You proved my point, I am a failure. but I kinda wish, you were my savior.
2 days ago 6 Replies 2 Medals
Twaylor: Templates for LaTeX
1 day ago 27 Replies 2 Medals
Twaylor: Templates for LaTeX
2 days ago 25 Replies 0 Medals
Wolfwoods: The Modern Princess "you spoke so softly to me, held me close when no one else did, loved me in a way no one else dared to.
2 days ago 11 Replies 3 Medals
Wolfwoods: The Pain Of Waiting "The short story would be that we fell in love, you left and I continued to wait for you.
3 days ago 7 Replies 2 Medals
notmeta: balance the following equation - alumoinum chlorate --> alumninum chloride + oxyg
3 days ago 4 Replies 1 Medal
Can't find your answer? Make a FREE account and ask your own questions, OR help others and earn volunteer hours!

Join our real-time social learning platform and learn together with your friends!