Solved

CSS Sticky Tape

Posted on 2013-11-16
9
307 Views
Last Modified: 2013-11-17
I am trying to use the CSS Sticky Tape Feature. It works ok except the sticky tape shows 4 ticky tapes instead of 3. It is probably due to the figure group.

<html>
<head>
<title>Test</title>
<style type="text/css">
figure, figcaption {
display: block;
}
#picture{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#picture figure{
float:left;
position:relative;
width:200px;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-backface-visibility:hidden;
}
#picture figure:nth-child(even) {
-webkit-transform:rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-backface-visibility:hidden; 
}
figure:before { 
content: '';
display: block;
position: absolute;
left:5px; 
top: -15px; 
width: 75px; 
height: 25px; 
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
</style>
</head>
<body>
<div id="picture">
<figure role="group">
<figure>
<img src="TestVideos/Clouds.jpg" width="200" height="200" />
<figcaption>Clouds</figcaption>
</figure>
<figure>
<img src="TestVideos/Fields.jpg" width="200" height="200" />
<figcaption>Fields</figcaption>
</figure>
<figure>
<img src="TestVideos/sunset.jpg" width="200" height="200" />
<figcaption>Sunset</figcaption>
</figure>
</figure>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:RecipeDan
  • 4
  • 3
  • 2
9 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
Comment Utility
You had double opening figure tags at the top and double closing at the bottom.  You need to open and close your tags in the same order.  I removed the figure tag at the top and closing at the bottom.
http://jsbin.com/OWaramU/1/edit?html,output
<html>
<head>
<title>Test</title>
<style type="text/css">
figure, figcaption {
display: block;
}
#picture{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#picture figure{
float:left;
position:relative;
width:200px;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-backface-visibility:hidden;
}
#picture figure:nth-child(even) {
-webkit-transform:rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-backface-visibility:hidden; 
}
figure:before { 
content: '';
display: block;
position: absolute;
left:5px; 
top: -15px; 
width: 75px; 
height: 25px; 
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
</style>
</head>
<body>
<div id="picture">
<figure role="group">
  <img src="TestVideos/Clouds.jpg" width="200" height="200" />
   <figcaption>Clouds</figcaption>
</figure>
<figure>
  <img src="TestVideos/Fields.jpg" width="200" height="200" />
  <figcaption>Fields</figcaption>
</figure>
<figure>
  <img src="TestVideos/sunset.jpg" width="200" height="200" />
  <figcaption>Sunset</figcaption>
</figure>

</div>
</body>
</html>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
It would have been semantically incorrect to nest figure inside of figure anyway.  Ofcourse that is academic, as the figure was not introduced until HTML5, so every reference to figure results in a validation error.  it will probably run alright in Firefox and Chrome.  May run in IE9+ if not in quirksmode or set to compatibility mode.

I IE <9 it is not going to work at all.

Cd&
0
 
LVL 1

Author Comment

by:RecipeDan
Comment Utility
It works great but how do I get them Vertical?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 100 total points
Comment Utility
Get rid of the float:left.  That tells the browser not to put them on the next line if there is room on the current line.

Cd&
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Use the link I gave you http://jsbin.com/OWaramU/1/edit?html,output and play with the rotate  value's.  rotate(-12deg)
0
 
LVL 1

Author Comment

by:RecipeDan
Comment Utility
No I mean something like this

Video 1
Video 2
Video 3

Not this: video 1  video 2   video 3
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Cd& gave you the answer.  Take away the float left.  http://jsbin.com/OWaramU/3/edit?html,output
0
 
LVL 1

Author Comment

by:RecipeDan
Comment Utility
OK...it works great. For some reason the link wouldn't open on my phone. Anyway, thanks everyone for your help.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I'm sorry, for reference this is the updated code
<html>
<head>
<title>Test</title>
<style type="text/css">
figure, figcaption {
display: block;
}
#picture{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#picture figure{
    /*float:left;*/
position:relative;
width:200px;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-backface-visibility:hidden;
}
#picture figure:nth-child(even) {
-webkit-transform:rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-backface-visibility:hidden; 
}
figure:before { 
content: '';
display: block;
position: absolute;
left:5px; 
top: -15px; 
width: 75px; 
height: 25px; 
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
</style>
</head>
<body>
<div id="picture">
<figure role="group">
  <img src="TestVideos/Clouds.jpg" width="200" height="200" />
   <figcaption>Clouds</figcaption>
</figure>
<figure>
  <img src="TestVideos/Fields.jpg" width="200" height="200" />
  <figcaption>Fields</figcaption>
</figure>
<figure>
  <img src="TestVideos/sunset.jpg" width="200" height="200" />
  <figcaption>Sunset</figcaption>
</figure>
  
</div>
</body>
</html>

Open in new window

0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now