Browse Source

tweak spacing on scrollable

raylu 14 years ago
parent
commit
264cabb1a2
2 changed files with 11 additions and 2 deletions
  1. 6 0
      views/pages/home.html.php
  2. 5 2
      webroot/css/home.css

+ 6 - 0
views/pages/home.html.php

@@ -21,6 +21,7 @@ $this->styles($this->html->style("/css/home.css"));
 		<div class="items">
 		<div class="items">
 			<div>
 			<div>
 				<img src="/img/scrollable/10737.jpg" alt="" />
 				<img src="/img/scrollable/10737.jpg" alt="" />
+				<p>
 	Donec ligula lorem, blandit luctus hendrerit eu, sodales a tellus. Praesent
 	Donec ligula lorem, blandit luctus hendrerit eu, sodales a tellus. Praesent
 	condimentum tincidunt auctor. Sed adipiscing lorem in erat lobortis fermentum.
 	condimentum tincidunt auctor. Sed adipiscing lorem in erat lobortis fermentum.
 	Vivamus leo tellus, commodo sit amet rutrum et, pretium nec dui. Aliquam mi
 	Vivamus leo tellus, commodo sit amet rutrum et, pretium nec dui. Aliquam mi
@@ -31,9 +32,11 @@ $this->styles($this->html->style("/css/home.css"));
 	per conubia nostra, per inceptos himenaeos. Phasellus commodo felis elementum
 	per conubia nostra, per inceptos himenaeos. Phasellus commodo felis elementum
 	dolor hendrerit non sollicitudin sem dignissim. Sed mi velit, malesuada vel
 	dolor hendrerit non sollicitudin sem dignissim. Sed mi velit, malesuada vel
 	suscipit vel, tempor eu tellus.
 	suscipit vel, tempor eu tellus.
+				</p>
 			</div>
 			</div>
 			<div>
 			<div>
 				<img src="/img/scrollable/45297.jpg" alt="" />
 				<img src="/img/scrollable/45297.jpg" alt="" />
+				<p>
 	Quisque vulputate pretium eros eu elementum. Vestibulum massa purus, aliquet
 	Quisque vulputate pretium eros eu elementum. Vestibulum massa purus, aliquet
 	sit amet cursus id, vehicula ac risus. Praesent dapibus congue feugiat. Ut
 	sit amet cursus id, vehicula ac risus. Praesent dapibus congue feugiat. Ut
 	sagittis, arcu sed placerat consequat, felis sapien suscipit erat, tincidunt
 	sagittis, arcu sed placerat consequat, felis sapien suscipit erat, tincidunt
@@ -47,9 +50,11 @@ $this->styles($this->html->style("/css/home.css"));
 	commodo mollis sed non neque. Nullam condimentum magna ac tortor ultricies nec
 	commodo mollis sed non neque. Nullam condimentum magna ac tortor ultricies nec
 	tempus urna accumsan. Phasellus pulvinar, ligula et viverra tincidunt, risus
 	tempus urna accumsan. Phasellus pulvinar, ligula et viverra tincidunt, risus
 	nunc iaculis tortor, a accumsan massa mi at libero.
 	nunc iaculis tortor, a accumsan massa mi at libero.
+				</p>
 			</div>
 			</div>
 			<div>
 			<div>
 				<img src="/img/scrollable/12018.jpg" alt="" />
 				<img src="/img/scrollable/12018.jpg" alt="" />
+				<p>
 	Ut non tortor justo. Phasellus non leo sit amet justo gravida tempor. Donec
 	Ut non tortor justo. Phasellus non leo sit amet justo gravida tempor. Donec
 	sollicitudin enim nec neque aliquet aliquam. Praesent sollicitudin, odio vitae
 	sollicitudin enim nec neque aliquet aliquam. Praesent sollicitudin, odio vitae
 	blandit euismod, arcu nisi eleifend ante, nec tempor quam lorem ut ipsum. Cras
 	blandit euismod, arcu nisi eleifend ante, nec tempor quam lorem ut ipsum. Cras
@@ -63,6 +68,7 @@ $this->styles($this->html->style("/css/home.css"));
 	porttitor vitae euismod sit amet, tempor ut ligula. Nam leo dolor, sodales non
 	porttitor vitae euismod sit amet, tempor ut ligula. Nam leo dolor, sodales non
 	suscipit ut, consectetur sit amet ante. Nunc sagittis neque sit amet est
 	suscipit ut, consectetur sit amet ante. Nunc sagittis neque sit amet est
 	blandit vel facilisis metus commodo.
 	blandit vel facilisis metus commodo.
+				</p>
 			</div>
 			</div>
 		</div>
 		</div>
 	</div>
 	</div>

+ 5 - 2
webroot/css/home.css

@@ -23,7 +23,7 @@
 	float: left;
 	float: left;
 	width: 740px;
 	width: 740px;
 }
 }
-.scrollable img {
+.scrollable .items img {
 	-moz-border-radius: 4px;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
 	-webkit-border-radius: 4px;
 	border-radius: 4px;
 	border-radius: 4px;
@@ -31,7 +31,10 @@
 	border: 1px solid #ccc;
 	border: 1px solid #ccc;
 	float: left;
 	float: left;
 	height: 300px;
 	height: 300px;
-	margin-right: 15px;
+	margin-right: 12px;
+}
+.scrollable .items img ~ p {
+	margin-right: 50px;
 }
 }
 .scrollable .active {
 .scrollable .active {
 	border: 2px solid #000;
 	border: 2px solid #000;