This is a blog that was created to talk about web design. The both of us hope people can learn from this, even learn something ourselves maybe.

Friday, December 31, 2004

Shadow Effects, Methods

Just wanted to run over shadow effects, so get ready to be dazzled! Woo :) Ok I found these a long time ago, and it's a popular site anyway but A List Apart is a treasure trove, great place to sit and absorb. And funny to say, I was reading today somewhere and some guru had quoted Picasso who had mentioned all good artists copy, and great artists steal! Don't be afraid to copy something directly and modify it to your needs, because trust me, someone is going to do it to you. Consider it part of the way the web works.

The Onion Skinned Drop Shadow Effect
Come on that's a great name! The effect works rather well too but personally I only used it once or twice, I had some positioning problems that weren't related to the effect itself that I couldn't resolve at the time at my level of knowledge at the time. Try it out though, their instructions as always, are direct and to the point.

CSS Drop Shadows I (and II) Fuzzy Shadows
These are both good methods, I used them a lot. In particular they make strong use of PNG files with their GIF equivalents. I tend to try to use PNGs if I can but I also remember on some commerce work, that the mainstream might not have browsers advanced enough to read them properly (not even IE5 for example, and IE 5.5+ has to be forced to use filter).

I have been working on a recode of another project and using a different method to achieve the shadow effect by using positioned DIVs and tacking on the shadow sections as images. The P is forced to be a size based on the box container thus containing any text or images inside. I'll post when I finish it.

Needless to say you might have seen these shadow effects in a lot of places - they do look nice and do add to the overall image of the site. But then again it depends what you put in there too or what kind of site it is.

Thursday, December 30, 2004

Mel, XHTML continued? ;)

Ok Mel I had a few more thoughts after our conversation the other day, so here goes :) These are some of the things that need to be considered when moving from pure HTML to XHTML (loose, transitional, or strict):


  • ALT attribute (please don't say ALT 'tag'); this is REQUIRED on IMG tags - it's also a good practice to add a TITLE attribute too, the same as ALT

  • Tags without ending tags REQUIRE '/' (i.e., <br> becomes <br />

  • The FONT tag is deprecated, move all font styling to stylesheets!

  • The TARGET attribute is deprecated, the validator will snag it every time. The solution is to use JavaScript and event handlers: onclick="this.target='_blank';return true" this example sets the target to '_blank'

  • lower-case; ALL tags, attributes, properties etc., are to be in lower-case



I'll try to keep this updated as I remember more, and post some good links for everyone. It's not all that much different to be honest, just a few alterations are all that's required.

Wednesday, December 29, 2004

DIV min-height

I don't know if you use DIVs a lot but I do. I migrated from tables a long time ago, and actually use tables for what they were designed for (displaying tabular data). Anyway, DIVs have their shortcomings of course, among which is the disparate support that competing browsers have for css attributes. min-height is one of these. However, along comes Dave Shea, and thankfully he has discovered a method of ensuring total support for min-height among all browsers! Take a look at his article on the subject, very informative and VERY useful.

To Validate, or Not To Validate?

Catchy eh? I borrowed it from a countryman of mine. Anyway, over the past couple of years I've been really strong on standards. Everything I do has to validate, if I can help it. Some sites, such as PHP-based CMS don't validate, and never will. BUT, if I design a site myself, write it, I tend to try to make it strictly XHTML 1.1, and CSS2 compliant if possible. Here are some sites I think you should consider:


Why bother, I hear you ask? Well for one I'm a bit of a perfectionist; if it CAN validate, I'll make it validate. However, as we are all human, even the designers, there are some oddities, specifically when you start to apply hacks here and there to make certain browsers conform to those standards (*cough IE cough*). I take a little bit of pride in the fact that my code conforms to a level of standard that we should all live up to.

(X)HTML validation depends a lot on the DOCTYPE you are using, and in fact it triggers off of the doctype on how strict it's standards are (the W3.Org Validation Service, I'm talking about here). Examples of strange behaviour: XHTML requires tags with no closing tag end in '/', some tags no longer exist in the XHTML specs, some tags can't exist without being enclosed in others (FORM is a good one), some attributes of tags are deprecated ('target' in a FORM tag is an example). Take the time to add in links to these services so people can see for themselves that your site validates, or each page does, it DOES matter :)

Randomly Displayed Images with PHP

I found this interesting article at Sitepoint.com which tells how to build a randomly displayed multiple picture showcase using PHP and HTML. This may come in useful for me in the future, I thought it might for some of you also.

Tuesday, December 28, 2004

Flash and Javascript; Brothers

For those of you who may not know it flash's code "Actionscipt" and Javascript are very closly realted.

I wanted to see how close they were to each other and according O'reily web Center it is because both Languages Derive from the ECMA-262 (ECMAScript) Standard.
Which of course as the site goes on to say makes their syntax's almost identical. Which is nice for me sice I haven't done to much Javascript but have done a lot of Actionscrip. The cross over should be fairly easy I would imagine.

Re: Sites to gawk at...

Yeah so I was pawning thru some of the sites Rich pu tup and I went to the spacefx one. nice site but he really should have sent you here
This is awesome, I don't think I could do this yet, with what I know of flash which is nice because it shows so much room for growth. It also shows how smooth flash can be with our insane load times.

Sunday, December 26, 2004

Integrating Flash Into XHTML (and validating!)

Lately, Darky and I have been working on a project, which will involve writing a Flash section into the XHTML page. Since flash isn't "standards" compliant, there are several methods to use to integrate it into the page. I read a small section on A List Apart about it a few months ago and then a couple of days ago, I found this amazing article. SO, if you want to maintain Standards Compliancy, and validate, this is the way to go!

Saturday, December 25, 2004

PNG support

I moved this to a separate post, because PNG deserves it's own section. I was working on cross-browser PNG support, which I got working, thanks to a wonderful article over at A List Apart. I works just beautifully, and I will post the results when I finish up the site. Discuss it if you want, few people work with PNG's, preferring to work with GIF's for transparency, or JPEG's because they're used to it.

Next, you should be aware of behaviours which allow you to quickly add a piece of code for IE. I have a lot of links for PNG but this by far is the most useful: PNG Behaviour

Happy

Happy Christmas, Hanukah, Kwanza, or whatever you want to call it, hell, Saturnalia if you want to. I don't think it matters much, it's generally a time of the year when people celebrate anyway, regardless of what it's called. I spent the day watching movies, drinking, having a good laugh at the dogs, watching the rain pour down, and working. Yeah yeah, I know, working. EDIT: post moved to a new one, about PNGs.

Simulated iFrame / Window

I found this yesterday while looking for information on customizing iFrames. This is a method of simulating an iFrame while not using one, but instead, constructing something similar (or even "better") using divs and css. It's quite elegant and IMHO can be far more useful. Css can be used to tailor it beautifully with background images, and for IE, scrollbar customization.

Friday, December 24, 2004

Just a few sites to gawk at!

I was browsing this morning and I found a couple of sites definately worth taking the time to browse through. The first is a ipod-based site which is innovative and to the point, it makes use of the space and uses a rather vivid color for the background. The second site is a design studio called face3media which I think I might steal the concept from, again it uses the space and it's quite simple. Finally, this beautiful site (made with Flash) makes me drool, and it should make you drool too!

Wednesday, December 22, 2004

Are you standards compliant, or just compliant?

Hell, I'm not even sure anyone can be totally standards compliant. I try hard as possible to make sure my sites look good in IE and Netscape, and then Mozilla, and now we have Firefox. So the other day I'm browsing along, and someone asked if it looked the same in Opera or Safari; come on, how am I supposed to know? I don't own a Mac, I don't even know anyone who does!

I want to wake up tomorrow and read on HTMLforums that suddenly, Microsoft announced a new patch that makes their browser Standards compliant! There's as much chance of that as Italians announcing they've landed on Mars.

Hello Blog

Hello people!

rrd put me up to this never really posted in a "blog" before. Have used forums heck I even run one. So not all of this is new to me. I am a graphics guy, with an aptitude for web design although I need to get a handle on the new stuff.

Darky

How to center a div

Just a quick note on several methods of centering divisions. I'm sure that many of us know how to center a table (align='center') but divisions are slightly different. Firstly, there is no foolproof method, because of the different browsers and their varying levels of support for W3C standards.

1) Negative margins;

This relies on positioning the main division 50% across the page so the left side is in the center, and then changing the left margin to a negative value equal to the sum of half the width of the division, the thickness of the left padding of the division, and the thickness of the border on the left side (confusing eh?).


body {
margin: 0px;
padding: 0px;
}

div#main {
position: absolute;
left: 50%;
width: 600px;
margin-top: 50px;
margin-left: -316px;
padding: 15px;
border: 1px solid #000000;
background-color: #eeeeee;
}


In the above example, the main division is absolutely positioned 50% across the page, and then the left margin is set to -316px, ie. -((width/2) + left padding + left border) = -((600/2) + 15 + 1) = -316

2) Auto-Width margins;

This is the easiest of the two methods, but is unfortunately not directly supported by Internet Explorer. Never fear though, as there is a workaround built into this method in order to achieve the effect in the Microsoft browser.

It works by secifying the width of the central column of the page (in pixels or as a percentage) and by setting the margins of the column to an automatic value. In order to deal with the shortcomings of Internet Explorer, it is necessary to introduce a text-align: center; property to the body element. This, however, results in all of the text on the page also being centered, and so a text-align: left; is added to the CSS for the centered column.


body {
margin: 50px 0px;
padding: 0px;
text-align: center;
}

div#main {
width: 600px;
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px solid #000000;
background-color: #eeeeee;
}


In the above code, one division is used to contain the main text of the page and is given id="main" as an attribute.

Tuesday, December 21, 2004

Cyber Mingling

A small business person used to go to events to mingle at an attempt to find new clients/customers. Now everyone is online. Cybermingling. Its just too easy. You don't have to dress up and go be nice to all the stiff suits and put up with this persons older wife hitting on you or any of that crap. Everyone, EVERYONE is online. You can find any group online and get clients this way. I just miss GETTING DRUNK because NO person online can buy me a drink, lol. Email that martini would ya? Extra dry, thanks.
And this is what I think of that: http://fun.from.hell.pl/2003-11-24/bubblewrap.swf

Radio Killed The Err...

I don't know about you, but I have a sizable music collection for my winamp, easily several Gb. So tonight Jan asked me if she could listen to the radio on her computer, to which I answered yes. So I open up Windows Media Player for her, and connect to the local radio station through it. Do you know I had never done that? Not even on winamp (I tried once, didn't connect). Unbelievable. So they bitch about people downloading music, copyright infringement, but they offer free music in online radio stations... ? O K.

Great Sites!

Just wanted to start the ball rolling. Edited the side panel a little bit so I can add individual links to great sites. Since we're all new at this: Click on Template on the top tab bar (or use a tab in Firefox / Netscape), this opens up the editable template, please be careful. You will find a section called "#sidebar", go further down until you see the blogger.com link. Then below that, add:


< p >< a href="blah blah" target="_blank" >Link name< /a >< /p >< /code >

(obviously, change the href link, and remove the spaces to protect the innocent)

Of course, this is simply HTML coding, just remember to use the Preview button to check it first before consigning it to the digital deep (hey, that sounds good!).

Comment if you need any more help.

Signing In

Hi! This is rich signing in. Just want to say I have pretty much finished the recode of my latest recode :) It's my web design site, and I thought it should be simple, NOT scroll except for the data section, and be validated. Validation is not quite there yet, the H2/H3/H4 tags don't validate in XHTML1.1