consolidate headers in html examples
[opensuse:themes.git] / bento / wiki-playground.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7   
8   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="All" charset="utf-8" />
9   
10   <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
11   <script src="js/script.js" type="text/javascript" charset="utf-8"></script>
12   <script src="js/global-navigation.js" type="text/javascript" charset="utf-8"></script>
13   
14   <!-- wiki javascript -->
15   <script src="js_local/wiki.script.js" type="text/javascript" charset="utf-8"></script>
16   
17   
18   <title>openSUSE.org - Mockup</title>
19   
20 </head>
21
22 <body>
23   
24   <!-- Start: Header -->
25   <div id="header">
26     <div id="header-content" class="container_12">
27       <a id="header-logo" href="#home"><img src="images/header-logo.png" width="46" height="26" alt="Header Logo" /></a>
28       <ul id="global-navigation">
29         <li><a href="http://opensuse.org/sitemap/">Downloads</a></li>
30         <li><a href="http://opensuse.org/sitemap/">Support</a></li>
31         <li><a href="http://opensuse.org/sitemap/">Community</a></li>
32         <li><a href="http://opensuse.org/sitemap/">Development</a></li>
33       </ul>
34       <form id="global-search-form" action="" method="post" accept-charset="utf-8">
35         <input type="text" name="q" value="search" id="search" />
36         <input type="submit" value="Search" class="hidden" accesskey="" />
37       </form>
38     </div>
39   </div>
40   <!-- End: Header -->
41
42   <div id="subheader" class="container_16">
43     <div id="breadcrump" class="grid_12 alpha">
44       <a href="#" title=""><img src="images/home_grey.png" width="16" height="16" alt="Home" /> Home</a> > <a href="#" title="">Breadcrump</a> > <a href="#" title="">Breadcrump</a> > <a href="#" title="">Breadcrump</a>
45     </div>
46     
47     <div id="login-wrapper" class="grid_4 omega">
48       <a href="#signup-page">Sign up</a> | <a id="login-trigger" href="#login">Login</a>
49       
50       <div id="login-form">
51         <form action="index-extended_submit" method="get" accept-charset="utf-8">
52           
53           <p><label class="inlined" for="username">Username</label><input type="text" class="inline-text" name="username" value="" id="username" /></p>
54           <p><label class="inlined" for="password">Password</label><input type="password" class="inline-text" name="password" value="" id="password" /></p>
55           
56           <p><input type="submit" value="Login" /></p>
57           <p class="slim-footer"><a id="close-login" href="#cancel">Cancel</a></p>
58         </form>
59       </div>
60     </div>
61
62     <!-- disables for a while -->
63     <div id="local-user-actions" class="grid_4 omega" style="display: none;">
64       
65       <ul id="pt-personal">
66         <!-- Begin Personal links (Login, etc.) xx-->
67         <li><a href="#">Rlihm</a></li>
68         <li><a class="new" href="#">Talk</a></li>
69         <li><a href="#">Preferences</a></li>
70         <li><a href="#">Watchlist</a></li>
71         <li><a href="#">Contributions</a></li>
72         <li><a href="#">Log out</a></li>
73         <!-- End Personal links (Login, etc.) -->
74       </ul>
75     </div>
76     <!-- /disables for a while -->
77   </div>
78
79   <!-- Start: Main Content Area -->
80   
81   <!-- section headline test -->
82   <div id="content" class="container_16 ui-oo-content-wrapper">
83     
84     <style type="text/css" media="screen">
85       .section-header {
86         margin-top: 1em;
87         margin-bottom: 1em;
88       }
89       .nav-inline {
90         list-style: none inside;
91         padding: 0;
92         margin-top: 0;
93         margin-bottom: 0;
94       }
95       .nav-inline li {
96         float: left;
97         margin-right: 1.5em;
98       }
99       .nav-inline li:last-child {
100         margin-right: 0;
101       }
102       
103       .nav-inline li a {
104         text-decoration: none;
105         font-size: 1.2em;
106       }
107     </style>
108     
109     <div class="grid_16 section-header">
110       <h1 class="grid_6 alpha">Product Headline</h1>
111       
112       <ul class="nav-inline alpha grid_8 prefix_2 alpha omega">
113         <li><a href="#">Features</a></li>
114         <li><a href="#">Details</a></li>
115         <li><a href="#">What Ever</a></li>
116         <li><a href="#">Tasks</a></li>
117         <li><a href="#">Foobar</a></li>
118       </ul>
119       
120     </div>
121     
122     <!-- END: section headline test -->
123
124     <!-- Display current openSUSE Products -->
125     <div id="display" class="container_16 ui-oo-content-wrapper">
126       <div id="display-content" class="grid_16 ui-oo-box-shadow alpha">
127         <div class="grid_9 alpha">
128           <img id="lp-pr-image" src="images/112_Boxshot_DE_3D.jpg" width="276" height="350" alt="112 Boxshot DE 3D" style="" />
129         </div>
130         <div id="quicklinks-wrapper" class="grid_7 omega">
131
132           <ul id="quicklinks">
133             <li>
134               <a href="#">
135                 <span class="top"></span>
136                 <span class="content">
137                   <img src="css/images/box_content_get.png" width="151" height="80" alt="Box Content Get" />
138                   <strong class="headline">Download</strong>
139                   <span class="description">Download openSUSE Linux or find additional software for direct installation.</span>
140                 </span>
141                 <span class="bottom"></span>
142               </a>
143             </li>
144
145             <li>
146               <a href="#">
147                 <span class="top"></span>
148                 <span class="content">
149                   <img src="css/images/box_content_discover.png" width="151" height="80" alt="Box Content Discover" />
150                   <strong class="headline">Help</strong>
151                   <span class="description">Learn more about openSUSE Linux with tutorials, documentation and finde a helping hand. </span>
152                 </span>
153                 <span class="bottom"></span>
154               </a>
155             </li>
156
157             <li>
158               <a href="#">
159                 <span class="top"></span>
160                 <span class="content">
161                   <img src="css/images/box_content_create.png" width="153" height="80" alt="Box Content Create" />
162                   <strong class="headline">Developer Tools</strong>
163                   <span class="description">Build packages for all major Linux distributions with the Build Service and get detailed informations for development.</span>
164                 </span>
165                 <span class="bottom"></span>
166               </a>
167             </li>
168           </ul>
169         </div>
170       </div>
171
172     </div>
173     <!-- End: Display -->
174
175 <!-- End of test -->
176     
177     <div class="column grid_4 alpha">
178     
179       <div id="some_other_content" class=" ui-oo-box-shadow alpha clear-both navigation">
180         <h2 class="box-header">Navigation</h2>
181           <ul class="navigation">
182             <li><a href"#">Project Overview</a></li>
183             <li><a href"#">How to Participate</a></li>
184             <li><a href"#">Documentation</a></li>
185             <li><a href"#">Support</a></li>
186             <li><a href"#">Support Forums</a></li>
187             <li><a href"#">Contact</a></li>
188             <li><a href"#">Sitemap</a></li>
189           </ul>
190       </div>
191
192       <div id="some_other_content" class=" ui-oo-box-shadow navigation">
193         <h2 class="box-header">Navigation</h2>
194         <ul class="navigation">
195           <li><a href"#">Project Overview</a></li>
196           <li><a href"#">How to Participate</a></li>
197           <li><a href"#">Documentation</a></li>
198           <li><a href"#">Support</a></li>
199           <li><a href"#">Support Forums</a></li>
200           <li><a href"#">Contact</a></li>
201           <li><a href"#">Sitemap</a></li>
202         </ul>
203
204         <h2 class="box-subheader">Navigation</h2>
205
206         <ul class="navigation">
207           <li><a href"#">Project Overview</a></li>
208           <li><a href"#">How to Participate</a></li>
209           <li><a href"#">Documentation</a></li>
210           <li><a href"#">Support</a></li>
211           <li><a href"#">Support Forums</a></li>
212           <li><a href"#">Contact</a></li>
213           <li><a href"#">Sitemap</a></li>
214         </ul>
215           
216           <div class="box-footer">
217           </div>
218       </div>
219   
220     </div>
221     
222     <div id="some-content" class="ui-oo-box-shadow grid_12 clearfix">
223       <!-- box header -->
224       <div class="box-header grid_12">
225         
226         <ul>
227           <li><a class="selected" href="#">Page</a></li>
228           <li><a class="new" href="#">Discussion</a></li>
229           <li><a href="#">Edit</a></li>
230           <li><a href="#">History</a></li>
231           <li><a href="#">Delete</a></li>
232           <li><a href="#">Move</a></li>
233           <li><a href="#">Protect</a></li>
234           <li><a href="#">Unwatch</a></li>
235         </ul>
236         
237       </div>
238       <!-- End: box header -->
239       
240       <div class="grid_12 alpha omega">
241         <h3>Title 1</h3>
242         
243         <!-- Begin Content Area -->
244         <table id="toc" class="toc" summary="Contents">
245           <tr>
246             <td>
247               <div id="toctitle">
248                 <h2>
249                   Contents
250                 </h2>
251               </div>
252               <ul>
253                 <li class="toclevel-1">
254                   <a href="#Purpose"><span class="tocnumber">1</span> <span class="toctext">Purpose</span></a>
255                 </li>
256                 <li class="toclevel-1">
257                   <a href="#User_Qualification_Classes"><span class="tocnumber">2</span> <span class="toctext">User Qualification Classes</span></a>
258                 </li>
259                 <li class="toclevel-1">
260                   <a href="#Project_Requirements"><span class="tocnumber">3</span> <span class="toctext">Project Requirements</span></a>
261                 </li>
262                 <li class="toclevel-1">
263                   <a href="#Related_Links"><span class="tocnumber">4</span> <span class="toctext">Related Links</span></a>
264                 </li>
265               </ul>
266             </td>
267           </tr>
268         </table>
269
270         
271         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
272         
273         <div class="thumb tright">
274           <div class="thumbinner">
275             <a title="Screen Design: openSUSE-Bento" class="image" href="#">
276               <img src="images/example-image.png" width="300" height="400" alt="Example Image" /></a>
277             <div class="thumbcaption">
278               <div class="magnify">
279                 <a title="Enlarge" class="internal" href=""><img src="images_local/magnify-clip.png" width="15" height="11" alt="Magnify Clip" /></a>
280               </div>Screen Design: openSUSE-Bento
281             </div>
282           </div>
283         </div>
284         
285         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
286         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
287         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
288         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
289         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
290         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
291         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in cillum dolore eu fugiat nulla pariatur.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
292       </div>
293     
294       <div class="box-footer grid_12">
295         
296         <ul>
297           <li><a class="selected" href="#">Page</a></li>
298           <li><a class="new" href="#">Discussion</a></li>
299           <li><a href="#">Edit</a></li>
300           <li><a href="#">History</a></li>
301           <li><a href="#">Delete</a></li>
302           <li><a href="#">Move</a></li>
303           <li><a href="#">Protect</a></li>
304           <li><a href="#">Unwatch</a></li>
305         </ul>
306       </div>
307     
308     </div>
309
310     <!-- sibling-content: well, next sibling content. -->
311     <div class="container_16 sibling_p4 clearfix">
312
313       <div id="some_other_content" class="grid_6 alpha ui-oo-box-shadow no-shadow">
314         <h3>Title</h3>
315         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
316       </div>
317
318       <div id="some_other_content" class="grid_6 ui-oo-box-shadow no-shadow omega clearfix">
319         <h3>Title</h3>
320         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
321       </div>
322       
323     </div>
324     <!--  End of sibling-content -->
325
326     <!-- sibling-content: well, next sibling content. -->
327     <div class="container_16">
328       
329       <div id="some_other_content" class="grid_4 ui-oo-box-shadow no-shadow alpha">
330         <div class="box-header"></div>
331         <h3>Title</h3>
332         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
333         
334         <div class="box-footer">
335           
336         </div>
337       </div>
338
339       <div id="some_other_content" class="grid_4 ui-oo-box-shadow no-shadow">
340         <h3>Title</h3>
341         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
342       </div>
343
344       <div id="some_other_content" class="grid_4 ui-oo-box-shadow no-shadow omega clearfix">
345         <h3>Title</h3>
346         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
347       </div>
348       
349       <div id="some_other_content" class="grid_4 ui-oo-box-shadow no-shadow omega clearfix">
350         <h3>Title</h3>
351         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
352       </div>
353       
354     </div>
355     <!--  End of sibling-content -->
356     
357     
358     <!-- Note: this clears floating, set in previous elements -->
359     <div class="clear"></div>
360
361     
362   </div>
363   <!-- End: Main Content Area -->
364
365   <!-- Start: Footer -->
366   <div id="footer" class="container_16">
367     <div id="footer-content" class="grid_16 column_4 clear-block">
368       
369       <!-- NOTE: Here I currently use the CSS3 column feature. Which does not work in older Browsers. -->
370       <h3>Title</h3>
371       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
372       <h3>Title</h3>
373       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
374       <h3>Title</h3>
375       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
376       <h3>Title</h3>
377       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
378     </div>
379     <div id="footer-legal" class="ui-oo-border-top grid_16">
380       <p>
381         &copy; 2010 Novell, Inc. All rights reserved. Novell is a registered trademark and
382         openSUSE and SUSE are trademarks of Novell, Inc. in the United States and other countries.
383       </p>
384     </div>
385   </div>
386   <!-- End: Footer -->
387   
388   
389 </body>
390 </html>