Hola Nimie!~ Veamos lo que pasa es que para combinar ambos tutoriales debes revisar las partes de cada código que deseas incluir y cuales debes quitar. Empecemos con el código del tutorial 06:
- Código:
<div class="mimi"><div class="momo"><img src="http://placehold.it/260x100" class="panther"/>
[left]<span>[i][b]the black panther[/b][/i] has been the protector of wakanda for generations.
<span style="letter-spacing:1px; font-size:9px;">a mantle passed from warrior to warrior</span>.</span>
[/left]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</div></div>
Si te fijas, la parte de la imagen es lo que tenemos que quitar y sustituir con el tuto 03.
- Código:
<div class="mimi"><div class="momo"><img src="http://placehold.it/260x100" class="panther"/>
En lugar de la etiqueta
img vamos a poner un div para que en el interior pueda ir más texto además de una imagen de fondo.
Entonces tomamos el código del tuto 03:
- Código:
<div class="amazing"><div class="grace">This is a title</br><span style="letter-spacing:2px; font-size:10px;line-height:36px;">and this is a subtitle</span></div></div>
Y lo sustituimos en el del tuto 06 de esta forma:
- Código:
<div class="mimi"><div class="momo">
<div class="amazing"><div class="grace">This is a title</br><span style="letter-spacing:2px; font-size:10px;line-height:36px;">and this is a subtitle</span></div></div>
[left]<span>[i][b]the black panther[/b][/i] has been the protector of wakanda for generations.
<span style="letter-spacing:1px; font-size:9px;">a mantle passed from warrior to warrior</span>.</span>
[/left]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</div></div>
Una vez que juntamos todo y ponemos el correspondiente CSS de ambos códigos en uno solo (así como corregimos el width y demás cositas para que quede mejor alineado), nos deberia quedar más o menos de esta forma:
This is a titleand this is a subtitle
the black panther has been the protector of wakanda for generations.
a mantle passed from warrior to warrior.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Te dejo todo el código de como quedaría para que lo revises y notes lo que cambiamos, cualquier otra cosita dime!
- Código:
<div class="mimi"><div class="momo"><div class="amazing"><div class="grace">This is a title</br><span style="letter-spacing:2px; font-size:10px;line-height:36px; color:white;">and this is a subtitle</span></div></div>
[left]<span>[i][b]the black panther[/b][/i] has been the protector of wakanda for generations.
<span style="letter-spacing:1px; font-size:9px;">a mantle passed from warrior to warrior</span>.</span>[/left]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</div></div>
<style>.mimi { width: 340px; padding: 10px; background: url(http://i122.photobucket.com/albums/o271/KaiEiri/Graphics/Backgrounds/e95a298d3d18bc688114ba431c97a489_zpsq0nd4fig.jpg); } .momo { width: 200px; padding: 50px; font-family: calibri, arial; background: #fff; font-size: 9px; margin: 20px; text-align: justify; } .momo span { letter-spacing: -1px; font-family: times new roman; color: #000; line-height: 19px; font-size: 19px;} .amazing { width:300px; height:200px; margin-top: -50px; margin-left:-50px; background-image: url(http://i64.tinypic.com/20ac2hi.jpg); background-position: 47% 50%; } .grace { padding-top:25px; margin-left:40px; font-size:49px; font-family:montserrat; color:white; letter-spacing:-3px; line-height:45px; text-align:left; }
</style>
Staff
Índice
Conectarse
Registrarse
Últimas imágenes
Intenté cambiar lo de la etiqueta de la imagen, pero me salió una cosa aún más rara xD. Ahora me lo volveré a mirar con calma para entender bien qué hiciste 
