Skip to content
Browse files

Cleaning up and adding demos

  • Loading branch information...
1 parent cd34aaf commit 19042448f8b6507efe3d529815bc11cbc99ca643 @p-m-p committed Mar 26, 2011
Showing with 50 additions and 5 deletions.
  1. +22 −4 index.php → index.html
  2. +28 −1 style/sticky.css
View
26 index.php → index.html
@@ -13,12 +13,30 @@
<div id="main">
<h2>Product catalogue</h2>
<ul id="products">
- <?php for ($i = 1; $i <= 30; ++$i) : ?>
- <li<?php if ($i % 3 == 0) echo ' class="end"'; ?>>
- <h3>Product <?php echo $i ?></h3>
+ <li>
+ <h3>Product</h3>
+ <img src="style/images/product.png" width="126" height="126" alt="product image" />
+ </li>
+ <li>
+ <h3>Product</h3>
+ <img src="style/images/product.png" width="126" height="126" alt="product image" />
+ </li>
+ <li class="end">
+ <h3>Product</h3>
+ <img src="style/images/product.png" width="126" height="126" alt="product image" />
+ </li>
+ <li>
+ <h3>Product</h3>
+ <img src="style/images/product.png" width="126" height="126" alt="product image" />
+ </li>
+ <li>
+ <h3>Product</h3>
+ <img src="style/images/product.png" width="126" height="126" alt="product image" />
+ </li>
+ <li class="end">
+ <h3>Product</h3>
<img src="style/images/product.png" width="126" height="126" alt="product image" />
</li>
- <?php endfor; ?>
</ul>
</div>
<div id="side">
View
29 style/sticky.css
@@ -1,5 +1,5 @@
#wrap { width: 800px; margin: 0 auto; }
-#main { width: 500px; margin: 0 25px 0 0; float: left; }
+#main { width: 500px; height: 1800px; margin: 0 25px 0 0; float: left; }
#side {
width: 275px;
float: left;
@@ -12,6 +12,7 @@
border-radius: 12px;
padding: 10px;
background: white;
+ position: relative;
}
#basket h3 {
margin: 0 0 15px 0;
@@ -39,3 +40,29 @@
text-align: center;
}
.end { margin-right: 0 !important }
+
+/* =Multi page demo
+--------------------------------------------------------------------------*/
+#left, #right { width: 200px; float: left; }
+#middle { width: 400px; float: left; height: 2000px; }
+#navbox {
+ list-style: none;
+ margin: 100px 0 0;
+ padding: 10px 10px 0 10px;
+ border: solid 1px silver;
+}
+#navbox li {
+ margin: 0 0 10px 0;
+}
+
+#realtest { position: absolute; left: 20px; top: 450px; }
+#floatedbox {
+ width: 150px;
+ height: 150px;
+ background-color: white;
+ position: absolute;
+ top: 10px;
+ left: 20px;
+ border: solid 1px silver;
+ padding: 10px;
+}

0 comments on commit 1904244

Please sign in to comment.
Something went wrong with that request. Please try again.