servicemix-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From cmoulli...@apache.org
Subject svn commit: r1174309 - in /servicemix/sandbox/cmoulliard: ServiceMix-home2.html styles/style2.css
Date Thu, 22 Sep 2011 18:43:39 GMT
Author: cmoulliard
Date: Thu Sep 22 18:43:38 2011
New Revision: 1174309

URL: http://svn.apache.org/viewvc?rev=1174309&view=rev
Log:
Add new home page using div + css instead of html table

Added:
    servicemix/sandbox/cmoulliard/ServiceMix-home2.html
      - copied, changed from r1172641, servicemix/sandbox/cmoulliard/ServiceMix-home.html
    servicemix/sandbox/cmoulliard/styles/style2.css
      - copied, changed from r1172641, servicemix/sandbox/cmoulliard/styles/style.css

Copied: servicemix/sandbox/cmoulliard/ServiceMix-home2.html (from r1172641, servicemix/sandbox/cmoulliard/ServiceMix-home.html)
URL: http://svn.apache.org/viewvc/servicemix/sandbox/cmoulliard/ServiceMix-home2.html?p2=servicemix/sandbox/cmoulliard/ServiceMix-home2.html&p1=servicemix/sandbox/cmoulliard/ServiceMix-home.html&r1=1172641&r2=1174309&rev=1174309&view=diff
==============================================================================
--- servicemix/sandbox/cmoulliard/ServiceMix-home.html (original)
+++ servicemix/sandbox/cmoulliard/ServiceMix-home2.html Thu Sep 22 18:43:38 2011
@@ -3,169 +3,131 @@
 <head>
     <meta content="text/html; charset=ISO-8859-1"
           http-equiv="content-type">
-    <link rel="stylesheet" href="styles/style.css" type="text/css">
+    <link rel="stylesheet" href="styles/style2.css" type="text/css">
     <title>ServiceMix-home</title>
 </head>
 <body>
-<table style="text-align: left;  height: 53px;" cellpadding="2" cellspacing="2">
-    <tbody>
-    <tr>
-        <td style="width: 45%;">
-            <img style="width: 437px; height: 110px;"
-                 src="images/logo-smx-tm-feather.png" alt="logo-smx-tm-feather"><br>
-        </td>
-        <td style="width: 55%;">
-            <table cellpadding="2" cellspacing="2">
-                <tbody>
-                <tr>
-                    <td>
-                        <div id="nav">
-                            <ul>
-                                <li><a href="#">Home</a></li>
-                                <li><a href="#">Download</a></li>
-                                <li><a href="#">Getting Started</a></li>
-                                <li><a href="#">Tutorials</a></li>
-                                <li><a href="#">Support</a></li>
-                                <li><a href="#">Contact</a></li>
-                            </ul>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </td>
-    </tr>
-    <tr>
-        <td colspan="2" rowspan="1">
-            <img class="blueline" alt="blue-line" src="images/blue-line.png">
-        </td>
-    </tr>
-    </tbody>
-</table>
-<br>
-<table style="text-align: left; height: 390px;" cellpadding="2" cellspacing="2">
-    <tbody>
-    <tr>
-        <td style=" width: 70%;">
-            <table style="text-align: left; width: 100%; margin-left: auto; margin-right:
auto;"
-                   cellpadding="2" cellspacing="2">
-                <tbody>
-                <tr>
-                    <td style="width: 267px; text-align: center;">
-                        <img style="width: 96px; height: 99px;" alt="earth" src="images/earth.png"><br>
-                    </td>
-                    <td style="width: 429px;">
-                        <div class="bigText" >Leading Enterprise ServiceBus</div>
+
+<div id="wrapper">
+    <div class="table">
+        <div class="row">
+            <div id="logos">
+                <img src="images/logo-smx-tm-feather.png" alt="logo-smx-tm-feather">
+            </div>
+            <div id="nav">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Download</a></li>
+                    <li><a href="#">Getting Started</a></li>
+                    <li><a href="#">Tutorials</a></li>
+                    <li><a href="#">Support</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div>
+        <img id="separator" alt="blue-line" src="images/blue-line.png">
+    </div>
+
+    <div class="table">
+        <div class="row">
+            <div class="general">
+                <div>
+                    <div style="display: inline; vertical-align: top;">
+                        <img style="width: 96px; height: 99px;" alt="earth" src="images/earth.png">
+                    </div>
+                    <div style="display: inline; text-align: center;">
+                        <div class="bigText">Leading Enterprise ServiceBus</div>
                         <div class="bigTextBold">in<br>Open Source World</div>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2" rowspan="1" style="">
-                        <small><span
-                                style="font-weight: bold;">The Apache Service Mix Project</span><br>
-                            <br>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span
-                                    class="colorLinks">Morbi tincidunt</span> urna
vel
-                            lectus porta quis dapibus augue iaculis. Integer in purus nibh,
sed
-                            aliquet diam. Nam hendrerit tempor nisi quis ultrices. Praesent
luctus
-                            hendrerit volutpat. In hac habitasse platea dictumst. Phasellus
mauris
-                            leo, placerat a condimentum eget, varius vel nisi. Quisque nec
sem
-                            neque, ac sollicitudin urna. <br>
-                            Nulla lobortis suscipit ligula, auctor pretium risus tempus vitae.
-                            Aliquam mattis, nunc nec tristique molestie, sapien tortor convallis
-                            tortor, nec elementum purus libero a eros. Duis et est lorem,
vehicula
-                            ultricies diam. Nulla rhoncus ullamcorper iaculis. Proin venenatis
-                            commodo ante vitae venenatis. <br>
-                            <br>
-                            <span class="colorLinks" ">Maecenas gravida
-                            mollis </span>dui vitae laoreet. Donec non tincidunt mauris.
Ut
-                            ultrices condimentum tortor sed sollicitudin. Aliquam ac metus
massa.
-                            Aliquam euismod adipiscing nulla, ut congue justo dignissim non.
Sed
-                            sem eros, placerat in adipiscing et, posuere nec dui. <br>
-                        </small>
-                    </td>
-                </tr>
-                <tr align="right">
-                    <td colspan="2" rowspan="1" style=""><img
-                            style="width: 63px; height: 22px;" alt="more"
-                            src="images/more-light-blue.png"><br>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-            <br>
-        </td>
-        <td style=" width: 30%;">
-            <div style="text-align: right;"></div>
-            <table style="text-align: left; width: 168px; height: 362px; margin-left:
auto; margin-right: 0px;"
-                   cellpadding="2" cellspacing="2">
-                <tbody>
-                <tr>
-                    <td><img
-                            style="width: 250px; height: 32px;" alt="search"
-                            src="images/search.png"><br>
-                    </td>
-                </tr>
-                <tr align="right">
-                    <td>
-                        <div class="buttonImgGetIt">
-                            <br><b>Get It</b></br>
-                            <br>Download the latest version of Apache ServiceMix here</br>
-                        </div>
-                    </td>
-                </tr>
-                <tr align="right">
-                    <td>
-                        <div class="buttonLearn">
-                            <br><b>Discover It</b></br>
-                            <br>Learn how to use power of Apache ServiceMix</br>
-                        </div>
-                    </td>
-                </tr>
-                <tr align="right">
-                    <td>
-                        <div class="buttonImgGetInvolved">
-                           <br><b>Get Involved</b></br>
-                           <br>Contribute to the project and become part of it</br>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-            <br>
-        </td>
-    </tr>
-    </tbody>
-</table>
-<br>
-<table style="text-align: left; width: 1040px; height: 451px;" cellpadding="2" cellspacing="2">
-    <tbody>
-    <tr>
-        <td style="width: 33%;">
+                    </div>
+                </div>
+                <div>
+                    <div class="bigTextBold" style="text-align: left;">The Apache Service
Mix Project</p></div>
+                    <div class="smallText">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span
+                            class="colorLinks">Morbi tincidunt</span> urna vel
+                        lectus porta quis dapibus augue iaculis. Integer in purus nibh, sed
+                        aliquet diam. Nam hendrerit tempor nisi quis ultrices. Praesent luctus
+                        hendrerit volutpat. In hac habitasse platea dictumst. Phasellus mauris
+                        leo, placerat a condimentum eget, varius vel nisi. Quisque nec sem
+                        neque, ac sollicitudin urna. <br>
+                        Nulla lobortis suscipit ligula, auctor pretium risus tempus vitae.
+                        Aliquam mattis, nunc nec tristique molestie, sapien tortor convallis
+                        tortor, nec elementum purus libero a eros. Duis et est lorem, vehicula
+                        ultricies diam. Nulla rhoncus ullamcorper iaculis. Proin venenatis
+                        commodo ante vitae venenatis. <br>
+                        <br>
+                        <span class="colorLinks" ">Maecenas gravida
+                        mollis </span>dui vitae laoreet. Donec non tincidunt mauris.
Ut
+                        ultrices condimentum tortor sed sollicitudin. Aliquam ac metus massa.
+                        Aliquam euismod adipiscing nulla, ut congue justo dignissim non.
Sed
+                        sem eros, placerat in adipiscing et, posuere nec dui.
+                        <p/>
+                    </div>
+                    <div style="text-align: right;">
+                        <img style="width: 63px; height: 22px;" alt="more" src="images/more-light-blue.png">
+                        <p>
+                    </div>
+                </div>
+            </div>
+            <div class="searchAndButtons">
+                <div style="padding-bottom: 10px;">
+                    <img style="width: 250px; height: 32px;" alt="search" src="images/search.png">
+                </div>
+                <div style="float: right; padding-bottom: 30px;">
+                <div class="buttonImgGetIt">
+                    <b>Get It</b>
+                    <p/>
+                    Download the latest
+                    version of Apache
+                    ServiceMix here
+                </div>
+                <div class="buttonLearn">
+                    <b>Discover It</b>
+                    <p/>
+                    Learn how to use
+                    power of Apache
+                    ServiceMix
+                </div>
+                <div class="buttonImgGetInvolved">
+                    <b>Get Involved</b>
+                    <p/>
+                    Contribute to
+                    the project
+                    and become part
+                    of it
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table">
+        <div class="row">
+            <div class="news">
                 <div class="colorBoldNewsTitle">News</div>
                 <div class="smallText">
-                <br>
-                10.05.10 | Lorem ipsum dolor sit amet, consectetur <br>
-                adipiscing elit,Lorem ipsum dolor sit amet, consectetur <br>
-                adipiscing elit. Nulla non elit metus, at ullamcorper i<br>
-                psum. Vestibulum ante ipsum primis in faucibus orci <br>
-                luctus et ultrices posuere cubilia Curae; Integer eget <br>
-                ultrices dui. Etiam varius vulputate velit viverra tristique. <br>
-                Etiam non est ac erat fermentum ullamcorper quis ac <br>
-                lorem. Integer quis turpis a dolor molestie fringilla nec <br>
-                non nulla...<br>
-                </div>
-            <div style="text-align: right;">
-                <small><img
-                        style="width: 63px; height: 22px;" alt="more"
-                        src="images/more-dark-blue.png"></small>
-                <br>
-            </div>
-        </td>
-        <td><img class="verticalLineBlue" alt="vertical-line" src="images/vertical-line2-blue.png"><br>
-        </td>
-        <td style="width: 33%;">
-             <div class="colorBoldNewsTitle">Recent changes</div>
+                    <br>
+                    10.05.10 | Lorem ipsum dolor sit amet, consectetur <br>
+                    adipiscing elit,Lorem ipsum dolor sit amet, consectetur <br>
+                    adipiscing elit. Nulla non elit metus, at ullamcorper i<br>
+                    psum. Vestibulum ante ipsum primis in faucibus orci <br>
+                    luctus et ultrices posuere cubilia Curae; Integer eget <br>
+                    ultrices dui. Etiam varius vulputate velit viverra tristique. <br>
+                    Etiam non est ac erat fermentum ullamcorper quis ac <br>
+                    lorem. Integer quis turpis a dolor molestie fringilla nec <br>
+                    non nulla...<br>
+                </div>
+                <div class="morebutton">
+                    <img class="moreblueimage" alt="more" src="images/more-dark-blue.png">
+                </div>
+                <div>
+                    <img class="verticalLineBlue" alt="vertical-line" src="images/vertical-line2-blue.png">
+                </div>
+            </div>
+            <div class="news">
+                <div class="colorBoldNewsTitle">Recent changes</div>
                 <div class="smallText">
                     <br>
                     10.05.10 | Lorem ipsum dolor sit amet, consectetur <br>
@@ -178,51 +140,43 @@
                     lorem. Integer quis turpis a dolor molestie fringilla nec <br>
                     non nulla...<br>
                 </div>
-            <div style="text-align: right;">
-                <small> <img class="moreblueimage" alt="more" src="images/more-light-blue.png"></small>
-                 <br>
-            </div>
-        </td>
-        <td><img class="verticalLineBlue" alt="vertical-line" src="images/vertical-line2-blue.png"><br>
-        </td>
-        <td style="width: 33%;">
-             <div class="colorBoldNewsTitle">User's guide</div>
+                <div class="morebutton">
+                    <img class="moreblueimage" alt="more" src="images/more-light-blue.png">
+                </div>
+                <div>
+                    <img class="verticalLineBlue" alt="vertical-line" src="images/vertical-line2-blue.png">
+                </div>
+            </div>
+            <div class="news">
+                <div class="colorBoldNewsTitle">User's guide</div>
                 <div class="smallText">
                     <br>
                     Welcome to Apache ServiceMix Users' Guide. This guide is a work in
                     progress from the Apache ServiceMix community. <br>
                     &nbsp;&nbsp; <span style="font-weight: bold;">Your contributions
to
-    this documentation effort are welcome</span>; just comment the
+        this documentation effort are welcome</span>; just comment the
                     appropriate wiki page (bottom of page) or use the freely accessible
                     wiki area or ask for a wiki log in (best for continous contribution)
or
                     send your suggestions at the mailing list.<br>
                     <br>
                 </div>
-            <div style="text-align: right;">
-                <small>
-                    <img class="moreblueimage" alt="more"
-                        src="images/more-dark-blue.png">
-                 </small>
-                 <br>
-            </div>
-        </td>
-    </tr>
-    </tbody>
-</table>
-<br>
-<table style="text-align: left; width: 100%;" cellpadding="2" cellspacing="2">
-    <tbody>
-    <tr>
-        <td style="text-align: center;">
-            <div class="colorLinks">Home | Download | Getting Started | Tutorials |
Support | Contact</div>
-        </td>
-    </tr>
-    <tr align="center">
-        <td>
-            <img style="width: 365px; height: 10px;" alt="copyright" src="images/copyright.png"><br>
-        </td>
-    </tr>
-    </tbody>
-</table>
+                <div class="morebutton">
+                    <img class="moreblueimage" alt="more" src="images/more-dark-blue.png">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+    <div class="tableFooter">
+        <div class="row">
+            <div id="footer">
+                <div class="colorLinks">Home | Download | Getting Started | Tutorials
| Support | Contact</div>
+                <div id="imageFooter"><img alt="copyright" src="images/copyright.png"></div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
 </body>
 </html>

Copied: servicemix/sandbox/cmoulliard/styles/style2.css (from r1172641, servicemix/sandbox/cmoulliard/styles/style.css)
URL: http://svn.apache.org/viewvc/servicemix/sandbox/cmoulliard/styles/style2.css?p2=servicemix/sandbox/cmoulliard/styles/style2.css&p1=servicemix/sandbox/cmoulliard/styles/style.css&r1=1172641&r2=1174309&rev=1174309&view=diff
==============================================================================
--- servicemix/sandbox/cmoulliard/styles/style.css (original)
+++ servicemix/sandbox/cmoulliard/styles/style2.css Thu Sep 22 18:43:38 2011
@@ -4,6 +4,62 @@ body {
     font-family: Lucida Grande, arial, sans-serif;
 }
 
+#wrapper {
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.table {
+  display: table;
+  border-collapse: collapse;
+}
+
+.tableFooter {
+  display: table;
+  width: 1300px;
+  position: inherit;
+  text-align: center;
+}
+
+.row {
+  display: table-row;
+}
+
+.news {
+    display: table-cell;
+    width: 33%;
+    padding-left: 10px;
+}
+
+.general {
+    display: table-cell;
+    width: 70%;
+}
+
+.searchAndButtons {
+    display: table-cell;
+    width: 30%;
+    text-align: right;
+}
+
+#logos {
+  display: table-cell;
+  width: 100px;
+}
+
+#separator {
+  width: 1350px;
+  height: 3px;
+}
+
+#footer {
+  display: table-cell;
+  font-size: 100%;
+  padding: 0.2em 10px 0.2em 0;
+  text-align: center;
+}
+
 hr {
     border: 0;
     background: url(../images/blue-line.png) no-repeat scroll;
@@ -13,6 +69,7 @@ hr {
 .smallText {
     font-size: 0.75em;
     word-spacing: 0.3em;
+    padding-left: 5px;
 }
 
 .bigText{
@@ -42,6 +99,7 @@ hr {
 }
 
 .buttonImgGetIt {
+    text-indent: 0px;
     width: 132px;
     height: 80px;
     padding: 1em;
@@ -90,6 +148,11 @@ hr {
     width: 1350px;
 }
 
+.morebutton {
+    text-align: right;
+    padding-right: 10px;
+}
+
 .moreblueimage {
     width: 63px; height: 22px;
 }
@@ -101,8 +164,8 @@ table td {
 }
 
 #nav {
-    width: 1100px;
-    margin: 10px auto;
+    display: table-cell;
+    width: 500px;
 }
 
 #nav ul {
@@ -121,7 +184,6 @@ table td {
     -moz-box-shadow: 1px 1px 3px #333;
     -webkit-box-shadow: 1px 1px 3px #333;
     box-shadow: 1px 1px 3px #333;
-
     text-shadow: 0 1px 0 white;
 }
 



Mime
View raw message