Back In The Swing: Changes And MiniCards

No need to echo what has already been said about the ads….

I think you have done a great job so far….

Who cares what Eric Meyer says (just kidding - couldn’t ask for a better critique from a top notch guy).

The site looks fantastic, Dan. As does the rest of the portfolio.

Hi Dan.  I like the big, chunky buttons.  Congrats on the launch.

Tried to e-mail you at dan[AT]dtott[DOT]com and it bounced back to me.  I can send you the header info if you want to e-mail me from a different address.

Well, I guess the thing about email addresses is that you have to set them up before you publish them.

Anyway, that address should work now.

Looks like fun. I may give it a shot. I see you got a special mention for your hover effects on the date box. I saw you repeated the effect for the merchandise icons above the footer. Nice touch.

@Brad - Is is fun.

Re the hover effects, i enjoy using them (see nav above) but the judges actually ruled against me in using them on the merchandise.  Their reasoning (and I agree with them after thinking about it for a while) was that products should have their own images, not just background images, so that with css off, the product images still show up. 

That’s the best part of this contest: it helps you concentrate on all that tiny little semantic stuff. (Although the winning entry could use a little semantic help - see here for some thoughts on that)

You’re a machine, Dan. A machine.

Nice, looking forward to seeing more.

Nice work Dan. I competed this round also. Anxious to see some more entries from this round! Your work appears front running.

I didn’t think about the possible inaccessibility using background images for the products, but that makes sense. I’m going to keep that in mind while I’m designing Little Sorters. I was going to do this month’s CSS Off, but I was absolutely swamped with other things yesterday. I’m definitely planning on trying it out the next time around. Your current entry looks like a sure thing!

Dan, after having done a couple of these high-intensity short turnaround jobs, have you found yourself reaching for any one quick reference in particular?  Just curious.

For me Eric Meyer’s “...The Definitive Guide” has been the handiest for quick reference.

@Everyone - Thanks for your comments so far.  Later today I’m going to post a detailed run-through of my entry.

@Eric - When I need to check something, HTML Dog is great for quick reference, and HTML Help.  Also, simply using the W3C Validation service helps me right some wrongs.

But, to tell you the truth, Google is my best friend.  I’ve found better ways to clear floats, and all of those little browser hacks.

Ok, thanks. Never heard of HTML Dog. 

I gotta have a short stack of books with good indexes nearby so I don’t get windows overload.  A lot of folks probably run even more than me, but when developing a new web page I usually have five active windows open at once:
1) The css file 2) html file 3) html page loaded in the dev browser 4) One browser window for reference (such as HTML Dog) and 5) Fireworks for quick & dirty image editing.

Any more and I start to get seasick.

Dan,

Thanks for posting this for us, you’re really talented. Every time I look at one of your sites I’m really amazed.

I was tempted to try this, but when I saw that the theme was worms, I couldn’t bring myself to do it. Maybe if it had been puppies or bunnies…

Great job, Dan.  Looks amazing, even for worms.

Dan’s divin’ right in there and wrastlin’ those CSS gators! 

Props to you.  I hope I can join you in the battle some day soon.  Looks to be an excellent training ground high-intensity learning.

Dan,
I, for one, appreciate the geeky OCD and putting things in the links. I probably would have done the same.

Also, nice call with the submit button - hiding on load. I see that as the best route to handling something like this. Hide the submit button and hijax the form action if you want to use JS, this way it can still be accessible to those without JS enabled.

You put everything together very nicely. Page still looks clean when the browser window is expanded. Nice job!

Awesome work, Dan. The fact that you were able to complete that in a 24 hour period is amazing! I will give the next one a try, it looks like a lot of fun (hard work, yes… but fun).

Remind me to ask you for some tips on using negative margins at the next meetup. :)

Great post, Dan. While I do enable comments on my blog, I have also moderate them. At first it was because I mistakenly left the option enabled, but now I just leave it there to filter out the random spam comment. Even with with the Akismet plug in installed, some spam does get through.

For any other comments I always approve them. But then, I don’t get that many comments so its not like I have to contend with the problems that Joel mentioned in his article.

If the comments ever did get to that point on my blog then I would really have a tough decision to make. I would probably let all but the most offensive comments through. I’ll refer to the comment disclaimer on the The Big Noob:

Posting vile or biggoted remarks will get you banned from commenting in the future. It’s pretty simple: don’t be a buttwipe.

I think this will always be an issue. If you allow comments and moderate, are you really letting people have the freedom to speak their mind on the topic? If you pre-moderate, are people as inclined to check back or continue to comment? (I think in the case of Eric’s site, it would be yes - people will still be actively involved).

I have been thinking about this myself lately as I develop a new iteration of my site. On one side, I think the comments help as it allows me to easily engage with the readers. Even with book reviews, there can be some good discussions. On the other side, it is nice to just keep the content in place and not worry about managing comments that are spam - or comments from people who don’t read the entire subject matter.

The news sites that refer you to a forum topic are nice - as they prevent the anonymous comments from spiteful people. It forces people to be responsible for what they write and let the community make up their mind about their worth to the conversation.

Maybe some posts should have comments, and others have it disabled.

Good topic that has me thinking even more about the worth of comments….

Reading your article brought to mind a particular post Eric Meyer made on his site a while back. 

It was a personal entry about a conversation with his daughter and I noticed that he had turned off comments.  I thought it was very appropriate that he had done so - pretty much any comment would have ruined the mood.

Intelligent feedback from readers is a rewarding aspect of using this kind of medium.  For the first time in recent modern history publishing has evolved from a one-way broadcast to a conversation of sorts. 

Popularity in the blogging world is not something I would ever wish for, but it’s nice to know that if overtly deviant comments do find their way to my site then I’ll still be in control of what happens to them.

@Eric
You hit the nail on the head. The biggest thing I am realizing lately is I don’t strive for popularity in the blogging world. For my personal blog, I would much rather have comments from people I know - as there is more context to the conversation. This avoids always having to try and explain yourself.

I have just seen so many comments go awry and way off topic. Many of which go into heated debates, debates that have been going on for years. I really think some people try to save the world and the Internet through their comments.

Still has me thinking about the next rendition of my site and commenting…

[...] Dan took part in a the most recent competition and the writeup he did for it is a great resource for anyone learning how to design websites.ÂÂ?  Since I’m pretty new to the tableless design scene I found the reasoning behind the decisions he made to be insightfull. Check out Dan Ott’s writeup here: http://dtott.com/thoughts/2007/07/17/css-off-2-earlybird/ [...]

Woo hoo!  Have fun, Dan.

Ah, yes. Vacations. I seem to remember going on those… A very long time ago.

Have a great time, Dan!

Like the new look, Dan. Very nice. :)

Also, thanks for the link on the PNG fix. That’s been a thorn in my side for a long time. I’m going to implement that on a couple of sites this week.

Also, good call on the Moo cards. I’m going to get a batch myself soon (maybe the stickers too).

Yeah, the new nav looks a lot tighter.  And the icons are multi-seasonal.  Today, (in my mind) they are flowers.  In six months, they can be snowflakes!  Brilliant.

hehe - yeah, save the world.  A lot of news sites have taken down the ability to comment on news articles because they just became dominated by comments from two most extreme sides of the political spectrum, arguing back and forth. 

I cam back here to comment on the irony in that two weeks after my above comment I now have feedback turned ‘Off’ on my site.

@Eric -

An interesting turn of events.  Were you having problems with comments, or were there other reasons for turning them off?

Hey good job, hermano. Keep up the good work.

Awesome job and a beautiful write up! That is a nice accomplishment.

Great job, Dan!

Dan’s off the front porch and in the living room to let you CSS peeps know Ohio’s in the HAY-ouwse!

I got here by way of the CSS Off website. Congrats mate!

[...] his css/html, but it’s really impressive that he beat out some darn good designers.ÂÂ?  Drop by Dan’s blog and check it out and leave him a comment to let him know he did a great [...]

Hey Dan! I was wondering what happened to you last Tuesday. I had forgot that you were moving. Good luck in the new city! I expect to see a lot of great standards-based sites coming out of the greater Indianapolis area. :)

Only 6 hours? Looks like you will have a long drive on Tuesdays for our meetup - but it will be well worth it :) Seriously, I drive almost 2 hours to the meetup - whats another 4 hours? hehe.

Glad you are all moved and working to find your way around the city. Now it is time for you to create the group and get people involved.

I’ll bet some good developers will come out of the woodwork now that you’re flying your colors.

If not, you can become the regional guru and shine some brilliance on the eager to learn minds of Bloomington.

Oh man, seems like everyone with talent leaves Cleveland.  If your ever back in town during the meetup you have to stop in.

Very cool. I’m going to have to try that myself.

Dan,
Looks great! The sources you mentioned were the main sources I used when I started moving to em based layouts. The best tool when doing all of this is the calculator, hands down. Getting a nice baseline helps give everything breathing room. I like the iterative changes you are making!

So, September 11th is the next meetup, you driving back here to visit with us :) he.

The new design rocks!  Love how the entire site scales.

Dan,
I hit your site with “ctrl” “+” phasers set to full power.  After ten direct hits I felt a shock wave, but your new framework contained the bulk of the explosion.

Excellent work, scales perfectly :) I usually only use ems for fonts, but maybe I should look into a scalable layout for my next redesign.

Guys -

Thanks for the kind words.  It was fun.

@Nate - I wish I could!  I’m actually going to be in town for a couple days, but not until the night of the 13th

@Eric - I love that.

@Mike - You should!  It’s fun; just make sure you put Calculator on your toolbar.

I’m just happy they increased the “100+” to “1000+”. Yeah, I’m way behind!

@Mike - You’re right, that is also a very nice adjustment.  But for me, the search is just huge.  It was always so frustrating to try and find something.  Well, I guess that’s the downside of using all of their “beta” projects.  At least the upside is that they’re still improving.

Thanks for the heads up, Dan. I’m going to give it a try this time around.

Good article, Dan. I’ve been using Eric’s reset as well and I agree with you that his is the best.

I concur. But the Meyer hack feels too bulky so I usually stick with my own reset:

* { margin:0; padding:0; outline:0; line-height:100%; }

I’m probably missing out on a few things and there might be some performance issues with the asterisk, but in the end this helps a lot.

@Brad - Thanks.  As usual, you and I are of like minds

@Jerry - Thanks for stopping by.  My biggest complaint with the *{} selector is that it also affects inputs and textareas, which can lead to unpredictable results; the idea of the reset is to make everything predictable.  Obviously, with form elements, this isn’t always possible (*cough cough* safari *cough cough*).  Eric Meyer wrote an article about some formal weirdness; you should check it out.

Dan, I have not seen any weird behavior from form elements due to my hack.

But… speaking of Safari :) Your “you can use these tags” section is having some issues in the Safari 3 beta. Not sure about Safari 2.0.

@Jerry - re the bug in safari: thanks for that.  Got it taken care of.

Congrats mate, I hope you me and the other judges have a good time watching all code <abbr title=“Smiley that sticks out his tongue”>:P</abbr>

Having used the * {} for ages, I’ve recently searched for a better one. (Actualy, I went with * {margin:0;padding:0;} a img {border:0;outline:none;} ) My major gripe with * was indeed the problems with forms. (and I suppose it’s slower as well, though I never noticed that)

However, between Eric meyer’s and yahoo’s reset, I’m going for Yahoo. Eric’s one is indeed more in-depth, but that also means you’re resetting things you never use (for example, q elements, :focus element resetting) when I removed those, I practically ended up with the yahoo-style reset :)

Of couse, I think everone should edit either css reset to what works best for them, and go with that.

That’s super cool, man.  Nice to see the move didn’t adversely affect your forward momentum.

So I guess that means you won’t be staying up all night on the 15th.

[...] of all, let me start this by saying thanks to Dan Ott. It was his persistance that prompted me to give this round of the CSS Off competition a go. Now [...]

Thanks, Dan! I was away from my desk the entire morning… Its nice to come back and see this waiting for me!

I had a great time participating and will definitely do it again.

I was in an o2 (UK iPhone carrier) store today, playing with an iPhone. They are awesome, wish I had the money for one right now!

Nice to see you posting again :)

congratulations on the sprokets gig.  nice to hear that you feel energized by your new digs!

Like Mike said, it is good to see you posting again. Congrats on working with the Sprockets team!

My stylesheet is an organizational disaster right now…this formatting is sure to help me make future edits. Thanks!

Looks like you need to get into SASS (-:

Here’s the CSS for my site, or at least part of it…
http://files.elliottcable.name/SASS/compiled/mini.css

Here’s some of the files that I actually write (they’re parsed into that by my custom rakefile):
http://files.elliottcable.name/SASS/mini.sass
http://files.elliottcable.name/SASS/includes/includes.sass
http://files.elliottcable.name/SASS/includes/unsets.sass

It’s really a beautiful system. I can’t believe I ever actually bothered to write CSS, having to do so would kill me nowadays >,>

I’ve used the same technique on projects in the past. I like the one line simply because it’s less page weight. I would eventually compress the CSS anyway. I have also used a mixture of PHP/CSS - only to compress the output to a CSS file so my development environment could have comments and more spacing, while production was barebones.

No offense to elliot, but I would avoid SASS like the plague. You know what you are doing with CSS, there is no reason to revert to something like SASS which esentially attempts to make CSS a pseudo programming language - which it isn’t and was never meant to be. Save yourself the overhead of process something as simple as CSS and continue doing it the way you are now. Your website will thank you.

I tend to use something a little different:


#my_id { style }
#my_id p { style }
#my_id p.class { style }
#my_id p a { style }


This makes finding the code really easy and because it’s done without any additional formatting I can code faster.  This may not be a concern for everyone, but I am very limited to the actual amount of coding time alloted.

Great post, Dan. I still write my CSS in the “traditional” manner, although I may try your new style of mimicking the layout of the HTML document.

As you pointed out, I can see how it would help when trying to determine inheritance.

[...] CSS yazarken denenebilecek yeni bir format. Bağlantı [...]

Nice one! I might drop the traditional method, and become a new follower of this alternative method. It looks nice, and I think I could edit faster if I adopted it.

Thanks!

I didn’t know about this, very clever :) Your second position is everything link doesn’t work, though.

We have been using this CSS “layout” for years, always worked like a charm :) In larger projects too.

If we ever work with someone not used to this format, you can always get the usual format using firebug.

Best regards,

The following bit of CSS will also do the same thing and is even easier…

#container {
overflow: auto;
}
* html #container {
height: 1%;
}

I love the clearfix method, it really saves ALOT of headaches and extraneous code. I however would use it more like PIE originally designed and have a .clearfix class then apply it to the div you would like to clear. They way you have it, right inside #container styles would require you to copy it into each item you would like to clear.

@Mike - Thanks for writing in.  Fixed that link.

@Louis - I agree, it’s a fantastic solution.  Regarding implementing it, I originally used it like you suggest, adding a “.clearfix” class to each container.  But I didn’t like crufting up my HTML, and I usually lean towards not adding class attributes if I can, anyway.  So instead, I started adding the specific elements to one declaration.  I have an example set up here.

I’ve enjoyed reading your post, but I always wonder why would you need to clear anything to start with? if you float your parent element and then float everything under it your code won’t need to be cleared

/** main div **/
/** div 1 **/
/*** div 2 **/

this way you won’t need to clear anything.

Regardless thanks for the interesting read

^^^^ Ooops well I forgot you could use tags here :(  , it didn’t show my example

@Mohamed - In decent browsers, you’ll see that if you don’t clear your floats, the parent element will not stretch to include all of it’s children.  I’ve set up an example of that here so that you can see what I’m talking about.  You can’t just rely on simply setting heights of elements, because that will break down when people start resizing text, so much of the time, you’ll need to use some sort of clearing method.

@Dave - That does indeed work for this example, but there are other times when you’d need to clear a float where the overflow:auto solution would be cumbersome, or, perhaps you need overflow for something else.  Either way, they’re both strong solutions to keep in your toolbox.

hey Dan,

try this

#container{ background: #79aff2; padding: 10px; border:1px solid #1b5fab;float:left;}
#container #float1{ float:left; background: #eddd94; padding: 5px; border:1px solid #333; margin: 5px; width:300px;}
#container #float2{ float:left; background: #eddd94; padding: 5px; border:1px solid #333; margin: 5px; width:300px;;}

it works fine without setting the height, this is just my opinion though Dan :D

Hi Dan,

I think Mohamed was talking about floating the parent container and applying a width so that it would stretch to contain its children. Whilst that method works, sometimes it can cause issues especially when dealing with fluid layouts where a percentage is required so I would suggest clearing where possible otherwise you’ll end up needing to float all elements which can lead to a lot of extra CSS.

I can’t think of any situation where the overflow method would be cumbersome? All the overflow: auto; method does is remind the parent that it should be set to auto anyway and forces it to contain its children. If you needed to use overflow for another purpose then you should find that overflow: hidden or scroll; work just as well ;)

Thanks
Dave

Hey Dave,

Yeah it might include a little more CSS but then again you don’t actually need to apply width to the parent DIV and yeah you are correct you have to float all elements within that parent. It worked for and is tuck with it to be honest, I will give the easyclear a chance as soon as i can though

Dave -

You’re right; they’re both valid solutions to the same problem.  It’s a win either way, since you’re removing the need for non-semantic content like empty divs.

Also, you get points in my book for using “whilst” (:

Hi Dan, Interesting method.  However, the last method shown by Mohamed should work fine as well.  However, the width of the container would have to be set to span the page as it did before the float.  But Mohamed could have kept the styling within the #container div and he set both of the ‘float’ containers to the same width.

overflow:hidden is the better option for containing floats, it prevents FireFox from giving the clearing element focus when tabbing through a page and prevents scrollbars appearing where the clearing element shrinkwraps an anchor. Again, you must ensure that the containing element hasLayout for it to work in IE6. hasLayout is triggered by setting an explicit width amongst other things.

@Mohamed Jama, one situation where you wouldn’t want to use float to clear other floats is when you want to add margin: auto to the container.

Ha ha! Not exactly “first base”.

As for Twitter clients, Snitter rocks. I hear good things about Twitterific, but since I’m not blessed enough to be a Mac owner I don’t have any first hand info. To get it without the ads you will have to pay though. Not much, but still.

Be sure to follow all of your fellow Cleveland nerds, and Foamee. Got to follow Foamee.

It’s not quite got the terminology or tips, but I just published a post today comparing twitter and other micro-blogging services. You might be interested in reading it should you completely catch the micro-blogging bug ;) The post is Micro-blogging - Comparison of Services.

Though, I can point out (as I did in the post): it’s a faux pas to post what you are eating!

@Brad - Well, it was worth a shot.

Thanks for the tips, I’m planning on checking out both of those Twitter clients and seeing which one I like better.  Also, thanks for reminding me about Foamee.  I love that.

@Mike - Ha! Thanks for that; good to know.  Also, thanks for the post.  I was actually reading it earlier today, and though I had been thinking about it for a while, your post helped tip the scale and get me to sign up, so I have you to thank.  Better hope it works out.

Twitteriffic

Twitteriffic

People(john gruber missrogue t marban cdevroe nikography shawnblanc), Bots (++bot Twitter Status Foamee), elliottcable

Twitter = Service; Tweet = Singular; Tweets = Plural; Twit = User singular; Twits = User plural; nudge = reminding you to update; follow = get updates @ teh client and page; follower = somebody following you; followee = somebody you follow; retard = somebody with more followees than followers

Minimalism.

That’s really interesting, I initially started using one line styles because thats just how I thought it was supposed to be done, when I realised I was ok to use whitespace, I switched to an almost identical style to yourself.

I had never considered indenting styles to match the code layout. I might give that a go on my next project (although I don’t think I’ll be using one line styles, because I find them a nightmare to read!).

There are other twitter clients, but I only use Snitter or Twitterific. If you’re looking for some extra fun on twitter, check out http://tweetgift.com

Cool bookmarklet, Dan. Put it to use a couple of times already. Keep ‘em coming. ;)

Gotta follow ijustine, factoryjoe, scobleizer, and darthvader

I use this method to clear my floats all the time.  To me, it’s the best solution out there.  Thanks for posting this.  Cheers. =)

I personally can use either a one-line declaration or multi-line declarations that are tabbed in once. however, I have started writing my style rules in alphabetical order, which actually has saved me a lot of time when going through my stylesheet and doing some edits.  I prefer this style though.


#wrapper {
  background:#FFF;
  color:#000;
  font:100%/150% “Trebuchet MS”, Verdana, sans-serif;
  margin:0 auto;
  width:90%
  }


oops.. didn’t pick up on my whitespace. hahaha, sorry about that.

[...] I am challenging local bloggers to help our event out by posting something about our event this week, encouraging people to register or follow our activities at City Hall on February 8-10. We want to make sure Bloomington knows about this, even as we wait for the Herald-Times and IDS coverage. [...]

For a moment I thought nothing was happening until I noticed the dark brown box at the top left corner. Maybe you can change the color and place the box at the center of the screen to make it more noticeable and just enable dragging.

Other than that excellent script, this will be very handy for CSS development.

This is a pretty awesome bookmarklet! You’re obviously a man who knows his ems… this website scales beautifully. Kudos!

[...] Ott has come up with a handy tool for converting pixels to EMs. Forget about using the headaches of manually using a calculator and [...]

Thanks very helpful. One improvement I would suggest is to not round up the value, or at least not up to 2 decimal places.

You can see from the source code on an example using ems to maintain the same line-height for all elements on a page the em value can reach up to 4 decimal places.

[...] Bookmarklet: Convert Pixels To Ems (Daniel T Ott) The bookmarklet will appear at the top of the page. It takes a pixel amount, and any css selector you can think of, so it will return the conversion relative to an element. (tags: CSS, bookmarklet, ems, pixels) [...]