first time with CSS, |
first time with CSS, |
scott46825 |
May 21 2008, 08:14 PM
Post
#1
|
Group: Members Posts: 5 Joined: 21-May 08 Member No.: 5,721 |
I have a css code I want to use. How do I get it to display on an HTML document?
|
Darin McGrew |
May 21 2008, 08:54 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
See Linking Style Sheets to HTML in our CSS reference.
|
scott46825 |
May 22 2008, 11:25 AM
Post
#3
|
Group: Members Posts: 5 Joined: 21-May 08 Member No.: 5,721 |
I have the backgound, but it seems the problem is with the images.
The template I am using has this code- background-image: url('photos/8678.jpg'); Is this correct? I am also using this code to embed with. <style type="text/css"> |
pandy |
May 22 2008, 11:42 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Hi!
Afraid that's not enough for us to say if it's correct or not. Could you post the URL to a sample page? |
scott46825 |
May 22 2008, 12:11 PM
Post
#5
|
Group: Members Posts: 5 Joined: 21-May 08 Member No.: 5,721 |
well I cant get any url with this to display
|
pandy |
May 22 2008, 12:30 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
It doesn't matter if or how it displays as long as the files are there. We must see your HTML and CSS to be able to see what's wrong.
|
scott46825 |
May 22 2008, 01:08 PM
Post
#7
|
Group: Members Posts: 5 Joined: 21-May 08 Member No.: 5,721 |
ok, here is the enitre code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css"> <ul{ list-style-type:none; } #Container { left: 0px; top: 0px; width: 820px; position: relative; margin-right: auto; margin-left: auto; } #header_ { float: left; left: 0px; top: 0px; width: 820px; height: 364px; background-image: url('photos/8678.jpg'); } #header_ ul.navi{ width: 750px; display: block; position: absolute; top: 320px; left: 80px; padding: 0; margin: 0; background: none; } #header_ ul.navi li{ border-width: 1px; background: url(images/saparation.gif) no-repeat right; height: 22px; padding: 0 18px 0 5px; margin: 0; display: block; float: left; } #header_ ul.navi li.li1{ background:none; height:22px; padding:0 14px 0 5px; margin:0; display:block; float:left; } #header_ ul.navi li a{ font: 14px/21px Arial, Helvetica, sans-serif; color: #D7CEBD; text-decoration: none; text-indent: 0px; padding: 0 0 0 33px; font-weight: bold; margin: 0; width: inherit; letter-spacing: -1px; background-repeat: no-repeat; background-image: url('images/button.png'); } #header_ ul.navi li a:hover{ color: #FF9933; text-decoration: none; background-repeat: no-repeat; background-image: url('images/button_over.png'); } #left_ { float: left; left: 0px; top: 364px; width: 266px; background-image: url('images/left.jpg'); background-repeat: no-repeat; } #left_ h2{ font: 30px/24px "Calisto MT"; color: #FFCC66; font-weight: normal; display: block; letter-spacing: -1px; word-spacing: 0em; text-indent: 0px; margin-top: 0; margin-right: 0; margin-bottom: 10px; padding-top: 0px; padding-left: 55px; } #left_ p{ background: no-repeat; color: #E1BF9D; padding: 0 0 0 55px; width: 190px; display: block; font: 13px/20px "Trebuchet MS"; margin-top: 0; margin-right: 0; margin-bottom: 0; letter-spacing: 0px; } #left_ p span{ color: #E1BF9D; font-weight: bold; font-size: 16px; letter-spacing: -1px; } #left_ p span.bg{ color: #799fbb; } #left_ p a{ font: 13px/12px "trebuchet MS"; font-weight: normal; color: #FFD62F; text-decoration: underline; padding-top: 0; padding-right: 0; padding-bottom: 0; } #left_ p a:hover{ background: no-repeat; color: #FF6600; font-weight: normal; } #right_ { float: left; left: 266px; top: 364px; width: 554px; background-image: url('images/right.jpg'); background-repeat: no-repeat; } #right_ h2{ font: 30px/24px "Calisto MT"; color: #FFCC66; font-weight: normal; display: block; letter-spacing: -1px; word-spacing: 0em; text-indent: 0px; margin-top: 0; margin-right: 0; margin-bottom: 10px; padding-top: 0px; padding-left: 20px; } #right_ p{ background: no-repeat; color: #E1BF9D; padding: 0 0 0 20px; width: 490px; display: block; font: 13px/20px "Trebuchet MS"; margin-top: 0; margin-right: 0; margin-bottom: 0; letter-spacing: 0px; } #right_ p span{ color: #E1BF9D; font-weight: bold; font-size: 16px; letter-spacing: -1px; } #right_ p span.bg{ color: #799fbb; } #right_ p a{ font: 13px/12px "trebuchet MS"; font-weight: normal; color: #FFD62F; text-decoration: underline; padding-top: 0; padding-right: 0; padding-bottom: 0; } #right_ p a:hover{ background: no-repeat; color: #FF6600; font-weight: normal; } #footer1_ { float: left; left: 0px; top: 572px; width: 820px; height: 41px; background-image: url('images/footer1.jpg'); } #footer-left_ { float: left; left: 0px; top: 613px; width: 51px; height: 22px; background-image: url('images/footer_left.jpg'); } #footer-contents_ { float: left; left: 51px; top: 613px; width: 820px; background-image: url('footer_contents.jpg'); } #footer-contents_ p{ background: no-repeat; color: #E1BF9D; padding: 0 0 0 0px; margin: 0 0 0 70px; width: 680px; display: block; font: 13px/17px "trebuchet MS"; text-align: center; } #footer-contents_ p span{ color: #E1BF9D; font-weight: bold; } #footer-contents_ p span.bg{ color: #799fbb; } #footer-contents_ p a{ font: 13px/12px "trebuchet MS"; font-weight: normal; color: #FFCC00; text-decoration: none; padding-top: 0; padding-right: 0; padding-bottom: 0; } #footer-contents_ p a:hover{ background: no-repeat; color: #FF6600; } #footer-right_ { float: left; left: 769px; top: 613px; width: 51px; height: 22px; background-image: url('images/footer_right.jpg'); } #footer-bottom_ { left: 0px; top: 635px; width: 820px; height: 65px; float: left; background-image: url('images/footer_bottom.jpg'); } body { background-color: #321f09; margin: 0px; }> </style> </head> <body> </body> </html> |
pandy |
May 22 2008, 01:37 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Well, if that's all the HTML you've got, the only thing that can show up is the background color for body. You must have HTML to go with your CSS, otherwise it means nothing.
You've also put an "<" at the beginning of the style sheet and a ">" at the end of it. The CSS checker tells you things like that. http://jigsaw.w3.org/css-validator/validator?text=%3Cul%7B% (this link won't work in IE) |
scott46825 |
May 22 2008, 02:23 PM
Post
#9
|
Group: Members Posts: 5 Joined: 21-May 08 Member No.: 5,721 |
ok, well it had images in the headers and i was wondering why they wouldnt display
|
pandy |
May 22 2008, 02:50 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You should read this.
http://www.htmlhelp.com/reference/css/structure.html CSS does nothing on it's own. It's used to apply style to EXISTING HTML elements, it doesn't create them. The only element that's visible on the page you have is BODY. The other rules do nothing, because there are no element with the id 'Container', no element with the id 'header' and so on. If you have this CODE p { color: red } it does nothing unless you actually have a P (or several) in the HTML. |
Lo-Fi Version | Time is now: 29th March 2024 - 03:10 AM |