Re: inline-block vs. float

[djpic]

@wolfcry911 – that is a lot, thanks! You just answered and confirmed so many things that I have been wondering. But of course opened the door for more questions like most answers do. I have been designing for awhile (10+ years) just recently I have had a chance to revisit it all and break my old style habits of table based layouts. CSS was just getting started when I was playing with it but at the time, wasn’t supported as well so just used it sparingly. Been focusing a lot on other items (networking, work, school, etc.) but now have an opportunity to get back in the game sort of speak.

Actually, the person that showed me inline-block didn’t like/understand float. I felt inline-block was tacky at first as I was using float before. It must just be the definition of inline-block makes it seem like it should be used. I will make the switch back to float (plus easier to use for me). I do have a question though about the float. So are you saying if I use float, then whatever is in the display is pointless? When you define float, does it auto-define it as a block?

In reference to using lists for menus, I think I will stick with my current set-up for now. It works and don’t really see an advantage to using lists.

The sprites are there mainly because of the font and the dashed lines between each menu item. I know about font-face but of course it doesn’t work in a lot of browsers and I wanted to stay as consistent as possible. My first build was actually ALL CSS before adding the images & sprites. I have reposted it here: Click Here for Version 1

Amazingly, I did think of putting the actual text in the anchor tags but don’t know how to ‘push’ / ‘hide’ the text.

As far as the text in the content plane, that was there just as a quick placeholder as I was adjusting the margins therefore wasn’t really formatted yet.

Empty span tags were there for of course to place the spacer (as I used before in table layouts). But when I read what you wrote, I came to a realization that I could do the same thing I did with the content tab. Just export it as a 1px horizontal image and place it as a background. I am trying to adjust my mind set.

With the footer, again used because I needed maintain the font type.

I can see where the layout / design items makes sense to be placed as backgrounds and I like the idea. I could put the footer image element as a background along with the header. Then just export the logo as a standard image which would probably be best. 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.

It is good to know about the descendant id’s. I have wondered about that. I always want to know which way is more efficient (as you can tell from my previous post: Menus in CSS). I am all about optimizing for CPU and memory on both the client machine and server. Many times I have been told I shouldn’t worry about things like that as the project / site won’t be getting enough hits to matter. My response always is, “but what if it does?” I think it is best to get into the habit of optimizing the application now, and when a major project shows it self, it will just be second nature. I do believe more and more programmers are getting into the mind set of, “our clients have 4GB RAM and quad CPUs, who cares how much memory / CPU our application uses? They won’t notice.” Just because the power is there, doesn’t mean you should write crappy code.

What do you mean, shorthand? Are you talking about the naming convention or can a css file actually contain shorthand elements?

@ChristopherBurton – I am open to using HTML5 elements as long as they ‘fall back.’ I am curious what HTML5 elements are we talking about here? I have looked at the HTML5 form elements, but nothing else. I will be doing a google search on these soon now that you mentioned them.

@wolfcry911 – I will be working on making some of the modifications you have suggested. I will re-post here when the changes have been made.