Últimos temas
élite + brothersites
vududoll ➹ reviews

Comparte
Ver el tema anteriorIr abajoVer el tema siguiente
avatar
designer
el Miér Feb 28, 2018 6:00 am
Mensajes :
109


Blood :
26480


Frase :
Paciencia conmigo. Soy novata :3

Hola

Buenos...de nuevo yo la pesada XD
A ver...estoy haciendo una tablita. Y las dos ultimas imagenes (relaciones importantes) por algún motivo, el texto me sale descuadrado. El tamaño es el mismo que las otras (es el mismo código) así que realmente no se porque las dos primeras se ven bien y las otras dos no.
Dejo el codigo:

Código:
<style>@import url('https://fonts.googleapis.com/css?family=Sree+Krushnadevaraya');.cajaentera{text-align:center;background-color:#0B0808; border-left: 10px solid #890000; border-right: 10px solid #890000; width: 500px;}.Titulo{color:#890000;font-size: 25px;font-family: 'Sree Krushnadevaraya';text-align:center; letter-spacing: 3px;}.cajainfo{background-color:#423535;width: 500px;}.cajainfo{width: 500px;height: 200px;}.imagen:hover .informacion{opacity: 1; transition:0.5s linear;-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);top:-300}.imagen{overflow:hidden;width: 500px; height: 200px;}.informacion{transition: 0.5s linear;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity: 0;margin-top: -250px;background-color: black; background-color: rgba( 0, 0, 0, 0.5);color: white; font-size: 10px; padding-left: 8px; padding-top: 13px;padding-right: 10px; width: 500px; height: 200px;overflow:auto;}.cajalegend{padding: 10px;}.titurelas{color:#890000;font-size: 19px;font-family: 'Sree Krushnadevaraya';text-align:center; letter-spacing: 3px;}
</style>

<div class="cajaentera">
<div class="Titulo">RELACIONES DE FULANITO</div>
<div style="border-bottom: 4px solid #890000;"></div>
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/a02a5e65c6abc4fd802245fdba95ff88/tumblr_onn2mq1T4l1ro0ctvo1_500.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
<div class="cajalegend">[color=#5C0101]Civiles[/color] - [color=#B8B8B8]Luciernagas[/color] - [color=#0A4D00]Militares[/color] - [color=#455459]Saqueadores[/color] - [color=#A82700]Sectarios[/color] - [color=#B8A007]Viejo gobierno[/color] - [color=#6EB3CC]Nuevo gobierno[/color] - [color=#C70808]Inmunes[/color]</div>
<div class="titurelas">[u]RELACIONES AMISTOSAS[/u]</div>
[b]Amigos de la infancia[/b]
[i]"Nos conocemos desde niños y nos hemos criado juntos"[/i]
-
-
[b]Amigos de conveniencia[/b]
[i]"Cuando me interesa eres mi amigo y cuando no, no."[/i]
-
-
[b]Amigos de copas[/b]
[i]"Con quien tomo algo. No solemos vernos fuera del local"[/i]
-
-
[b]Conocidos[/b]
[i]"Apenas nos conocemos"[/i]
-
-
<div class="titurelas">[u]RELACIONES ROMÁNTICAS[/u]</div>

[b]Amigos con derechos[/b]
[i]"Solo somos buenos amigos pero sabemos divertirnos juntos"[/i]
-
-
[b]Amor plátonico[/b]
[i]"Se que es imposible que estemos juntos pero me encantas"[/i]
-
-
[b]Lio de una noche[/b]
[i]"Probablemente no se vuelva a repetir"[/i]
-
-
<div class="titurelas">[u]RELACIONES HOSTILES[/u]</div>

[b]Enemigos[/b]
[i]"No nos aguantamos ni hacemos nada por disimularlo"[/i]
-
-
<div class="Titulo">RELACIONES IMPORTANTES</div>
<div style="border-bottom: 4px solid #890000;"></div>
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/a87667303e61ce96720122caaf3e1827/tumblr_oq5ux28o1R1ukxfh9o2_500.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
-------
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/ef266f065e63b82276bbc3e1b91aba8f/tumblr_oqmpma6P7g1t00bifo5_r1_500.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
----------
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/03d2d8a0df653b54b98c2276cc010318/tumblr_p260qeater1qkjtwuo2_1280.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
</div>

¡Gracias de antemano!
Ver perfil de usuario
Mensajes :
109


Blood :
26480


Frase :
Paciencia conmigo. Soy novata :3

Hola

avatar
webmaster
el Miér Feb 28, 2018 4:19 pm
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



Hola Bella, lo siento me confundi con tu código, tienes algunas cosas repetidas y otras que siento que sobran, y estuve tratando de encontrar el problema pero creo que mejor te paso otro código nuevo más básico que podria servirte y tu compararlo con el tuyo en las partes que necesitas,
espero que te sirva

https://jsfiddle.net/0zvaenau/9/

Ver perfil de usuario
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



avatar
designer
el Jue Mar 01, 2018 4:19 am
Mensajes :
109


Blood :
26480


Frase :
Paciencia conmigo. Soy novata :3

Hola

¡Hola! Gracias por tomarte la molestia. Lo cierto es que es verdad que tu código está mas simlificado. Pero me encuentro un problema. El div Image la idea es que se pongan imagenes distintas y con este código solo se puede poner una ¿no? ¿O hay alguna imagen de poder hacer que cada imagen sea diferente?
Ver perfil de usuario
Mensajes :
109


Blood :
26480


Frase :
Paciencia conmigo. Soy novata :3

Hola

avatar
designer
el Jue Mar 01, 2018 2:12 pm
Mensajes :
109


Blood :
26480


Frase :
Paciencia conmigo. Soy novata :3

Hola

Al final lo que he echo ha sido copiar el apartado Image y ponerle nombres del tipo image1, Image2 y así poner cada background. Algo chapuzero, lo se. Si hay otro modo de hacerlo soy toda oidos (o ojos mejor XD )
Ver perfil de usuario
Mensajes :
109


Blood :
26480


Frase :
Paciencia conmigo. Soy novata :3

Hola

avatar
webmaster
el Vie Mar 02, 2018 9:59 am
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



Solo tienes que hacer esto en el HTML, pones una imagen diferente en cada div con el nombre Image que necesites, sin tener que repetir o hacer más divs, aunque tambien si eso te sirve puedes hacerlo

Código:

<div class="Image" style="background-image:url(linkaqui);">Texto</div>










Ver perfil de usuario
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



Contenido patrocinado
Ver el tema anteriorVolver arribaVer el tema siguiente
Permisos de este foro:
No puedes responder a temas en este foro.