I seem to be completely disoriented about how to specify, in my external .css file, a background image and its characteristics (properties? I still have a terrible time with words and their meanings; I get very confused about concepts).
Anyway, maybe if I post my very bad and wrong code, somebody can tell me how to fix it, maybe?
This morning I made a .gif, planning to repeat it horizontally but not vertically, to make a stripe about 30px wide down the left side of some of my photo gallery pages; this of course is experimental on my part, and I might try to do a better job on the .gif itself before too long; for now, I'm just trying to put something in to make it work as a repeating (horizontally) background image.
I have several books to refer to, and am using those, but I'm not understanding them right. Same with sources on the web. Most seem to be geared to embedding the code, or putting it inline, or even in the head section of the page concerned. But I want mine external. Is that not possible? It should, seems to me, be possible, since you can specify the background color in the external style sheet, and I've done that.
So far, I have specified some font information in my external style sheet, and the background color; nothing else, until this morning I succeeded in getting three class definitions in for certain headers, and that validated with the W3C validator (CSS).
But though I keep getting error messages - and leads too - from the W3C validator, I *still* don't seem to understand them at all.
So, here's my BAD! code; and maybe somebody will understand what I'm trying to do, and could give me some ideas for correcting this? (the first part shown is good, and works; it's the second example that is bad, so of course it doesn't work).
Actually, I had "images/logos/tendrils.gif" in there before, but I can't find any examples that show specifics like that, so I took that out, figuring I should learn one thing at a time, but I want the file in my images/logos subdirectory; logically speaking that's where it belongs!
Sorry to be so very wordy, but the more confused I am, the wordier I get; because I obviously am not having a notion of what the concepts are all about! I have a funny feeling this shouldn't be too hard to fix, but I won't be able to till I begin to fathom the ocncepts.
Thanks for reading all that, if you got this far!
If you want a look, I haven't yet implemented my three class sytles for headers 1, 2 and 3, but I plan to put them in what now ia a plain top banner; the headers that currently lie below that banner, I plan to shove upward and overlay the top banner with, in whatever way works with external .CSS code. If you follow me <urgh!>
The specific file I'm working with for test purpose is visible at:
http://www.islandnet.com/~cwhitney/prancydesk.htm
You'll see there's a logo in the banner, and a small image on the right side of the banner as well, and I plan (somehow) to keep those also, and to put the headers up in the banner area (if I can figure out how, with your help!)
Thu, 30 Dec 2004 17:09:59 (PST)
MstrBob
12-30-2004, 08:21 PM
Well, if you're unsure, the best place to look always is the CSS Specs (http://www.w3.org/TR/CSS21/). Specifically, let us look at background properties (http://www.w3.org/TR/CSS21/colors.html#background-properties). I'm still a bit confused about what your problem is, since you don't seem to have described one. Are you unsure of the background syntax? In general, it's often simpler to condense your background properties into one statement. So, let's condense it all in the background property. We merely seperate them by spaces, and place them in an order like so:
Now, let us replace each of those brackets with the specific code. So, for your example, we would have:
background: #99ccff url('tendrils.gif') repeat-x fixed top left;
You see what happened? We specified that there will be a background color of #99ccff. We also state that there will be a background image, tendrils.gif, that we want this to be tiled vertically and fixed, starting from the top left. (Also, in answert to your earlier question, yes, all CSS properties can be declared in external style sheets, the head, or inline.)
CarolW
12-30-2004, 08:32 PM
I'm replying to myself to keep this stuff in the same thread; I have two other external style sheets on my site, but hope to merge the two that apply specifically to the photo galleries on the site.
Right now, those are
prancygalry.css
which is what is controlling a few aspects (so far; more when I learn how) of headers, along with the background color), and, I hope, soon, the repeating background image, for the "family gallery" on my site (it only has four files in it), and of course the basic text too;
and
galryfull.css
which is really the same as prancygalry.css; so I might as well merge the two (and use only one of them) at any time. And change the name; perhaps to galry.css - the simpler the better.
My external style sheet for the main files on my site is is, oddly enough,
carol.css
I'm guessing I'll need the two different .css files:
carol.css
galry.css
In the last couple of days, after Schomer made me a lovely file with ideas, I've laboriously edited each .htm file to put in banner headers and footers, just to un-drab the place a bit, and I've included my site logo "Eye of doG" in each banner header (that logo is also subject to change, but in general, I like simplicity).
I'm just starting to study the Box Model stuff, encouraged by Schomer (thanks; Schomer), but am holding off on XHTML, till I learn more about what that is all about; I think I should learn about the Box Model first, probably in plain HEML.
I mention all this thinking that might help you help me. I keep thinking that there's a great deal of stuff I should be able to control with external style sheets. I've therefore also gone through every file to simplify links between pages on the site, and to make them as consistent as I can manage, with the idea that maybe I can use includes, and/or control these things (again) from the external style sheets. My host server is Apache, and offers PHP, and I have a feeling that I might need to get into that - but that's real programming, I gather, and it will probably be quite a while before I get any kind of grip on that! (My ISP, though, is wonderfully helpful!)
Thu, 30 Dec 2004 17:32:28 (PST)
MstrBob
12-30-2004, 08:40 PM
Yes, a server side programming language would cut down on file size and make updating pages a lot more efficient, and it's really not that hard, well, not using includes at least.
In terms of XHTML, ask yourself if you really need to be learning it. XML is quite the subject to be getting into, especially if you're still unusure of HTML and CSS. My advice is to read the specs, since they are the most complete source on the technologies, which were pioneered by the W3C. So, sit down and read through
HTML 4.01 (http://www.w3.org/TR/html4/)
CSS 2.1 (http://www.w3.org/TR/CSS21/)
XHTML, though definately a useful tool in the future, is currently pointless to use. There simply isn't enough browser support, as Internet Explorer will go into conniptions with XML. Perhaps when XHTML 2.0 is finalized and more capable browsers become mainstream it will be good to use, but until then it is pointless. Browsers like IE will interpret your XHTML as HTML, so where are the benefits in that? Anyway, focus in on mastering your fundamental tools: HTML and CSS. The more comfortable you become with them, the better and faster you will be able to create web documents.
CarolW
12-30-2004, 08:46 PM
Originally posted by MstrBob
Well, if you're unsure, the best place to look always is the CSS Specs (http://www.w3.org/TR/CSS21/). Specifically, let us look at background properties (http://www.w3.org/TR/CSS21/colors.html#background-properties). I'm still a bit confused about what your problem is, since you don't seem to have described one.
Oh - that my .CSS file wouldn't validate; I kept getting error messages, but I didn't understand them!
I did go exactly where you suggested, since the CSS validator had a link to it! How handy! But I didn't understand what I was reading <g>. I think it's being so new to all this, and after a time, it will start to look familiar, and I might wonder why I didn't "understand" it' after all, ir's all right there, right? again, you've pinpointed it - with no notion of concept nor syntax, I get lost. Disoriented <g>.
Are you unsure of the background syntax? In general, it's often simpler to condense your background properties into one statement. So, let's condense it all in the background property. We merely seperate them by spaces, and place them in an order like so:
Gosh! thanks for that example! That's exactly it, Mstr Bob; that I don't understand the syntax at all! I thought I should condense the thing as you suggest, but had no idea how to go about it; again, its the syntax that defeats me; I guess I'm too new to it.
Now, let us replace each of those brackets with the specific code. So, for your example, we would have:
background: #99ccff url('tendrils.gif') repeat-x fixed top left;
You see what happened? We specified that there will be a background color of #99ccff. We also state that there will be a background image, tendrils.gif, that we want this to be tiled vertically and fixed, starting from the top left. (Also, in answert to your earlier question, yes, all CSS properties can be declared in external style sheets, the head, or inline.)
Thank you; thank you; thank you! I believe you've given me a real start on this!
I do, though, wonder why I can't use "images/logos/tendrils.gif" (that is, specify a subdirectory) - or can I? if so, what would be the syntax for that? It would amaze me if it weren't possible to do that.
Thanks so much!
Thu, 30 Dec 2004 17:44:38 (PST)
MstrBob
12-30-2004, 10:46 PM
You are quite able to to specify a subdirectory with images, or any other include file. One just has to know how to deal with URI's on the internet. Now, links to images in an external CSS file are relative to the location of the external file. A bit confusing, so allow me to explain. Let's say we have 3 directories, or folders:
WWW is the main folder, which you access by going to www.yoursite.com Now, this contains two directories: CSS and Images. The images folder contains another folder, logos, which contains bg.gif - your background image. The CSS folder has your external CSS file. So now, in your CSS file, you put this for the URI:
../images/logos/bg.gif
What does ../ mean? Well, that tells the application to move up one folder, to the parent folder, which is WWW. Now, in this folder we go to the images folder, in that folder the logos folder, in that is the bg.gif file. Now, no matter what directory your HTML files that use the CSS file, the URI will be able to stay the same. Another method to use is this:
/images/logos/bg.gif
Putting a slash at the begginning will cause the application to go straight for the top folder, WWW, and then work its way from there. So, for your file, you can do this:
background: #99ccff url('/images/logos/tendrils.gif') repeat-x fixed top left;
CarolW
12-30-2004, 11:34 PM
Originally posted by MstrBob
You are quite able to to specify a subdirectory with images, or any other include file.
<snippety snip>
MstrBob, I have a wonderful nose for what is good information, even when I'm so disoriented. Maybe it's because good information orients me well! I read your earlier post, cheering! Great info! thanks! (about XHTML and suchlike, and studying HTML 4.01 and CSS - that's precisely what I'm doing - and I love doing it! (am getting there very slowly, but a lot faster than I would without help from people of your caliber!).
So now to your latest post: I understood your directory-structure indications perfectly; I used DOS for many years, and got reasonably competent with it.
My vision is quite rotten (astigmatism) - those look like single quotes around the directory information - is that right? The term URI is new to me; I'm still trying to wrap my mind around that one - "Identity?" I still don't understand the difference between URL and URI. I'd better learn <g>.
Oops - almost forgot - I can zoom in with my Opera browser and SEE those single-quotes, if that's what they are.
Thanks for all your remarks and examples! They are very specifically helpful, and your suggestions for how I might proceed to learn strike me as top-notch. So I'll report back at the next opportunity. Help like yours is what makes learning espeically fun!
Thu, 30 Dec 2004 20:33:24 (PST)
MstrBob
12-30-2004, 11:44 PM
Glad you've got the linking down, relative linking can come in quite handy.
Those are indeed single quotes around the URI. You can also use double quotes, or nothing at all. However, being a programmer at heart, I just have to quote it. Instincts and all.
URI stands for Universal Resource Identifier. Basically, URI is a generic term for names that refer to objects. URL stands for Uniform Resource Locator, which is specificall web names like www.google.com I myself am still a bit fuzzy on the topic, but documentation I read tend to use URI, and I picked it up myself, but in terms of the web, I guess URL is more fitting. Technicalities, eh? And I'm glad I can be of some help. :)
ray326
12-31-2004, 04:30 PM
There is no example here (http://www.w3.org/TR/REC-CSS1#background-image) that indicates quotes are required.
Carol, always keep in mind the url() references in a style sheet are relative to the location of the style sheet.
CarolW
12-31-2004, 06:37 PM
Ray, that's a great tip, because I might easily forget the path would be relative to the .CSS file! I'll keep that in mind; thanks!
I'm having a heck of a time staying logged in; I've reported this difficulty twice; it seems to depend on how I come into the forum; if I click on the link provided in the email notification I can't stay logged in, no matter how often I log in, and apparently I also can't stay logged in if I click on the summary topic links shown when I first come in to the forums. Sheesh! I'm walking on eggs. I try to reply to people helping me, but if you (for instance, MstrBob) don't receive a reply (antoher thread, I think), it's because I wrote a very long reply, while logged in, but when I went to save it, got a report I wasn't logged in, and when I tried to log in again, that was ineffective - couldn't do it. I donubt I'll ever really undrestand computers <g>.
Going to have to take a break; my head is spinning <g>.
Fri, 31 Dec 2004 15:37:25 (PST)
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.