inline-block vs. float

[djpic]

Update: I am now using absolute positioning for the menu items. It looks like it works and gets the items centered just the way I like them, but I still have a spacing issues, for instance, above the menu items and below the menu items. Any pointers?

Update: I have removed the padding from the header and used absolute position on the logo. That fixed the issue with the spacer on the top of the menu. I then removed the paragraph tag from the content and that removed the space under the menu. The problem now is, if I put a paragraph tag in the content section, will that break it again?

Update: I added the paragraph tag again, then change the padding (top & bottom) to 1px and now it works. Any explanation for this?

[chrisburton]

What are you trying to do, vertically align it? Also, there’s no reason to use absolute positioning for your menu.

[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.

[djpic]

I will upload the float version again in a few hours.

[wolfcry911]

djpic, here’s another example page. I’m not insisting you do it this way, but just wanted to show you what was possible. I only used one background image (and could eliminate that too with some fancy pseudo element styling). This will work in most modern browsers including IE 9 and 10. For older browsers, you could just let extra design elements go (the box-shadow) or feed stylesheets to IE to accomodate and use browser prefixing for further css3 support. You should also throw in the shiv for IE…

Dashboard

My Blogs

My Blog List

My Account

Sign Out









This is the topic of this page


This is a test of the content to be added here!






 





Copyright © 2011 | Dale M. Picou, Jr. | The DjPic Network

[djpic]

@ChristopherBurton – I am trying to center the menu. Why should I not use absolute position?

@wolfcry911 – That design looks perfect, but of course only in Safari on my machine. I am running a VM with IE 8 and it looks like crap (no offense). In firefox, does a little bit better, but the menu is off along with the copyright notice (I do have firefox version 3.6 and they are out with 6? I have only had this computer for around a year). Once upgraded to version 6, it looked fine. I don’t know if it is more of the HTML5 tags or the CSS3 that is messing with the look in IE8. I know that IE8 is old but if you look at companies and such, there still is a lot of people using it. Plus the people like me that didn’t update their browser (safari is my primary). I would like to keep it consistent in all browsers without having to format for every single browser. Personally I think it is ridiculous that you have to do that. This is why I have used table layouts for so long. I can whip out a table layout in under than 30 minutes for this site and it would look identical on ALL browsers but that defeats the purpose of me doing this (and is now frowned upon). I want one constant way that will look and work the same in all browsers from the last 5-6 years. Just call me crazy! I did play with the shadow property a few times in the first revision and didn’t mind missing it in the other browsers. Things like that I can live without, but when a menu goes crazy or a design isn’t aligned correctly, then it just drives me nuts! Don’t get me wrong, I do love the way you did it and really that is the way it should be done. I will keep it as an example (wolfcry911 example) and posted it for any others that would like to take a look. I just think we need to wait another 2-3 years to be able to use that and not have to worry. IE is really holding everyone back.

I have posted the old version before I made all the corrections: click here for version 2

Of course, I found the issue with the spacing on the top of the menu had to do with the header padding. I did notice you used padding / margin on the logo itself, so that might also be another route instead of absolute positioning. The spacing on the bottom of the menu was an issue as well (between the menu and the content). That again was fixed the minute I put the padding; I am sure because of the reasons you stated. The only thing that was stopping me from using float from that point on was centering the whole menu. The nav in your example was only 800 wide which you were able to do because of the wrapper was providing the shadow / glow. The background image of mine is providing the shadow leaving 10px on either side to be filled (and the spacers soon). Without centering the entire menu, it will stay to full left putting it out of alignment.

With the collapsable css, I tried changing the background element and of course it broke in IE8 so I think I will leave it alone for now.

With the padding, what you are telling me is if I define say a div with the height of 100px and width of 100px, when I add padding of 10px to all sides, the height will then be 120px and width then would be 120px? I understand where this is going but I assumed it wouldn’t add to the total, would just move in from the outside. For example, the same situation, the div tag would still be 100 x 100 but the area I could type in would be 80 x 80. The same with the border. 100 x 100 with a 1px border would equal 102 x 102 (on the outside) or would the 1px border be on the inside of the div?

With absolute positioning I know that could turn bad. I just figured the menu and header is not going to change much within it’s own div. I would not do that for any content on the site and if I do, it would be relative to a parent.

I am not sure with the nav / menu (which is better, nav or menu?) in the header. How would you make sure it was aligned to the bottom? I did see in your example that you used the absolute positioning to position the nav at the bottom of the header I think?

With the image map, I thought that would be pretty much the same thing (easier) then creating an anchor and then using absolute positioning to place the anchor over where I need it to be clickable. But now that the footer is in the background, will do it with AP?

Again, thank you for all this help. I have been off of work for a week, so this stuff has been keeping me occupied.

[djpic]

Wow…that is like a wall of text!

[chrisburton]

Use margin: 0 auto;

[djpic]

I have tried that on the #mainmenu but doesn’t work.

[chrisburton]

add this at the very top of your stylesheet

* {margin: 0; padding: 0;}

[djpic]

still nothing.

[chrisburton]

where did you add margin: 0 auto to?

[djpic]

#mainmenu

[chrisburton]

I added that to the wrong discussion

Add margin: 0 auto; to the nav element.

[djpic]

I am not using a nav element. I am using a div element with an ID of mainmenu haven’t tried switching to any HTML5 tags yet.

[Author]

Posts