My CSS notebook creation featuring box-shadow and margin can be viewed here: JSFiddle
The issue I'm facing is that when a line break occurs, the notebook row expands, causing it to lose its notebook-like appearance. Is there a way to ensure each line appears below every row of text?
Daniel
HTML
<div id="receitas">
<br />
<div class="ingredientes">
<div class="titulo">
<p>Ingredientes</p>
</div>
<ul>
<li> </li>
<li><p class="subtitulo">Massa: </p></li>
<li><p>2 colheres de (chá) de bicarbonato</p></li>
<li><p>1 e ½ xícaras de (chá) de Leite Porto Real Tipo A, não pode ser desnatado</p></li>
<li><p>1 xícara de (chá) de chocolate em pó</p></li>
</ul>
</div>
CSS
#receitas {
position: relative;
width: 100%;
font-family: 'Crafty Girls', cursive;
font-size: 15px;
margin-top: 30px;
width: 410px;
}
#receitas .ingredientes {
width: 100%;
max-width: 600px;
padding: 2px 2px 0 0px;
margin: 0 auto;
}
#receitas .ingredientes p {
margin: 0 0px;
line-height: 25px;
margin-left: 30px;
color: rgb(128, 128, 128);
}
#receitas .ingredientes .titulo {
font-weight: bold;
position: relative;
margin: -13px 10px;
}
#receitas .ingredientes .subtitulo {
font-weight: bold;
}
#receitas .ingredientes .titulo p {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
background: url(/images/agronelli/alimentos/receitas/fundotitulo.png) no-repeat top left;
margin: 0 auto;
width: 150px;
}
#receitas .ingredientes ul {
margin-bottom: 0px;
padding-right: 5%;
}
#recei...