Messages

I've started putting together another document that will provide a list of resources specifically regarding Cascading Style Sheets (CSS). I'm not sure if I'll have this document ready by this weeks meetup, but if there is interest I will certainly make it available at some point.

While I was putting this document together I came across a really good resource for those just starting out with CSS. The "Web Development Resources" document will contain many more links about learning CSS, but I felt this was a pretty good resource and I wanted to share it with all of you now:

Learning CSS by Paul Scrivens of Whitespace

If you want to learn CSS this would be a great place to start. If you have any questions regarding CSS, then post them to this discussion and I (or any other members) will do my (our) best to help you along.

I hope we can develop more discussion like this for our own reference and for future members.

W3C (World Wide Web Consortium) develops standards and guidelines which help developers make their designs compatible with different browsers amd user limitations.


This is the link for validating your stylesheets:

CSS Validator

W3C also offers some links for learning how to create and use stylesheets:

CSS Links Page

Very timely information. I am just trying to get a grip on CSS and web standards. I am working thru a book that's been pretty helpful so far, and its nice because it covers a lot of basics, too (which I seem to have, um, skipped over).

Web Designer's Reference: An Integrated Approach to Web Design and XHTML and CSS by Craig Grannell.

http://www.friendsofe...

I'm going to start building a freebie site for a friend using this approach so look for questions from me! (Who knows maybe I'll actually use the local testing server Derek help me get set up!!)

See you Thursday -

Nancy

Derek,
This is a great resource for us starting out. Thanks so much.
Jo

Nancy,

I've definitely heard of that book, but I've never had a chance to check it out. I'll have to see if I can get my hands on a copy soon.

I also highly recommend these two books by New Riders Press:

Designing with Web Standards by Jeffrey Zeldman of The Daily Report
(Half web standards philosophy, half practical applications.)

Web Standards Solutions by Dan Cederholm of SimpleBits
(Mostly practical applications, very good.)

My copy has yet to arrive, but Dan Cederholm has another book that has been highly recommended to me:

Bulletproof Web Design by Dan Cederholm
(Apparently another very practical book.)

If you've got questions send them my way. I'll do my best to answer them!

---

Jo,

I'm glad to hear that you're finding this useful. I'll bring a handout with some more resources to the meetup tonight.

Sorry I missed the meeting last night, I was just too bushed! The good news is that we are busy with work and got our first local client. He bought a place on Cortez called Desperado's and is totally re-doing it as Frontier Billiards. Owner has some very creative ideas so we are happy he found us for illustration & probably web work.

Thanks again for your offers of help. At some point I will take advantage! And I'll try harder to make it to next month's meeting.

nancy

Well Derek I am stuck on something. (This is about 5 months after your original post so I hope you see this.)

If you have the time I could REALLY use your help. I am working on a site for some friends who are starting a microbrew business, and being pretty much a newbie at CSS I am having trouble getting my navigation list to display properly in Safari, Firefox (Mac & PC), and of course IE5 for Mac (this I could shine on). Its fine in IE6.

I am wanting the navigation which is a list to display on top of the header background image. For some reason the list displaces the image in the problem browsers, pushing it lower. In the past I have had advice to add 1px padding at the bottom of the div to correct this, but its not working now and not what I want anyway.

Here's the links:
http://www.oceansidea...
http://www.oceansidea...

Any advice you or anyone else has would be greatly appreciated!!!

thanks

Nancy

So far......I have switched to using absolute positioning and this is helping. Except in IE5 (Mac) where my inline list doesn't go horizontal. I think this is the float property going wrong.

Anyway, maybe this will do the trick.

http://www.oceansidea...
http://www.oceansidea...


nancy

For some reason (that reason escapes me now) IE/Win renders margins differently than the other browsers. So, to fix your problem use padding to position your list instead of margins. It will still look the same in IE/Win, but the problem will be fixed in Safari, Firefox, etc. Actually the problem is with IE/Win and not the other browsers, which are rendering correctly. Personally I woudn't worry too much about IE/Mac, it's a dead browser. I would be more concerned with IE/Win 5.0 and IE/Win 5.5. Anyways, just to be clear here is your code as it is now:

#nav ul{
margin-right: 30px;
margin-top: 100px;
list-style: none;
}

And here is how I am suggesting changing it:

#nav ul{
paddding-right: 30px;
padding-top: 100px;
list-style: none;
}

I tested this in Safari/Mac, Camino/Mac, IE/Win 6.0, IE/Win 5.5, IE/Win 5.0 and Firefox/Win and it renders as you want it to.

I hope this helps, let me know if you have any more questions.

- Derek

Hi Nancy,

Again, I wouldn't worry about IE/Mac so much, but if you want to resolve this issue you will need to remove the float on the <li> elements and then float the <ul> and <a> elements. Also, the padding on the <li> elements (after changing the floats) causes some issue in Firefox, so remove the padding from the <li> elements and then you can apply it to the <a> elements if you wish. Here is the code as you have it now:

ul{
list-style: none;
position:absolute;
top:105px;
left: 200px;
width: 500px;
}

li {
display: inline;
float:right;
padding: 5px;
}

a{
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
display: block;
padding: 5px 0px 0px 6px;
}

And here are the changes I am suggesting:

#nav ul{
padding-right: 30px;
padding-top: 110px;
list-style: none;
float: right;
margin: 0;
}

#nav ul li {
display: inline;
}

#nav a{
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
display: block;
padding: 5px 0px 0px 6px;
float: right;
}

Also, you might want to zero out the margins on the <ul> element (as seen in my code above). And note that I am using the padding as I showed you before as opposed to absolute positioning.

- Derek