Forum Index > Full Moon Saloon > web design question
 Reply to topic
Previous :: Next Topic
Author Message
Tom
Admin



Joined: 15 Dec 2001
Posts: 17835 | TRs | Pics
Tom
Admin
PostTue Mar 18, 2003 10:01 pm 
Not bad. FYI, right click activates the third image which you might not want it to do. Also, it doesn't work in NS4 (no button or alternate text shows up at all). NS4 is far from CSS compliant but unforunately a lot of people still use it. I grudgingly use it as the minimum standard for this forum since the lazy-b is still in the dark ages. rolleyes.gif

Back to top Reply to topic Reply with quote Send private message
Stomp
Terminally Indolent



Joined: 28 Jun 2002
Posts: 65 | TRs | Pics
Location: Bellevue
Stomp
Terminally Indolent
PostTue Mar 18, 2003 10:54 pm 
Tom wrote:
Not bad. FYI, right click activates the third image which you might not want it to do.
That bit is not up to me, unfortunately. I wonder if that's how the browser is supposed to behave, or just another charming quirk.
Tom wrote:
Also, it doesn't work in NS4 (no button or alternate text shows up at all).
NS4! It knows just enough about CSS to not show the alt text. What a doll. rant.gif huh.gif Okay, I think I exploited another unrelated shortcoming in NS4 to fix the problem. At least the alternate text shows up as it should now. Here's the link again, since we're on a new page.

# Stomp (fifty score key-tapping monkeys)
Back to top Reply to topic Reply with quote Send private message
Doofus
Guest




Doofus
Guest
PostTue Mar 18, 2003 11:08 pm 
With Internet Exploder 5.5, it worked the foist time Stomp. But then it was stuck on "3". I say make websites as compliant as possible with olde stuffe. Why, in my day we used lynx as a browser, and were mighty glad we could read the web. It's goofy to have to keep up with the flashy bells and whistles that are cosmetic. Content. Content, I say! We need good content, not confusing non-standard goofy fluff!

Back to top Reply to topic Reply with quote View IP address of poster
catwoman
Member
Member


Joined: 16 Dec 2001
Posts: 888 | TRs | Pics
Location: somewhere near Tacoma
catwoman
Member
PostTue Mar 18, 2003 11:13 pm 
I've only barely begun to try to understand style sheets. I'm a little confused with your example..... I mean, what's the "a#example"? Is that something that needs to be there? Would I have something else there? Or just that? Where does the HTML code part go? Is that in the body of the page or somewhere else? And, what's the "span.ns4sucks". I hardly think that's something I'd need to put in my page, but I don't get if it does anything. dizzy.gif

Back to top Reply to topic Reply with quote Send private message
Stomp
Terminally Indolent



Joined: 28 Jun 2002
Posts: 65 | TRs | Pics
Location: Bellevue
Stomp
Terminally Indolent
PostTue Mar 18, 2003 11:18 pm 
Quote:
I say make websites as compliant as possible with olde stuffe
Actually, that filthy little scratched-together demo page looks moderately decent in lynx. Standards compliance has nothing to do with flashy bells and whistles, it has to do with making a web page based on a set of strict rules, so that all browsers can look at it and reliably understand exactly what is being said. The problem with constantly catering to ancient browsers is that they are often broken, and in order to satisfy them you must make broken code. Ick. In fact, if you make compliant code, it should be possible to add all the bells and whistles you want while still maintaining support for less robust browsers, such as lynx. There are ways to give one web page alternate layouts based on what browser is displaying it, to play nice with broken browsers while not forfeiting your place in Internet Heaven (sinner!).

# Stomp (fifty score key-tapping monkeys)
Back to top Reply to topic Reply with quote Send private message
Stomp
Terminally Indolent



Joined: 28 Jun 2002
Posts: 65 | TRs | Pics
Location: Bellevue
Stomp
Terminally Indolent
PostWed Mar 19, 2003 12:40 am 
catwoman wrote:
I've only barely begun to try to understand style sheets.
Me too. smile.gif Hashing out the basics is probably beyond the scope of this forum, but that's never stopped me from prattling on before... As you may know already, the actual style sheet is usually (for the sake of the message) defined in a <style> tag inside your pages <head>. There you refer to other tags on the page by type and ID (or class). The format of a style sheet is:
Code:
tag { attribute: value; attribute2: value; } tag#id { attribute: value; attribute2: value; }
For instance, "a { style }" refers to every <a> tag, while "a#foo { style }" refers to an <a> tag with the ID "foo". Note that, like HTML, whitespace is ignored, so you can type it up however you wish, as you will see in my examples. Thus:
Code:
<style type="text/css"> a#example { display: block; width: 40px; height: 40px; background-image: url("one.gif"); } </style>
refers to:
Code:
<a id="example" href="http://www.google.com/"></a>
That tag can appear anywhere in your web page. The style sheet defines that the <a> tag of ID "example" should be displayed as a block (instead of just inline text), as having a height and width of 40 pixels, and containing a background image. To add the hover effect, simply add this to your <style> tag:
Code:
a#example:hover { background-image: url("two.gif"); }
":hover" is a special addition only to the <a> tag that allows it to have a different style applied when the mouse moves over it. You can look at the source of my example page to see how it all fits together. (View menu -> Source)
catwoman wrote:
And, what's the "span.ns4sucks". I hardly think that's something I'd need to put in my page, but I don't get if it does anything. dizzy.gif
I added an optional doohickey so that web browsers that don't understand style sheets will still display SOMETHING where the rollover image would usually be. By including:
Code:
<span style="display: none">Hidden text</span>
The text will be hidden from browsers that support CSS, and other browsers will ignore the <span> tag and display the hidden text anyway. Netscape 4, on the other hand, is dumb. It apparently doesn't look in the <style> tag at the top of the page, but it DOES obey the <span>, so you get nothing. I remedied the situation by putting the "display: none" in the <style> tag where NS4 doesn't look. Like this: HTML:
Code:
<span class="nameoftheclass">Hidden text</span>
Style sheet, in your <style> tag:
Code:
span.nameoftheclass { display: none; }
A class is like an ID, but you use a dot (.) instead of a hash (#) in your style sheet. Aside from that I don't know what the difference is, aside from matters of good taste. An ID is usually used to refer to a single item on the page, a class is usually used to refer to a type of item, of which there may be many on the page. http://www.w3schools.com/css/ has a proper CSS tutorial, and reference material, and such. It's all very simple. Like quantum physics.

# Stomp (fifty score key-tapping monkeys)
Back to top Reply to topic Reply with quote Send private message
Sore Feet
Member
Member


Joined: 16 Dec 2001
Posts: 6304 | TRs | Pics
Location: Out There, Somewhere
Sore Feet
Member
PostWed Mar 19, 2003 2:20 am 
Catwoman wrote:
I have photoshop but how does it do the code for me?
Okay. Long drawn out response, to bear with. If you're not well versed in Photoshop, this probably won't be much help, because it's just something else to learn, but just in case... NOTE - What you actually need for this to work is Image Ready, which comes with Photoshop (at least with version 6 and newer). I don't know if LE or Elements has the ability to do this. In photoshop, create a button for your "off" state, you can make it as simple or as complicated as you want. Be sure NOT to merge the layers. Once you've got the "off" state done, you're ready to dump into Image Ready (or, if you want, you can just draw the button in Image Ready). In Photoshop 6, there's a button at the bottom of the tool bar that switches over to Image Ready (click it). Once in Image Ready, you'll see that it looks almost exactly the same as photoshop. Go to Window > Show Rollover Here, you'll have multiple frames displayed in a linear fasion. The first one will be your "off" state. Click on the "create new rollover state" button along the bottom of the rollover window (it looks like a piece of paper with a folded corner). This makes a new frame with the "over" state. Making sure that the over frame is selected, you can now change the color of your text, background colors, layer effects, etc. to make the over state different from the off state. When you're done with the over state, repeat the process to create the "down" state. Assuming that you're at least a little experienced in Photoshop, if you're making a navigation system, you'll need to make sure that you've got seperate layers for each button that you want to apply a rollover state to (this also means that you can't just use a single line of text for three buttons either). When you've got all three states finished, then you're ready to export. Go to File > Save Optimized As... Specify a filename and a location that you want the files saved to. By default, all the images will be saved to a sub-folder called "images", so it's best if you save the HTML file in a folder all by itself. Hit save, and Image Ready creates three images based on the rollover states you made, and it places them in an HTML file, complete with all the code necessary for the rollovers to work. Then, open up the html file that Image Ready created, and cut and paste the Javascript, and the buttons (they should be between <a> tags) into the desired locations in your html file. I hope that helped (even if just a little). If this is a bit much for ya, you might want to look into some books. A really good one is "Web Design in a Nutshell" published by O'Reilly Press. There's a great rollover script in there that doesn't make a mess of your code.

Back to top Reply to topic Reply with quote Send private message
catwoman
Member
Member


Joined: 16 Dec 2001
Posts: 888 | TRs | Pics
Location: somewhere near Tacoma
catwoman
Member
PostWed Mar 19, 2003 8:01 am 
Actually, I use Photoshop constantly with my images and have gotten quite good at image editing. I've never gone into ImageReady, though, so I guess I need to explore there. Thanks for all the assistance! I really do appreciate it. I'll work with this bit of help and see where it takes me and let you know how I do. smile.gif

Back to top Reply to topic Reply with quote Send private message
catwoman
Member
Member


Joined: 16 Dec 2001
Posts: 888 | TRs | Pics
Location: somewhere near Tacoma
catwoman
Member
PostWed Mar 19, 2003 10:35 am 
Sore Feet - I've gone into ImageReady and created the rollover buttons. Very cool, by the way! biggrin.gif When I saved optimized as... I saved them into their own file and their turned up the three gif files. But where do I find this html file?

Back to top Reply to topic Reply with quote Send private message
Sore Feet
Member
Member


Joined: 16 Dec 2001
Posts: 6304 | TRs | Pics
Location: Out There, Somewhere
Sore Feet
Member
PostWed Mar 19, 2003 12:24 pm 
catwoman wrote:
Sore Feet - I've gone into ImageReady and created the rollover buttons. Very cool, by the way! biggrin.gif When I saved optimized as... I saved them into their own file and their turned up the three gif files. But where do I find this html file?
The html file should have the same name as the gif files, and it should be located one folder up from the location of the images. However, if you specified to save the images ONLY, then you'll have to go back into Image Ready and save it again, making sure that you've got HTML and IMAGES selected when you save it. If you didn't change the settings to just save the images, then just run the Find program (Start Menu > Find), and search for the filename that you saved the files as.

Back to top Reply to topic Reply with quote Send private message
catwoman
Member
Member


Joined: 16 Dec 2001
Posts: 888 | TRs | Pics
Location: somewhere near Tacoma
catwoman
Member
PostWed Mar 19, 2003 1:29 pm 
woo hoo! I'm getting there! This is so cool! biggrin.gif up.gif Now to just get it in my document!

Back to top Reply to topic Reply with quote Send private message
catwoman
Member
Member


Joined: 16 Dec 2001
Posts: 888 | TRs | Pics
Location: somewhere near Tacoma
catwoman
Member
PostWed Mar 19, 2003 2:46 pm 
This is so awesome! Check out my buttons! pcppa website I still have a ways to go to clean up this site, but it's getting better! Love the buttons! Thanks so much for your help!!!!! drink.gif PS. the little guy above is apparently either drinking motor oil or guiness. Can I get a little guy who drinks IPA's or how about wine?

Back to top Reply to topic Reply with quote Send private message
Tom
Admin



Joined: 15 Dec 2001
Posts: 17835 | TRs | Pics
Tom
Admin
PostWed Mar 19, 2003 5:26 pm 
I'm not crazy about the mouse over style you're using but I guess beauty is in the eye of the beholder. biggrin.gif Also, the images are not pre-loading properly due to the fact that you have mulitple preloadImages() functions in the code. You'll want to consoldate them into one function, i.e.
Code:
var preloadFlag = false; function preloadImages() { if (document.images) { photogsbutton_01_over = newImage("images/photogsbutton_01-over.gif"); photogsbutton_01_down = newImage("images/photogsbutton_01-down.gif"); joinbutton_01_over = newImage("images/joinbutton_01-over.gif"); joinbutton_01_down = newImage("images/joinbutton_01-down.gif"); codebutton_01_over = newImage("images/codebutton_01-over.gif"); codebutton_01_down = newImage("images/codebutton_01-down.gif"); schedulebutton_01_over = newImage("images/schedulebutton_01-over.gif"); schedulebutton_01_down = newImage("images/schedulebutton_01-down.gif"); printbutton_01_over = newImage("images/printbutton_01-over.gif"); printbutton_01_down = newImage("images/printbutton_01-down.gif"); preloadFlag = true; } }
Quote:
PS. the little guy above is apparently either drinking motor oil or guiness. Can I get a little guy who drinks IPA's or how about wine?
No, but you can create you own animated gifs in image ready like I did with this one. winksmile.gif

Back to top Reply to topic Reply with quote Send private message
catwoman
Member
Member


Joined: 16 Dec 2001
Posts: 888 | TRs | Pics
Location: somewhere near Tacoma
catwoman
Member
PostWed Mar 19, 2003 6:15 pm 
Thanks, Tom. I think I fixed it like you said. It seemed to load just fine for me, though. And it still seems to load the same for me. Does it load better for you? Anywho, it's probably a good thing to know. As far as the beauty of them goes..... ahem, I've spent so much time on them and I'm just happy to have them up and working. Refinement will come, in time. That site is still not great, but you have no idea how rudamentary it was just a couple months ago. Nobody in the org wanted to deal with the site yet everyone complained about it. So I volunteered for the position, even though my mentors warned me it would take too much of my time away from getting my business going. They're right about that, but it's helping me learn more and get more involved, too. So far, if they don't bitch, I kinda like having some control. hmmm.gif

Back to top Reply to topic Reply with quote Send private message
Newt
Short Timer



Joined: 21 Dec 2001
Posts: 3176 | TRs | Pics
Location: Down the road and around the corner
Newt
Short Timer
PostWed Mar 19, 2003 7:01 pm 
Lookin good catwoman. up.gif up.gif NN smile.gif

It's pretty safe to say that if we take all of man kinds accumulated knowledge, we still don't know everything. So, I hope you understand why I don't believe you know everything. But then again, maybe you do.
Back to top Reply to topic Reply with quote Send private message
   All times are GMT - 8 Hours
 Reply to topic
Forum Index > Full Moon Saloon > web design question
  Happy Birthday speyguy, Bandanabraids!
Jump to:   
Search this topic:

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum