Scroll both photo strips with one scrollbar. Not sure yet though, it …

…feels hacky...
alloy · Mar 14, 2010 · b60b426 · b60b426
1 parent da4c6dd
commit b60b426
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 46 deletions.
diff --git a/design/index.html b/design/index.html
@@ -32,50 +32,32 @@ <h3>16. Dystopia</h3>
       <div class="clear"></div>
     </div>
 
-    <div class="row_author_1 green">
-      <div class="grid_1 alpha">
-        JERU
-      </div>
-
-      <div class="grid_11 omega">
-      </div>
-
-      <div class="clear"></div>
-    </div>
-
-    <div class="row_photos_author_1 photos">
-      <div class="grid_12 alpha">
-        <img src="photos/thumbs/JERU_01_thumb.jpg">
-        <img src="photos/thumbs/JERU_02_thumb.jpg">
-        <img src="photos/thumbs/JERU_03_thumb.jpg">
-        <img src="photos/thumbs/JERU_04_thumb.jpg">
-      </div>
+    <div class="content_wrapper">
+      <h4 id="photographer_1" class="green">JERU</h4>
+      <h4 id="photographer_2" class="green">TOMAS</h4>
 
-      <div class="clear"></div>
-    </div>
-
-    <div class="row_author_2 green">
-      <div class="grid_1 alpha">
-        TOMAS
-      </div>
-
-      <div class="grid_11 omega">
-      </div>
-
-      <div class="clear"></div>
-    </div>
-
-    <div class="row_photos_author_1 photos">
-      <div class="grid_12 alpha">
-        <img src="photos/thumbs/TOMAS_01_thumb.jpg">
-        <img src="photos/thumbs/TOMAS_02_thumb.jpg">
-        <img src="photos/thumbs/TOMAS_03_thumb.jpg">
-        <img src="photos/thumbs/TOMAS_04_thumb.jpg">
+      <div class="content grid_12 alpha omega">
+        <!-- photos of photographer 1 -->
+        <div id="photos_background_1" class="photos_background"></div>
+        <div class="photos">
+          <img src="photos/thumbs/JERU_01_thumb.jpg" />
+          <img src="photos/thumbs/JERU_02_thumb.jpg" />
+          <img src="photos/thumbs/JERU_03_thumb.jpg" />
+          <img src="photos/thumbs/JERU_04_thumb.jpg" />
+        </div>
+        
+        <!-- photos of photographer 2 -->
+        <div id="photos_background_2" class="photos_background"></div>
+        <div class="photos omega">
+          <img src="photos/thumbs/TOMAS_01_thumb.jpg" />
+          <img src="photos/thumbs/TOMAS_02_thumb.jpg" />
+          <img src="photos/thumbs/TOMAS_03_thumb.jpg" />
+          <img src="photos/thumbs/TOMAS_04_thumb.jpg" class="omega" />
+        </div>
+
+        <div class="clear"></div>
       </div>
-
-      <div class="clear"></div>
     </div>
-
   </div>
 
 </body>

diff --git a/design/stylesheets/main.css b/design/stylesheets/main.css
@@ -8,7 +8,7 @@ body {
 }
 
 .green {
-	color: #9aa92d;
+  color: #9aa92d;
 }
 
 .header {
@@ -23,13 +23,58 @@ body {
   font-size: 25px;
 }
 
-.photos {
+.content_wrapper {
+  position: relative;
+}
+
+.content_wrapper h4 {
   background-image: url('images/transparent.png');
-  padding: 10px;
-  overflow: auto;
+  padding: 0 10px; /* this still overlaps on the bottom */
+  position: absolute;
+  left 0;
+}
+
+.content {
+  margin-top: 22px;
+  overflow-x: auto;
+}
+
+#photographer_1 {
+  top: 0;
+}
+
+#photographer_2 {
+  top: 275px;
+}
+
+.photos_background {
+  z-index: -1;
+  background-image: url('images/transparent.png');
+  position: absolute;
+  left: 0;
   height: 235px;
+  width: 1000px;
+}
+
+#photos_background_1 {
+  top: 0;
+}
+
+#photos_background_2 {
+  top: 275px;
+}
+
+.photos {
+  z-index: 99;
+  padding: 10px;
+  white-space: nowrap;
+  margin-bottom: 35px;
+}
+
+.photos.omega {
+  margin-bottom: 0;
 }
 
-img {
+.photos img {
   margin-right: 10px;
 }