Conversation with emilymarthaclark at 7/20/2011 8:07:19 PM on AnkiKurayami (aim)

(20:07:19) EmilyMarthaClark: Hey, I have a question!
(20:07:19) AnkiKurayami <AUTO-REPLY>: Work work workity work
(20:07:29) EmilyMarthaClark: I am trying to teach myself the basics of CSS.
(20:07:40) EmilyMarthaClark: I remember you're really good at it, and were able to do things with it I couldn't figure out before.
(20:07:49) EmilyMarthaClark: Do you know how to position images exactly using CSS?
(20:07:53) EmilyMarthaClark: (Can't figure it out at all)
(21:42:55) AnkiKurayami: Generally speaking you would do that with div layers
(21:46:17) EmilyMarthaClark: Is that difficult?
(21:47:19) AnkiKurayami: Nah. You name the div and define its attributes in the css file. Then, when you're writing the html for the page, you just call out that particular div id, drop the image into it, and bam presto it's going to show up where you told it to
(21:48:08) EmilyMarthaClark: I want to have an image at the top and bottom corners of this menu.
(21:48:22) EmilyMarthaClark: I want part of it to come off the edges of the paragraph.
(21:48:45) EmilyMarthaClark: I could do this easily with just images, but then it would take longer to load the page, and anyway, I'd like to learn to do things more elegantly.
(21:49:36) AnkiKurayami: ::nod:: Having a little trouble visualising without references
(21:49:42) EmilyMarthaClark: (Nods)
(21:49:45) EmilyMarthaClark: Let's see . . .
(21:50:00) EmilyMarthaClark: Let me see if you can receive file transfers from me
(21:50:07) AnkiKurayami: I should be able to
(21:50:37) EmilyMarthaClark is offering to send file home.gif
(21:50:50) EmilyMarthaClark is offering to send file links.gif
(21:51:22) EmilyMarthaClark: If you can receive those, they're the top and bottom of the menu, as made purely in images.
(21:51:28) EmilyMarthaClark: Hmm, don't seem to be working
(21:51:44) Starting transfer of links.gif from EmilyMarthaClark
(21:51:44) Transfer of file links.gif complete
(21:51:49) EmilyMarthaClark: Oh, hey, the bottom one sent!~
(21:51:51) AnkiKurayami: Resend the first one?
(21:51:51) EmilyMarthaClark: Weird.
(21:51:53) EmilyMarthaClark: Sure.
(21:51:57) AnkiKurayami: I had issues with my program
(21:52:05) EmilyMarthaClark is offering to send file home.gif
(21:52:10) Starting transfer of home.gif from EmilyMarthaClark
(21:52:10) Transfer of file home.gif complete
(21:52:13) EmilyMarthaClark: Oh, good, so you can receive stuff from me! Yaaaaay!
(21:52:27) EmilyMarthaClark: Does it make more sense what I was saying now?
(21:52:56) AnkiKurayami: Ah, yeah, that makes sense
(21:53:08) EmilyMarthaClark: Is that possible to do?
(21:53:22) AnkiKurayami: Am I correct in assuming that this would be a left-hand (or right-hand) navigation pane that will show up on all pages?
(21:53:34) EmilyMarthaClark: Left-hand navigation panel, correct.
(21:53:35) AnkiKurayami: And that it won't change in overall length?
(21:53:42) EmilyMarthaClark: Actually . . .
(21:53:48) EmilyMarthaClark is offering to send file index.html
(21:53:54) Starting transfer of index.html from EmilyMarthaClark
(21:53:55) Transfer of file index.html complete
(21:53:57) EmilyMarthaClark: Here's what I have so far for the HTML
(21:54:00) EmilyMarthaClark: Oh, you'll need the css file too
(21:54:12) AnkiKurayami: Heh, that would be helpful
(21:54:16) EmilyMarthaClark is offering to send file main.css
(21:54:21) Starting transfer of main.css from EmilyMarthaClark
(21:54:21) Transfer of file main.css complete
(21:54:52) EmilyMarthaClark is offering to send file title.png
(21:54:55) EmilyMarthaClark: And the title image.
(21:54:57) Starting transfer of title.png from EmilyMarthaClark
(21:54:57) Transfer of file title.png complete
(21:54:59) EmilyMarthaClark: The rest still need creating.
(21:55:56) AnkiKurayami: ::nod::
(21:56:27) EmilyMarthaClark: What would you do to the HTML to be able to position the images correctly?
(21:57:11) EmilyMarthaClark is offering to send file flower.png
(21:57:15) Starting transfer of flower.png from EmilyMarthaClark
(21:57:16) Transfer of file flower.png complete
(21:57:23) EmilyMarthaClark: In case you want to play with the actual code, there's an image to do it with.
(21:57:49) EmilyMarthaClark: I may make different images, but those look decent now, and will do well to determine positioning regardless of whether I make different images later.
(21:58:25) EmilyMarthaClark is offering to send file flower2.png
(21:58:28) EmilyMarthaClark: There's an upside-down flower.
(21:58:32) Starting transfer of flower2.png from EmilyMarthaClark
(21:58:32) Transfer of file flower2.png complete
(21:59:03) AnkiKurayami: ::scans html and css files::
(21:59:37) AnkiKurayami: <small> and <big> .... not familiar with those
(22:00:12) EmilyMarthaClark: Oh, simple HTML things. Make the font size bigger or smaller by one.
(22:00:39) AnkiKurayami: Ah. Probably deprecated code, but not necessarily
(22:00:50) EmilyMarthaClark: I usually use them instead of trying to remember which font size is which. (Wry grin.)
(22:01:46) AnkiKurayami: Do you want some stream-of-consciousness comments from me as I look at this?
(22:01:58) EmilyMarthaClark: Sure.
(22:02:53) AnkiKurayami: You've got things in your html which can (and should, if you want w3 compliant code) be handled more efficiently in css.
(22:03:40) EmilyMarthaClark: What sort of things?
(22:04:46) AnkiKurayami: body background color (seems to be duplicated), font sizing....
(22:06:00) AnkiKurayami: Some of the paragraph classes you have could also probably be divs instead
(22:06:52) AnkiKurayami: Looks like you have two points with </body></html>
(22:07:08) AnkiKurayami: Shouldn't cause problems, but has the potential to
(22:07:19) EmilyMarthaClark: You're right, I missed that. I'll pull out the earlier ones.
(22:10:23) AnkiKurayami: You have table code within your css file. I'm not sure if it's supposed to be there or not.
(22:12:38) EmilyMarthaClark: Oh, yeah. That's just there because I was vaciliating between menu of images and menu of CSS.
(22:12:53) EmilyMarthaClark: I yanked it from the HTML file, but I didn't want to lose it, so I dropped it at the bottom of the other file I was working on. Ignore it.
(22:12:59) AnkiKurayami: ::nod:: Okay
(22:14:18) EmilyMarthaClark: Thank you soooo much for looking at this!
(22:14:27) EmilyMarthaClark: I remember you having l33t CSS magic. ;P
(22:14:42) AnkiKurayami: More like more experience. ^_^
(22:16:07) EmilyMarthaClark: (Grin)
(22:17:03) AnkiKurayami: Let me drop in some tweaks.
(22:19:17) EmilyMarthaClark: Okay.
(22:19:29) AnkiKurayami: ^_^ yay for code fun!
(22:19:33) AnkiKurayami: Ahem. ^_^
(22:22:19) EmilyMarthaClark: (Grin)
(22:22:21) EmilyMarthaClark: Do you like coding?
(22:22:56) AnkiKurayami: I like organising things. And that's pretty much what html and css are all about
(22:23:47) EmilyMarthaClark: Cool!
(22:24:14) EmilyMarthaClark: I don't like coding. It's more along the lines of "Arrrghghghhghghhhh, why did this just break?!" to me. :P
(22:24:45) AnkiKurayami: Oh, I will still have periods of time where that happens. But I feel great satisfaction when I ferret out why it happened and how to fix it.
(22:24:53) EmilyMarthaClark: And then I stick with things I already know, and it works, but . . . it's messy and inelegant, and people mock me for it. (Sigh.)
(22:24:54) AnkiKurayami: I like untangling skeins of yarn, too
(22:25:06) EmilyMarthaClark: Cool!
(22:25:10) EmilyMarthaClark: So it's like puzzle-solving for you.
(22:25:15) AnkiKurayami: Yeah, basically
(22:25:22) EmilyMarthaClark: That's cool.
(22:25:25) EmilyMarthaClark: I don't enjoy debugging.
(22:25:43) EmilyMarthaClark: But now that you say why you like it, I can see why people do. That explains a lot about why some people like programming.
(22:25:44) EmilyMarthaClark: (Grin.)
(23:14:21) AnkiKurayami: ::pokes at code::
(23:18:53) EmilyMarthaClark: Oh, good
(23:18:54) EmilyMarthaClark: Thank you!
(23:19:01) AnkiKurayami: ^_^
(23:19:06) EmilyMarthaClark: What have you been poking at?
(23:19:22) EmilyMarthaClark: I figured you'd be able to share valuable advice with me.
(23:19:30) EmilyMarthaClark: And I'm hoping to learn a little bit more with each new website I do.
(23:19:39) AnkiKurayami: Setting up div layers, sticking the flowers in, etc etc ^_^
(23:19:50) EmilyMarthaClark: I can't handle taking a huge new step forward each time, but I can handle a few new steps each time. So . . .
(23:19:51) EmilyMarthaClark: Thank you!
(23:19:53) EmilyMarthaClark: You rule.
(23:20:13) AnkiKurayami: Putting notes in the css file to hopefully explain what things do
(23:23:54) EmilyMarthaClark: Oh, thank you.
(23:23:59) EmilyMarthaClark: That is really helpful.
(23:24:14) EmilyMarthaClark: Then I can hopefully learn from it, and even be able to change things as needed.
(23:25:34) AnkiKurayami: Anything contained in /* */ is comments
(23:25:38) AnkiKurayami: At least in the css file
(23:25:52) AnkiKurayami:  are for comments in html
(23:26:13) EmilyMarthaClark: Oh! So there are specific tags for it?
(23:26:47) AnkiKurayami: Yeah. Comments are useful and important. But you don't want them actually showing up
(23:28:42) EmilyMarthaClark: Agreed.
(00:29:54) AnkiKurayami: How attached are you to having the content area resize (width) based on browser window size?
(00:30:50) EmilyMarthaClark: Not particularly.
(00:30:57) EmilyMarthaClark: It's just the best way I know to get it to look good.
(00:31:04) AnkiKurayami: Okay, that makes things easier
(00:31:09) EmilyMarthaClark: If you can make it work so that it looks exactly the same in all windows, that would be cool.
(00:31:43) AnkiKurayami: I can fix the dimensions
(00:36:42) EmilyMarthaClark: Okay.
(00:36:52) EmilyMarthaClark: Have you been working on it this whole time?
(00:36:54) EmilyMarthaClark: (Amazed)
(00:37:02) AnkiKurayami: Yeah
(00:37:04) AnkiKurayami: ^_^
(00:41:10) EmilyMarthaClark: Thank you!
(00:41:29) AnkiKurayami: You're welcome
(00:41:42) EmilyMarthaClark: I guess it's a good thing I sent you the whole thing to work with.
(00:41:46) EmilyMarthaClark: ()Grin?)
(00:41:49) AnkiKurayami: Indeed
(00:41:57) EmilyMarthaClark: (Grin)
(01:09:41) EmilyMarthaClark: Oh, yeah, incidentally, here is an image that's currently at the bottom:
(01:09:48) EmilyMarthaClark is offering to send file footer.gif
(01:09:56) Starting transfer of footer.gif from EmilyMarthaClark
(01:09:57) Transfer of file footer.gif complete
(01:10:07) EmilyMarthaClark: So you can see how I was hoping to have flowers on it, too.
(01:10:15) AnkiKurayami: Okay
(01:21:32) AnkiKurayami: Well, I've got it working in Firefox, but it's being stupid in IE.
(01:24:49) AnkiKurayami: But I need bed for now
(01:27:10) AnkiKurayami: So I will work on the IE problem tomorrow
(01:29:15) AnkiKurayami: ::grumble:: Stupid non-standards compliant browswer....
(01:42:20) EmilyMarthaClark: Thank you, Heather.
(01:42:20) AnkiKurayami <AUTO-REPLY>: To sleep, perchance to dream.
(02:50:30) EmilyMarthaClark: http://www.twofrequencies.com/mindex.html
(02:50:30) AnkiKurayami <AUTO-REPLY>: To sleep, perchance to dream.
(02:50:57) EmilyMarthaClark: Did she do what we're trying to do to make her bubbles go in some of those places?
(23:11:53) AnkiKurayami: No, her menu is made with images
(23:12:04) AnkiKurayami: So the bubbles are static
(23:30:34) AnkiKurayami: I hate IE