Hi everyone! Referring to the onion-skin implementation at <!-- m --><a class="postlink" href="http://alistapart.com/articles/onionskin/">http://alistapart.com/articles/onionskin/</a><!-- m -->, the outcome of it is very graceful indeed. However, I run into some problems when I try to put it in action.
My ultimate goal is to create a sliding gallery, with three pictures lying horizontally and one navigation button on each side. Clicking on one of the navigation buttons would shift the pictures in an array respectively to the left or right. The arrangement is shown as below.
"X A B C Y"
"X" and "Y" are the two buttons and "A B C" are the 3 pitures lying in between. "A B C" are wrapped individually in the three wrappers to create the drop shadow effect. I was trying to put everything in a "div" container.
Problem 1: "X A B C Y" is rendered as:
"X
A B C Y"
on the page. I experimented a few different things and failed. Finally, I had to create a three-column table, putting "X" in the first column, "A B C" in the 2nd and "Y" in the third, to gain control( "A B C" are not in uniform width ). Could someone possibly tell me what causes the problem and how to fix it without using a table please?
Problem 2: Although "A B C" align perfectly with each other, there is no space between "A" and "B" or "B" and "C". I tried to apply a forth wrapper outside the three original wrappers to create the padding. Failed once again. Could someone please give me a few pointers?
Problem 3: The original implementation blends perfectly with a white background. However, it shows a distintive white border on color backgrounds. It's possible to change the color of the images used in the implementation to the background color. Is there a more flexible way without modifying those images? This is the link to the images used in the implementation. <!-- m --><a class="postlink" href="http://alistapart.com/d/onionskin/gallery.html">http://alistapart.com/d/onionskin/gallery.html</a><!-- m -->
Respect to you all! Cheers!Here's how I wrote the piece.
<span class="left_arrow"><img src=http://www.webdeveloper.com/forum/archive/index.php/"left_arrow.jpg"></span>
<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"A.jpg" /></div></div></div>
<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"B.jpg" /></div></div></div>
<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"C.jpg" /></div></div></div>
<span class="left_arrow"><img src=http://www.webdeveloper.com/forum/archive/index.php/"right_arrow.jpg"></span>
I ommited all the unnecessary things like javascripts and "alt" tags.1) and 2) Without looking at your code we can not help.
3) You have to change the onionskin images to graduate from your background color to gray.
My ultimate goal is to create a sliding gallery, with three pictures lying horizontally and one navigation button on each side. Clicking on one of the navigation buttons would shift the pictures in an array respectively to the left or right. The arrangement is shown as below.
"X A B C Y"
"X" and "Y" are the two buttons and "A B C" are the 3 pitures lying in between. "A B C" are wrapped individually in the three wrappers to create the drop shadow effect. I was trying to put everything in a "div" container.
Problem 1: "X A B C Y" is rendered as:
"X
A B C Y"
on the page. I experimented a few different things and failed. Finally, I had to create a three-column table, putting "X" in the first column, "A B C" in the 2nd and "Y" in the third, to gain control( "A B C" are not in uniform width ). Could someone possibly tell me what causes the problem and how to fix it without using a table please?
Problem 2: Although "A B C" align perfectly with each other, there is no space between "A" and "B" or "B" and "C". I tried to apply a forth wrapper outside the three original wrappers to create the padding. Failed once again. Could someone please give me a few pointers?
Problem 3: The original implementation blends perfectly with a white background. However, it shows a distintive white border on color backgrounds. It's possible to change the color of the images used in the implementation to the background color. Is there a more flexible way without modifying those images? This is the link to the images used in the implementation. <!-- m --><a class="postlink" href="http://alistapart.com/d/onionskin/gallery.html">http://alistapart.com/d/onionskin/gallery.html</a><!-- m -->
Respect to you all! Cheers!Here's how I wrote the piece.
<span class="left_arrow"><img src=http://www.webdeveloper.com/forum/archive/index.php/"left_arrow.jpg"></span>
<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"A.jpg" /></div></div></div>
<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"B.jpg" /></div></div></div>
<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"C.jpg" /></div></div></div>
<span class="left_arrow"><img src=http://www.webdeveloper.com/forum/archive/index.php/"right_arrow.jpg"></span>
I ommited all the unnecessary things like javascripts and "alt" tags.1) and 2) Without looking at your code we can not help.
3) You have to change the onionskin images to graduate from your background color to gray.