Re: inline-block vs. float

[wolfcry911]

When you define float, does it auto-define it as a block?A special block, yes. The specs go into detail, but just know that any display value (but one) will be changed to block.

In reference to using lists for menus, I think I will stick with my current set-up for nowThat’s perfectly fine.

The sprites are there mainly because of the font and the dashed lines between each menu item.The dashed lines could be borders and fonts and @font-face have come a long way. Even IE can use them. Besides, you’re using a simple serif font that doesn’t really call for anything special anyway. Here’s a great link: Do websites need to look exactly the same in every browser?

The problem with the footer is I was going to make an image map so when I user clicks the copyright information, it would take them to my site.One word: Why? Just use simple links and if you insist on using the images place them as backgrounds of or as img within the anchors.

My response always is, “but what if it does?” I think it is best to get into the habit of optimizing the application nowAbsolutely, always use the best techniques possible and don’t resort to lazy sloppy code – my thinking also.

What do you mean, shorthand?I mean combine properties, like this:

#content {

padding-top: 1px;

padding-right: 20px;

padding-bottom: 1px;

padding-left: 20px;

}

would become:

#content { padding: 1px 20px; }

the same holds true for margin and background and font.

I am open to using HTML5 elements as long as they ‘fall back.’ I am curious what HTML5 elements are we talking about here?header, nav, section, article, aside, footer are the main elements – basically where all your id’d divs are could be replaced with new elements. Most browsers can deal with the new elements now. IE requires a simple ‘shiv’, or small bit of javascript in order to style the new elements. I’d consider it safe for most any site now, certainly any site anyone on these forums (myself included) are developing.

I never got to see the update with floats, so can’t really comment on those now. It’s okay that you’ve used absolute positioning on the logo and nav. It works and is acceptable, but don’t fall into the trap of thinking its the best thing since sliced bread and use it everywhere. A layout built solely on AP will fall apart and become harder and harder to maintain as you add content. I personally would still use floats.

The spacing issues are caused by a couple of different things. Learn the box model – padding and borders are added to width and height, so for example if you wanted an element to be 100px tall with a top and bottom padding of 10px each, the height would need to be 80px. The spacing under the nav was caused by the top margin of the p (or any element) – its known as margin collapse and is normal. A top padding or border on the parent gives the margin something to ‘push’ against. Another way to adjust things would be change its formatting context, but I don’t want to confuse you at this point. Still another thing that may have been done was to put the #content background on a wrapper div (which you currently don’t have, but doesn’t matter either way).

In looking more closely at the design and code, I think I would place the nav inside the header. It seems to make sense and would make styling easier. Regarding the spacing of the floats and the background image – I’m sure things could have been adapted to work, but you’ve switched to AP.