what is the best way to achieve this layout? - html

I am struggling a bit trying to achieve the following layout.
I have the following divs:
----------------wrapper--------------
| ---------------info-------------- |
| | ----detail-- ---summary-- | |
| | | | | | | |
| | | | | | | |
| | | | ------------ | |
| | | | ----graph--- | |
| | | | | | | |
| | | | | | | |
| | ------------ ------------ | |
| --------------------------------- |
| |
| ---------------info-------------- |
| | ----detail-- ---summary-- | |
| | | | | | | |
| | | | | | | |
| | | | ------------ | |
| | | | ----graph--- | |
| | | | | | | |
| | | | | | | |
| | ------------ ------------ | |
| --------------------------------- |
| |
-------------------------------------
How can I use position and display on my divs to get my page to show correctly?


i have created a sample of what you want.
http://jsfiddle.net/FFU2Y/
Hope it helped.
just try to edit the css of what you like it to be or add div.


Try to use 960.css grid layout !
http://960.gs/
or another way would be using Bootstrap from Twitter, which provides grid solutions, css reset, and many more awesome stylings.
http://twitter.github.com/bootstrap/

Related

DIV as Table - Showing multiple tables on a page. Stacked below and left-right

I need to create a few tables to hold data. This is how the structure looks the diagram below. Table 1 and Table 2 will be in the first row and there must be a gap in between the tables. Table 3,4,5 will be in the next row and again, there should be some gap in between the tables.
-------------- -------------------
| | | |
| | | |
| | | |
| | | |
| Table 1 | | Table 2 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
--------------- -------------------
--------------- --------------- ---------------
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| Table 3 | | Table 4 | | Table 5 |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
--------------- --------------- ---------------
This is what I have attempted to do so far, but it isn't perfect. Any help would be appreciated. https://jsfiddle.net/Leyzejfs/

This is a bit of a strange question (because it's not clear what it is exactly what you want), but nevertheless: Just add some margin to the CSS rule for .table
https://jsfiddle.net/1qyyeja5/1/
(you only have four tables in your jsfiddle as opposed to the five your were drawing in your question, but the principle is the same)
However, if your tables should be arranged in some kind of grid, you can place them into another "wrapper table" to have them aligned both ways - horizontally and vertically , like in - yes: a table...

Enumerate rows in mysql based on groups with dates in different columns

I have a question very similar to this one, but different (aka, I couldn't extend the answer to that one to fit my purposes. Due to the second WHERE condition, specifically).
I have a table which tracks the visit number for customers. There are two types of visits:
| ID | InStoreVisit | InStoreDate | OnlineVisit | OnlineDate |
|----|--------------|-------------|-------------|------------|
| 1 | 1 | 1/1/11 | | |
| 1 | 2 | 1/2/11 | | |
| 1 | | | 1 | 1/3/11 |
| 1 | 3 | 1/4/11 | | |
| 2 | | | 1 | 2/2/12 |
| 2 | 1 | 2/3/12 | | |
| 2 | | | 2 | 2/4/12 |
I need to create a new column which has a sort of 'global visit number' as such:
| ID | InStoreVisit | InStoreDate | OnlineVisit | OnlineDate | GobalVisit |
|----|--------------|-------------|-------------|------------|------------|
| 1 | 1 | 1/1/11 | | | 1 |
| 1 | 2 | 1/2/11 | | | 2 |
| 1 | | | 1 | 1/3/11 | 3 |
| 1 | 3 | 1/4/11 | | | 4 |
| 2 | | | 1 | 2/2/12 | 1 |
| 2 | 1 | 2/3/12 | | | 2 |
| 2 | | | 2 | 2/4/12 | 3 |
I'm getting mixed up on the WHERE condition with which I can do the self-join. Any advice greatly appreciated.

Make div pull to the right and up with Bootstrap

I made a layout with Bootstrap. At desktop resolutions it looks like this:
+---------------+ +-------------+
| | | |
| A | | |
| | | |
+---------------+ | |
| | | C |
| B | | |
| | | |
+---------------+ | |
| | | |
| | +-------------+
| | xxxxxxxxxxxxxxx
| D | xxxxxxxxxxxxxxx
| | xxxxxxxxxxxxxxx
| | xxxxxxxxxxxxxxx
+---------------+ +-------------+
| | | |
| E | | F |
| | | |
+---------------+ +-------------+
| |
| G |
| |
+-------------+
On mobile devices it looks like this:
+---------------+
| |
| A |
| |
+---------------+
| |
| B |
| |
+---------------+
| |
| |
| C |
| |
| |
+---------------+
| |
| |
| |
| D |
| |
| |
+---------------+
| |
| E |
| |
+---------------+
| |
| F |
| |
+---------------+
| |
| G |
| |
+---------------+
My problem is that I need to get rid of the space between C and F indicated by the X's.
Here is my markup:
http://pastebin.com/KTJj72Z0

on div F put negative top margin. It'd pull it above.
like so
#media(min-width:768px){
#F {
margin-top: -100px;
}
}

What does this ridiculous glog mean?

Can anyone help me understand this crazy glog? It looks to me like somebody sat on local changes for weeks, but why does the graph collapse like that when there's no merge?
o changeset: 9584:ee55eaad973f
|\ user: abcd
| | date: Tue Jul 03 15:16:36 2012 +0100
| | summary: blablabla
| |
| \
| |\
| | \
| | |\
| | | \
| | | |\
| | | | \
| | | | |\
| | | | | \
| | | | | |\
| | | | | | \
| | | | | | |\
| | | | | | | \
| | | | | | | |\
| | | | | | | | \
| | | | | | | | |\
| | | | | | | | | \
| | | | | | | | | |\
| | | | | | | | | | \
| | | | | | | | | | |\
| | | | | | | | | | | \
| | | | | | | | | | | |\
| | | | | | | | | | | | \
| | | | | | | | | | | | |\
| | | | | | | | | | | | | \
| | | | | | | | | | | | | |\
| | | | | | | | | | | | | | \
| | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+---o changeset: 9581:1425f32ed0fd
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |/ parent: 9467:3a818f1ddee5
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | user: abcd
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | date: Tue Jul 03 14:49:22 2012 +0100
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | summary: blablablabla
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+---o changeset: 9466:06e3a96051d2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |/ parent: 9404:59af59ad22e2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | user: abcd
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | date: Wed Jun 27 16:29:56 2012 +0100
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | summary: blablabla
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+---o changeset: 9012:c7eecec9dfb5
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | branch: some branch
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | parent: 8988:292fcb6476ff
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | user: efgh
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | date: Mon May 28 16:40:50 2012 +0100
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | summary: blablabla
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+---o changeset: 8941:98fae217d622
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |/ parent: 8873:987a6e5ee24f
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | user: ijklm
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | date: Wed May 23 10:16:54 2012 +0100
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | summary: blablablabla
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

but why does the graph collapse like that when there's no merge?
Why "there's no merge"? A lot of branches without activity except two-three most recent and this freshest (most right) branch was merged to oldest (default?)

Documentation for troyworks flash framework

I want to design a Flash CS4(AS3) based kiosk application where the screen changes according to the multi-user events.
Due to the fact that Troywork's supports HFSM, it might be useful to my needs, but its hardly documented. I checked the dir structure, but cannot understand the usage. Is there any documentation to get started using the framework? Can someone suggest some examples?
reference : http://code.google.com/p/troyworks
Directory file structure:
+---apps
| +---.settings
| +---build
| +---docs
| \---src
| \---com
| \---troyworks
| \---apps
| +---mnemosyne
| +---semantica
| | \---moby
| +---templateengine
| +---tester
| \---tgesture
+---controls
| +---.settings
| \---src
| \---com
| \---troyworks
| \---controls
| +---cogsDebugger
| +---menu
| +---tarrow
| +---tautocomplete
| | \---ui
| +---tbutton
| +---tcalc
| +---tcalendar
| +---tcarouselmenus
| +---tcookie
| +---tcursor
| +---tdatefield
| +---tdraggable
| +---tflow
| +---tform
| +---tkoosh
| +---tline
| +---tloadingIndicator
| +---tmediaplayer
| | +---controller
| | +---model
| | \---ui
| +---tmodal
| +---tparticleengine
| | \---forces
| +---tqa
| +---tscrollbar
| +---tshapes
| +---tsliderbar
| +---tslidermenu
| +---ttextfield
| +---ttooltip
| +---ttree
| | +---dataproviders
| | +---managers
| | +---tree
| | \---treeclasses
| +---tuitools
| \---tuseridle
+---dev
| +---build
| +---docs
| \---src
| +---com
| | +---adobe
| | | +---crypto
| | | +---errors
| | | +---images
| | | +---net
| | | | \---proxies
| | | +---serialization
| | | | \---json
| | | +---utils
| | | \---webapis
| | | \---events
| | \---troyworks
| | +---core
| | | +---chain
| | | +---cogs
| | | | \---proxies
| | | +---commands
| | | +---events
| | | +---patterns
| | | +---persistance
| | | | +---foundation
| | | | +---implementation
| | | | +---syncher
| | | | \---wrapper
| | | +---score
| | | +---time
| | | \---tweeny
| | | \---fx
| | +---data
| | | +---bit
| | | +---btree
| | | +---constraints
| | | +---enums
| | | +---filters
| | | +---graph
| | | +---id
| | | +---iterators
| | | +---query
| | | +---skiplist
| | | | +---simple
| | | | \---visitable
| | | +---tags
| | | +---validators
| | | \---valueobjects
| | +---events
| | +---framework
| | | +---assets
| | | +---controller
| | | +---framework
| | | +---internationalization
| | | +---loader
| | | +---model
| | | +---security
| | | +---tiers
| | | +---ui
| | | | \---layout
| | | \---user
| | +---geom
| | | +---d1
| | | +---d2
| | | \---d3
| | +---io
| | | +---airlib
| | | \---fplib
| | +---logging
| | +---reflection
| | +---snippets
| | | +---patterns
| | | \---reflection
| | +---text
| | +---ui
| | | \---sketch
| | \---util
| | +---codeGen
| | | \---model
| | +---datetime
| | \---swfconnect
| \---util
+---docs
| \---checkingout
+---examples
| +---bin
| +---doc
| +---SaveImage
| | \---PostReceiver
| | \---data
| +---src
| | +---Calc
| | | +---dev
| | | | +---build
| | | | | \---lib
| | | | \---src
| | | \---spec
| | +---classes
| | | \---com
| | | \---troyworks
| | | +---commandexample
| | | | +---commandcontainers
| | | | +---commands
| | | | +---controls
| | | | \---shapes
| | | +---dayinlife
| | | +---prevayler
| | | | \---demo1
| | | \---Tdining_philosophers
| | +---Cogs
| | | +---dev
| | | +---docs
| | | \---src
| | +---CommandExample
| | | \---obj
| | +---Controls
| | | \---MixinPlayer
| | +---DiningPhilosophers
| | +---LayoutUtil
| | | +---build
| | | | \---slugs
| | | \---src
| | +---Prevayler
| | | \---obj
| | +---QA
| | +---Sketch
| | | +---addFrameScript
| | | +---Clickthrough
| | | +---ColorUtil
| | | +---doc
| | | | \---src
| | | +---EngineLoader
| | | +---FlowControl
| | | | +---embedded
| | | | \---external
| | | +---FrameEvents
| | | +---LateBindingView
| | | | \---bin
| | | +---SymbolClass
| | | \---Tweens and saving state
| | +---StopWatch
| | \---Validation
| +---StMPE
| | \---dev
| | +---build
| | \---src
| | +---mdl
| | \---ui
| \---tgesture
\---tests
+---bin
+---obj
| \---basic
\---src
\---com
\---troyworks
+---apps
| \---tester
+---core
| +---chain
| +---cogs
| \---patterns
+---data
+---framework
| \---loader
+---geom
| \---d1
+---logging
+---prevayler
+---tester
+---text
\---util
\---datetime