The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> first time with CSS,
scott46825
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scott46825
post 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">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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! smile.gif

Afraid that's not enough for us to say if it's correct or not. Could you post the URL to a sample page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scott46825
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scott46825
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scott46825
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 03:10 AM