Jiangyue Zhu

Impossible is Nothing

HTML5 Box Model

Leave a comment

As we know, the contents enclosed by <div></div> would be considered as block-level container as default. If there are some contents that we want them to be in a menu, it needs some more work to implement it.

Let’s see an much easier and more elegant way to do this by using box-model.

Now, I have a div which has an id “menu”. It would be used to display a menu with three elements:

<div id="menu">
 <div id="home">Home</div>
 <div id="contact">Contact</div>
 <div id="about">About</div>
</div>

If we did not change anything, the sub-div would be aligned vertically. What we want to do now is to align them horizontally, just like what we see in some websites.

It is easy to do this by using box-model. The codes of this part are like this:

<style type="text/css"> 
#menu{ 
 display:box;
 box-orient:horizontal;

 display:-webkit-box;
 -webkit-box-orient:horizontal;

 display:-moz-box;
 -moz-box-orient:horizontal
}
</style>

Actually, we need to set the display attribute of menu div section to box. In the codes, there are two additional attributes which has prefixes: -webkit and -moz which aims to solve the cross-browser compatibility. -webkit is to support several browsers such as Opera, Chrome, and Safari, while -moz supports Mozilla Firefox. We note that the box orient attribute is also being set to horizontal.

Are we set now? Not yet. Why? The reason is that the sub-div elements will not inflate into the whole menu div, even though all these three sub-div elements are aligned horizontally. For example, if we set the width of the menu div to 500px, then the current result would be something like this:

That’s definitely not what we expect. Now, the next step is to add some codes for controlling those menu sub-div elements. The codes are like this:

#menu > div{
 text-align:center;
 border:#999999 solid;
 border-radius: 5px;
 box-flex:1;
 -webkit-box-flex:1;
 -moz-box-flex:1;
}

The important part is the attribute box-flex. Simply put, if we set the box-flex value of all the sub-div elements to 1, it means that those three elements would occupy the whole menu div with equal width. That’s what we want! So, after adding these codes, the result looks exactly what we expect:

Here is a live result, click here. It has more than what I introduced above because it has some additional attributes which can allow the div stretch when the mouse is hover on it. Also, it has some features such as the shadow or border radius.


					
Advertisements

Author: zhujy8833

Impossible is nothing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s