Learning CSS

[PAlexC]

I really am out of the loop when it comes to web design nowadays. I had an interview yesterday and the guy asked me what kind of wireframing experience I had. I was totally dumbfounded and couldn't even BS my way through it.

Go to the bookstore, get a cup of coffee, browse through the computer section and pick up an O'Reilly book and maybe 1 or 2 others. CSS is changing, but the basics still apply. There's no shame in starting out with a "for dummies" book.

As for wireframes, they're talking about their production process. Wireframing is a functional mock-up with a near-final layout, but no design elements. It's meant to give stakeholders an idea of how the site will work and be presented to the user, as well as iron out any UI issues.

Here is a pretty good tutorial on doing functional specifications that you should familiarize yourself with.

One of the things you can emphasize in your interviews is the amount of time you spend learning things on your own. (If you do.) If you're the type of person that keeps on top of things, what you don't know isn't as big of a strike against you.

At my last job I provided all the technical expertise and knew NOTHING when I started, and had no mentoring. After seeing my resume and talking to people, they really don't care what I don't know, they care about what I'll learn that they aren't even doing yet.

[Visionray]

sweet, thanks for all the links guys!

[japangreg]

Good all-around resource: Web Developers Handbook

[LiquidGuy]

There are 3 basic CSS hacks that will stop you from ripping your hair out re: IE 6.

1. The Star HTML Hack
2. The Holly Hack
3. position: relative;

Design for Firefox, test for IE. Most of your errors will be the result of IE and hasLayout.

As for books, I highly recommend Andy Budd's CSS Mastery, but it's geared for those that already know the basics. However, a reading session should take care of that end.

[Frets]

Bleh

Design in flash run anywhere.

[mg33]

If you don't already have the WebDev toolbar for Firefox, download it and start working with it to code CSS. It's so nice to have your HTML page open, then edit the CSS live right in front of you. Helped me tremendously. Learning CSS, there's tons of trial and error, changing this number and that number and lots of rearranging.

Just finished up my band's new site last week, it was the first site I completely coded without Dreamweaver or tables using CSS layout. There are a few things I still need to iron out (such as preloading the nav rollovers through the CSS so they don't at first show a blue rectangle) but overall quite pleased with it and learned much more.

I went to an Eric Meyer seminar here in Chicago earlier this year, very good day. I learned quite a bit, but I think it boils down to being like everything - just takes time to understand it and get comfortable with it.

The cream of the crop for me is a combo of CSS/XHTML and ASP - an even better way to keep content seperate and you can even build in customized CMS with a database. I'd have done our band's site that way but my host doesn't support ASP. I was building a site at work earlier this year when I started figuring all that out.

True, there are the hacks required to get IE and FF sites to look the same, it does make you pull your hair out, so hopefully they get on the same page soon.

Anyhow, if you want to check out the site, it is http://www.theatlanticdivide.com

Nice to see many of you still here, gerbick, visionray, frets, others. I'm going on a little over 2 years since I've even opened Flash!

[Visionray]

wow, a blast from the past! Looks like you went and got a life while we're still here wasting away. Thanks for the links.

Speaking of seminars/training, I have been thinking of getting more training in this type of thing - CSS, XHTML, and basically just more web design training. I've looked at some classes around here and they are pretty expensive for the amount of training you get.

So I was thinking about going back to grad school to get a masters and the only two things I am interested in are web design and film. Film is pretty much out of the question as there are no decent film schools in DC and the ones I would want to go to in California are way too expensive and take too long (3 years full time) and it's doubtful I would even get accepted.

So for Masters degree in graphic design or web design and I can't find anything. It's crazy, you can get a masters in Dance, Biohazardous Threat Agents, 14th Century basket weaving, but NOT web design, unless it's online. Anyone know of any good schools for it? Most seem to be undergrad.

[Genesis F5]

Wow! Great site, mg33. To fix the background problem:

What's going on with the rectangles is it's taking the background color from the main container that's holding all of the content. What you need to do is give that new div element (discussed below) a background picture of what's behind the buttons. From my understanding, the buttons have parts of the background image in them.

Also, instead of redefining padding, height (since they're all the same), and a few other properties, do this:

.navmiddle a{height:26px; position: absolute; padding:0px; background-color:transparent;}

What that's basically doing is applying local properties to every hyperlink contained within that div element. So, create a div element around the menu hyperlinks and give it the class "navmiddle."

I also think you can eliminate the left/top values, too. They'll automatically position themselves inside of the div element.

note: notice how I put them into a new class/id called "navmiddle." Create one div element (id "navmiddle") around the hyperlinks and then give that element height (26px) / width (add up the widths of all buttons (I think it'll be about 474px)) / location (148px(top), 20px(left)) properties and you won't have to define location values for each hyperlink element.

[Genesis F5]

OK, MG33, here you go. Replace your CSS file with the one in the zip file. Look at the hyperlink properties now. Everything's been condensed a lot. Your new class is "navbar." Also, I included the "connections" page that has been edited. You need to take out the div elements "navleft" and "navright" and replace the hyperlink part with this for every other page:

<div id="navbar">
<a href="http://www.theatlanticdivide.com/index.html" class="news"></a>
<a href="http://www.theatlanticdivide.com/band.html" class="band"></a>
<a href="http://www.theatlanticdivide.com/songs.html" class="music"></a>
<a href="http://www.theatlanticdivide.com/photo.html" class="photo"></a>
<a href="http://www.theatlanticdivide.com/inquiries.html" class="inquiries"></a>
<a href="http://www.theatlanticdivide.com/connections.html" class="connections"></a>
<a href="http://www.theatlanticdivide.com/mail.html" class="mail"></a>
<a href="http://www.theatlanticdivide.com/press.html" class="press"></a>
</div>

What I did was combined all of the seperate pictures and made one navigation bar. Put "navbar.jpg" in your images folder.

This cuts down on file size by a lot. Seperately, they totaled 150KB, but as one unit, it's only 22KB. Keep the individual "over" pictures for the links. Those have to stay, but now you can remove "nav_press.jpg" and all of those other ones.

Edit: I added a compressed version of the navigation bar jpeg if you want to use that one instead. It's only about 7KB now. The original uncompressed one is still included.

Thanks, MG33. This was a good way to get me going on a Friday.

[mg33]

Genesis,

Really appreciate you taking a look at that, if that solution works that will be nice. Always something new to learn!

Did you run the CSS through some kind of compressor? I notice that it stripped my organizational tags out.

It also threw out the hack that helps FF and IE love each other, even though it refers to Opera, this one does much for FF and IE and div height:

voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */

/* "be nice to Opera 5" */
body>#Header {height:14px;}

Hopefully I'll have some time to look at it this weekend. Not sure about the compression to the style sheet, but if the nav changes work I owe you one.

[japangreg]

I haven't spent too much time on your code, mg33, but there's two other options that spring to mind here:

Use images with transparency for the links in the nav, and just change the color of the background element on hover (that way you only need a single image); or, instead of using a completely seperate image for the on and off states, use one image with both states and use positioning to switch between them (i.e., your "news" nav element would be twice as high, with the off state on top and the on state on the bottom: when the page loads, hide the overflow and position the image to show the top half. On hover, adjust the positioning to move the image half way up to display the on state and voila, no flicker)

Just my $.02.

[gerbick]

damn... a blast from the past... sup mg33?

[mg33]

damn... a blast from the past... sup mg33?

Not much, how are things with you?

Go figure, as soon as this conflict in Israel started getting worse, I popped in here to see what everyone had to say about it.

Other than that, just busy working - been at the same law firm for nearly four years now, recently promoted to Marketing Coordinator, doing web content development, SEO, newsletter publication, tons of writing, managing our web site, assist with advertising strategy and planning, web development, many different hats on my head.

Busy with my band, busy with the summer, counting down the 6 days I have left before I leave for Tokyo next Thursday - going on vacation to see one of my friends who moved there last summer, absolutely cannot wait. I'll be there for 10 days, lots of stuff planned, some trips out of the city to see the less-modern world there, might be adventerous and climb Mt. Fuji. I'm gonna go nuts at the guitar shops my friend has told me about, all manner of Japanese effects pedals, Fender-Japan guitars, etc.

Sometime in August I will have a gallery up of the trip, I'll let you all know when.

[Genesis F5]

Yeah, sorry MG. I had to open it in MS's InterDev for it to display properly. In your original CSS file, delete all of the original "a" hyperlink properties / class / hover properties for the nav bar. Also, delete "nav left" and "nav right" since you don't need them anymore. Those elements have merged into the one unifying navigation bar.

Once you do that, paste this into it:

#navbar
{	PADDING:0px;
	BACKGROUND: url("http://www.theatlanticdivide.com/images/navbar.jpg");
	HEIGHT:26px; 
	WIDTH:630px;
	LEFT:0px;
}

#navbar a{
	PADDING: 0px;
	POSITION: absolute; 
	HEIGHT:26px;
}

A.news
{   LEFT: 20px;
    WIDTH: 41px;
}
A.news:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_news_over.jpg) no-repeat;
}
A.band
{   LEFT: 61px;
    WIDTH: 37px;
}
A.band:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_band_over.jpg) no-repeat;
}
A.music
{   LEFT: 98px;
    WIDTH: 42px;
}
A.music:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_music_over.jpg) no-repeat;
}
A.photo
{   LEFT: 140px;
    WIDTH: 86px;
}
A.photo:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_photo_over.jpg) no-repeat;
}
A.inquiries
{   LEFT: 226px;
    WIDTH: 59px;
}
A.inquiries:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_inquiries_over.jpg) no-repeat;
}
A.connections
{   LEFT: 285px;
    WIDTH: 81px;
}
A.connections:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_connections_over.jpg) no-repeat;
}
A.mail
{   LEFT: 366px;
    WIDTH: 79px;
}
A.mail:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_mail_over.jpg) no-repeat;
}
A.press
{   LEFT: 445px;
    WIDTH: 49px;
}
A.press:hover
{
    BACKGROUND: url(http://www.theatlanticdivide.com/images/nav_press_over.jpg) no-repeat;
}

That should do it.

What my "fix" does is makes one div element that holds a picture of the navigation bar. That's the "background." What happened before was he had two images. One was the hyperlink picture and one was that same picture but for the "hover" event. There wasn't anything underneath except the original background which is that blue color that was showing through. With my method, there is no "unactive hyperlink" picture. Just a defined area. The only picture loaded is the "over" on hover event picture.

The only real "compression" comes from the pictures. The navigation bar is now 7KB. That's half of what one button used to be! You should slap a little compression on those "over" link buttons. You could probably get them down to 3KB each.

[pea3698]

http://www.csszengarden.com/
This site is cool also has a book that goes with it.

[JWin]

http://www.csszengarden.com/
This site is cool also has a book that goes with it.

actually I would recommend that book too, it explores design while feeding you code so you don't even realize you are learning. It discusses hacks, accessibility, layout, the future, ponders the meaning of life, all the important stuff.

[jAQUAN]

I have that book in front of me right now and it sucks for beginners. Doesnt teach you a thing. Perhaps I should crack it again now that I'm much hipper.

[clicky2]

wow, a blast from the past! Looks like you went and got a life while we're still here wasting away. Thanks for the links.

Speaking of seminars/training, I have been thinking of getting more training in this type of thing - CSS, XHTML, and basically just more web design training. I've looked at some classes around here and they are pretty expensive for the amount of training you get.

So I was thinking about going back to grad school to get a masters and the only two things I am interested in are web design and film. Film is pretty much out of the question as there are no decent film schools in DC and the ones I would want to go to in California are way too expensive and take too long (3 years full time) and it's doubtful I would even get accepted.

So for Masters degree in graphic design or web design and I can't find anything. It's crazy, you can get a masters in Dance, Biohazardous Threat Agents, 14th Century basket weaving, but NOT web design, unless it's online. Anyone know of any good schools for it? Most seem to be undergrad.

I'm starting a MS in Media Arts & Science (New Media) next Spring at IUPUI (http://informatics.iupui.edu/academics/media/). Basically web & mutlimedia and offers courses in a/v production, 3d, web, etc. Specialize, become a jack of all trades ... you decide. I'm sure there are similar programs at other universities.

[mg33]

That was one of the first books I picked up. It's good in an inspirational sense, as well as showing how many options are availble to something that is for the most part the same.

[Genesis F5]

I wish Firefox was never programmed. It seems like you can't apply borders to list elements. My drop down menu looked great in IE and doesn't exist in Firefox. Actually, the only part that did make it was my means of making the menu operate. Usually that's the part that doesn't work.