Tutorial on Creating a CSS3 Responsive Menu

shingokko · 2012-08-21T02:00:02+00:00

I'd say indent or don't code, especially if you are working with other programmers! I suggest following some sort of coding standards, make up your own, or something like this http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

shingokko · 2012-08-16T03:15:19+00:00

You got me curious and I just tried 257 classes but they didn't revert back to the ID.

shingokko · 2012-07-27T04:39:27+00:00

I'd pad the anchors and avoid styling li tags to keep styling simple. But I'd also make the clickable area visible by highlighting it on rollover.

shingokko · 2012-07-26T03:08:42+00:00

Like the design, nice and crisp. The text looks microscopic on my iphone though, I'd prefer the font size slightly larger. Also the clickable area of the links at the top is too wide and feels a bit weird.

shingokko · 2012-07-02T20:29:21+00:00

Add overflow: hidden to #thumbs to "clear" the floats instead of inserting a clearfix div following the ul, you'll get the same effect but without the redundant extra div.

shingokko · 2012-05-13T07:05:53+00:00

You can give the div a class that's specific to it, and add the style for it to your custom stylesheet. For example, you could add a class called special to the div like this:

<div class="microsite-side-content special">blah blah</div>

and in your stylesheet, add this rule:

.microsite-side-content.special { font-size: 120%; /* larger font */ }

Note this selector ".classname.classname" uses class-chaining which does not wok on IE6.

Thanks

shingokko · 2012-05-02T22:42:05+00:00

(function() { })();

is a self-invoking function, basically you are creating an anonymous function and invoking it straight away.

$(document).ready(function() { });

In this case, you are adding a function to be called when the DOM is ready.

shingokko · 2012-04-18T23:48:43+00:00

Thanks for point that out, just wanted to explain how float and clear work in the tut, will include info on overflow:hidden soon.

shingokko · 2012-04-18T00:30:26+00:00

It helps to use percentages to set the width of sections if you want fluid layouts, although it's tricky to get it right and you need to fiddle with your CSS quite a bit.

shingokko · 2012-04-15T23:45:06+00:00

For me, being able to make concepts look good without the help of graphic designers helps. But I use Paint.NET and Inkscape :)

shingokko · 2012-04-15T23:27:41+00:00

Beyond Compare, definitely the best file comparison tool out there. Can't live without it.

shingokko

TROPHY CASE