I'm currently using Dreamweaver MX 2004.
I was messing around with a style which was embedded into my sheet like so:
<style type="text/css">
<!--
body {
background-color: #F8F4DB;
margin-left: 26px;
margin-top: 26px;
margin-right: 26px;
margin-bottom: 26px;
}
.title {
background: url(images/frieze.gif) right no-repeat;
}
.para {
font-weight: normal;
}
a:link {
color: #87683A;
}
a:visited {
color: #87683A;
}
a:hover {
color: #87683A;
}
a:active {
color: #87683A;
}
-->
</style>
I decided that I wanted to put the info above into a proper CSS and have done so with this:
body {
background-color: #F8F4DB;
margin-left: 26px;
margin-top: 26px;
margin-right: 26px;
margin-bottom: 26px;
}
.title {
background: url(images/frieze.gif) right no-repeat;
}
.para {
font-weight: normal;
}
a:link {
color: #87683A;
}
a:visited {
color: #87683A;
}
a:hover {
color: #87683A;
}
a:active {
color: #87683A;
}
The only problem I'm having is that the class title does not seem to be working. When I include class="title" in a table's properties the picure it specifies does not appear.
The HTML to display it is:
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles/admin_style.css" rel="stylesheet" type="text/css" />
Is there something that I'm doing wrong?Depending on the version of Dreamweaver, it may not recognize the background attribute in WYSIWYG mode. Open the page in a Web browser to see if it really works.Thanks...but that doesn't seem to help.
I've uploaded the page here (<!-- m --><a class="postlink" href="http://www.talk-history.com/admin-panel.htm">http://www.talk-history.com/admin-panel.htm</a><!-- m -->) but the graphic, which should appear underneath the black tagline, does not show.
I'm guessing it's looking in the wrong place for the images directory, perhaps it thinks it's under the styles directory? Try giving the full url to it to see if that helps. If so, you might play around with relative pathnames, like "url(../images/frieze.gif)".I tried the ... approach and also this:
body {
background-color: #F8F4DB;
margin-left: 26px;
margin-top: 26px;
margin-right: 26px;
margin-bottom: 26px;
}
.title {
background: url(/home/username/public_html/images/frieze.gif) right no-repeat;
}
.para {
font-weight: normal;
}
a:link {
color: #87683A;
}
a:visited {
color: #87683A;
}
a:hover {
color: #87683A;
}
a:active {
color: #87683A;
}
Still nothing. I might just have to use the style sheet for everything else and just use STYLE tags for this one feature.I might just have to use the style sheet for everything else and just use STYLE tags for this one feature.
That approach worked (as this (<!-- m --><a class="postlink" href="http://www.talk-history.com/admin-panel.htm">http://www.talk-history.com/admin-panel.htm</a><!-- m -->) shows)...which is just stupid, really.Originally posted by SJ McAbney
Is there something that I'm doing wrong? I doubt that this is the cause of your problem but
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles/admin_style.css" rel="stylesheet" type="text/css" />
isn't HTML, it's XHTML. The two are different and not really compatable. Leave off that trailling slash.How about:
background: url(<!-- m --><a class="postlink" href="http://www.talk-history.com/images/frieze.gif">http://www.talk-history.com/images/frieze.gif</a><!-- m -->) right no-repeat;Browsers do not Download the image for a background-image style if it is placed in an external stylesheet unless the style is an ID selector (#stylename). If you have a general class defined (.someclass) it has to be inline for the background-image to work.So, what would I do to the CSS above to use this ID selector you mention? I haven't used them before.To use id selectors do the following:
1. In the stylesheet, use #title instead of .title
2. In the HTML, use <table id="title"> instead of <table class="title">
Malas, I tried what you said but the images aren't appearing now that I've wrenched them out of the style tag... do you have to change paths?It could be that the browsers don't render the background image unless it is inline. It's been a while since I used a background image that was an ID selector. I thought it worked last time a tried, but my memory is generally as fuzzy as Microsofts good will towards open source software.The whole thing with the ID is completely off. Browsers are supposed to render background images for any HTML tag, ID and class name or no ID and classname, whether the tag is inline or block. You are missing attributes in your background statement, which may be some of the problem, but, all the attributes are:
background: <color> url(<url>) <repeat> <attachment> <position>;
<color>
transparent
#[hexidecimal color value]
rgb(x,y,z)
<url>
The absolute or relative path to the image from the directory that stores the CSS file. I think this is where your background is failing.
<repeat>
repeat
no-repeat
repeat-x
repeat-y
<attachment>
scroll
fixed (IE doesn't support this)
<position>
[top|bottom] [left|right]
[m][unit] [n][unit], where [m] and [n] are whole numbers and [unit] is the unit of measure, like px, em, ex, %, etc.
But remember, the background image needs an absolute URL or a URL relative to the CSS file, not the HTML file that references it.For whatever it's worth, this works on my personal web site - maybe because I specify a element.class in the CSS file instead of just .class? (I'm really guessing here!)
my_web_site/style.css:
div.top {
width: 800px;
margin: 0;
padding: 0;
background: #99ccff url(img/blue.jpg) repeat;
color: navy;
}
my_web_site/page.html:
<LINK REL=stylesheet HREF='http://www.webdeveloper.com/forum/archive/index.php/style.css'>
(Image is in my_web_site/image/blue.jpg)I don't have these problems, I have both class & id working and .class on it's own. I do have my styles in a separate folder /styles and because of this the relative path has to go up one first e.g. "../gifs/picture.gif" for the URL. The ../ means go up one level in the path.body {
background: #F8F4DB;
margin: 26px;
}
.title {background: url(images/frieze.gif) top right no-repeat;}
.para {font-weight: normal;}
a:link {color: #87683A;}
a:visited {color: #87683A;}
a:hover {color: #87683A;}
a:active {color: #87683A;} Try that. The only real change I made was adding the 'top' attribute to .title's background positioning (I think you need to state both), the rest is just how I'd write it.I've got
background: url("../gifs/new.gif") center no-repeat;
but it's the '../' part that I think you lack.NogDog is right. Simply include the full path to the image, if you're unsure. Otherwise, it's looking for the image in <!-- m --><a class="postlink" href="http://www.talk-history.com/styles/images/frieze.gif">http://www.talk-history.com/styles/images/frieze.gif</a><!-- m --> which is wrong. Before, you were including the full server path for the files, but you need an internet path for the browser to access them. That is all.It can also be a relative path as I indicated previously.Its true, believe the guy. It doesn't matter whether its HTML or XHTML, that was way off. It doesn't matter if you use a class or id selector (Norty Pig (<!-- m --><a class="postlink" href="http://www.blog.nortypig.com">http://www.blog.nortypig.com</a><!-- m -->)has a class for the banner with a background image.
It can only be that your code isn't finding the right file on the computer, the path is wrong. Sometimes I've been in the same position where a logic block keeps saying the image should show. My suggestion is to shut all of your windows down and go into the files themselves and find the image. Then work out where you have to call the image from to get it to show.
Hope this is of some assistance ...
Another thing to consider in embedded vs external CSS is the degree of separation of content from formatting that you would like to achieve. Ideally inline CSS and javascript would be better external to the page because it separates out content, structure, and behaviour......
I was messing around with a style which was embedded into my sheet like so:
<style type="text/css">
<!--
body {
background-color: #F8F4DB;
margin-left: 26px;
margin-top: 26px;
margin-right: 26px;
margin-bottom: 26px;
}
.title {
background: url(images/frieze.gif) right no-repeat;
}
.para {
font-weight: normal;
}
a:link {
color: #87683A;
}
a:visited {
color: #87683A;
}
a:hover {
color: #87683A;
}
a:active {
color: #87683A;
}
-->
</style>
I decided that I wanted to put the info above into a proper CSS and have done so with this:
body {
background-color: #F8F4DB;
margin-left: 26px;
margin-top: 26px;
margin-right: 26px;
margin-bottom: 26px;
}
.title {
background: url(images/frieze.gif) right no-repeat;
}
.para {
font-weight: normal;
}
a:link {
color: #87683A;
}
a:visited {
color: #87683A;
}
a:hover {
color: #87683A;
}
a:active {
color: #87683A;
}
The only problem I'm having is that the class title does not seem to be working. When I include class="title" in a table's properties the picure it specifies does not appear.
The HTML to display it is:
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles/admin_style.css" rel="stylesheet" type="text/css" />
Is there something that I'm doing wrong?Depending on the version of Dreamweaver, it may not recognize the background attribute in WYSIWYG mode. Open the page in a Web browser to see if it really works.Thanks...but that doesn't seem to help.
I've uploaded the page here (<!-- m --><a class="postlink" href="http://www.talk-history.com/admin-panel.htm">http://www.talk-history.com/admin-panel.htm</a><!-- m -->) but the graphic, which should appear underneath the black tagline, does not show.
I'm guessing it's looking in the wrong place for the images directory, perhaps it thinks it's under the styles directory? Try giving the full url to it to see if that helps. If so, you might play around with relative pathnames, like "url(../images/frieze.gif)".I tried the ... approach and also this:body {
background-color: #F8F4DB;
margin-left: 26px;
margin-top: 26px;
margin-right: 26px;
margin-bottom: 26px;
}
.title {
background: url(/home/username/public_html/images/frieze.gif) right no-repeat;
}
.para {
font-weight: normal;
}
a:link {
color: #87683A;
}
a:visited {
color: #87683A;
}
a:hover {
color: #87683A;
}
a:active {
color: #87683A;
}
Still nothing. I might just have to use the style sheet for everything else and just use STYLE tags for this one feature.I might just have to use the style sheet for everything else and just use STYLE tags for this one feature.
That approach worked (as this (<!-- m --><a class="postlink" href="http://www.talk-history.com/admin-panel.htm">http://www.talk-history.com/admin-panel.htm</a><!-- m -->) shows)...which is just stupid, really.Originally posted by SJ McAbney
Is there something that I'm doing wrong? I doubt that this is the cause of your problem but
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles/admin_style.css" rel="stylesheet" type="text/css" />
isn't HTML, it's XHTML. The two are different and not really compatable. Leave off that trailling slash.How about:
background: url(<!-- m --><a class="postlink" href="http://www.talk-history.com/images/frieze.gif">http://www.talk-history.com/images/frieze.gif</a><!-- m -->) right no-repeat;Browsers do not Download the image for a background-image style if it is placed in an external stylesheet unless the style is an ID selector (#stylename). If you have a general class defined (.someclass) it has to be inline for the background-image to work.So, what would I do to the CSS above to use this ID selector you mention? I haven't used them before.To use id selectors do the following:
1. In the stylesheet, use #title instead of .title
2. In the HTML, use <table id="title"> instead of <table class="title">
Malas, I tried what you said but the images aren't appearing now that I've wrenched them out of the style tag... do you have to change paths?It could be that the browsers don't render the background image unless it is inline. It's been a while since I used a background image that was an ID selector. I thought it worked last time a tried, but my memory is generally as fuzzy as Microsofts good will towards open source software.The whole thing with the ID is completely off. Browsers are supposed to render background images for any HTML tag, ID and class name or no ID and classname, whether the tag is inline or block. You are missing attributes in your background statement, which may be some of the problem, but, all the attributes are:
background: <color> url(<url>) <repeat> <attachment> <position>;
<color>
transparent
#[hexidecimal color value]
rgb(x,y,z)
<url>
The absolute or relative path to the image from the directory that stores the CSS file. I think this is where your background is failing.
<repeat>
repeat
no-repeat
repeat-x
repeat-y
<attachment>
scroll
fixed (IE doesn't support this)
<position>
[top|bottom] [left|right]
[m][unit] [n][unit], where [m] and [n] are whole numbers and [unit] is the unit of measure, like px, em, ex, %, etc.
But remember, the background image needs an absolute URL or a URL relative to the CSS file, not the HTML file that references it.For whatever it's worth, this works on my personal web site - maybe because I specify a element.class in the CSS file instead of just .class? (I'm really guessing here!)
my_web_site/style.css:
div.top {
width: 800px;
margin: 0;
padding: 0;
background: #99ccff url(img/blue.jpg) repeat;
color: navy;
}
my_web_site/page.html:
<LINK REL=stylesheet HREF='http://www.webdeveloper.com/forum/archive/index.php/style.css'>
(Image is in my_web_site/image/blue.jpg)I don't have these problems, I have both class & id working and .class on it's own. I do have my styles in a separate folder /styles and because of this the relative path has to go up one first e.g. "../gifs/picture.gif" for the URL. The ../ means go up one level in the path.body {
background: #F8F4DB;
margin: 26px;
}
.title {background: url(images/frieze.gif) top right no-repeat;}
.para {font-weight: normal;}
a:link {color: #87683A;}
a:visited {color: #87683A;}
a:hover {color: #87683A;}
a:active {color: #87683A;} Try that. The only real change I made was adding the 'top' attribute to .title's background positioning (I think you need to state both), the rest is just how I'd write it.I've got
background: url("../gifs/new.gif") center no-repeat;
but it's the '../' part that I think you lack.NogDog is right. Simply include the full path to the image, if you're unsure. Otherwise, it's looking for the image in <!-- m --><a class="postlink" href="http://www.talk-history.com/styles/images/frieze.gif">http://www.talk-history.com/styles/images/frieze.gif</a><!-- m --> which is wrong. Before, you were including the full server path for the files, but you need an internet path for the browser to access them. That is all.It can also be a relative path as I indicated previously.Its true, believe the guy. It doesn't matter whether its HTML or XHTML, that was way off. It doesn't matter if you use a class or id selector (Norty Pig (<!-- m --><a class="postlink" href="http://www.blog.nortypig.com">http://www.blog.nortypig.com</a><!-- m -->)has a class for the banner with a background image.
It can only be that your code isn't finding the right file on the computer, the path is wrong. Sometimes I've been in the same position where a logic block keeps saying the image should show. My suggestion is to shut all of your windows down and go into the files themselves and find the image. Then work out where you have to call the image from to get it to show.
Hope this is of some assistance ...
Another thing to consider in embedded vs external CSS is the degree of separation of content from formatting that you would like to achieve. Ideally inline CSS and javascript would be better external to the page because it separates out content, structure, and behaviour......