Confirmed users
1,059
edits
(→Tabs) |
|||
Line 28: | Line 28: | ||
Almost every tab maintain a one to one relationship between the first class objects in the system or the listing of those objects. | Almost every tab maintain a one to one relationship between the first class objects in the system or the listing of those objects. | ||
=== Tab Location === | |||
Tabs are located on the side instead of the top where they normally are. This is because our clients have more horizontal room than we do vertical room. | |||
Example: | |||
<table style="border:1px solid #444;width:100%;font:12px/14px sans-serif;"> | |||
<tr> | |||
<td style="background-image: -moz-linear-gradient(180deg, #fff 0%, #fff 5px, transparent 5px, transparent 100%), | |||
-moz-linear-gradient(180deg, #bbb 0%, #bbb 1px, #C8D0DE 1px, #dadfe8 4px, #dadfe8 4px, #dadfe8 100%);width:200px;"> | |||
<ul style="list-style:none;margin:10px;padding:0;"> | |||
<li style="font-weight:bold; border: 1px solid #aaa;;color: #333;-moz-border-radius: 5px;-moz-box-shadow: 0 1px 0px #C8D0DE;padding:5px;background-color: #e6e6e6;background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.025) 50%, rgba(0,0,0,0.025) 100%);">HOME TAB</li> | |||
<li style="border: 1px solid #aaa;;color: #333;-moz-border-radius: 5px;-moz-box-shadow: 0 1px 0px #C8D0DE;padding:5px;background-color: #e6e6e6;background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.025) 50%, rgba(0,0,0,0.025) 100%);">FOLDER TAB</li> | |||
<li style="margin-left:10px;border: 1px solid #aaa;;color: #333;-moz-border-radius: 5px;-moz-box-shadow: 0 1px 0px #C8D0DE;padding:5px;background-color: #e6e6e6;background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.025) 50%, rgba(0,0,0,0.025) 100%);">CONVERSATION TAB</li> | |||
<li style="margin-left:10px;border: 1px solid #aaa;;color: #333;-moz-border-radius: 5px;-moz-box-shadow: 0 1px 0px #C8D0DE;padding:5px;background-color: #e6e6e6;background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.025) 50%, rgba(0,0,0,0.025) 100%);">CONVERSATION TAB</li> | |||
<li style="margin-left:10px;border: 1px solid #aaa;;color: #333;-moz-border-radius: 5px;-moz-box-shadow: 0 1px 0px #C8D0DE;padding:5px;background-color: #e6e6e6;background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.025) 50%, rgba(0,0,0,0.025) 100%);">CONVERSATION TAB</li> | |||
<li style="border: 1px solid #aaa;;color: #333;-moz-border-radius: 5px;-moz-box-shadow: 0 1px 0px #C8D0DE;padding:5px;background-color: #e6e6e6;background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.025) 50%, rgba(0,0,0,0.025) 100%);">FOLDER TAB</li> | |||
</ul> | |||
</td> | |||
<td style="vertical-align:top;padding:20px;text-align:center;"> | |||
<em>CONTENT AREA</em> | |||
</td> | |||
</tr> | |||
</table> | |||
=== Tab Types === | === Tab Types === |