d i x i n m o r t a l

GRÁFICOS + CÓDIGOS + ESCRITURA

Special Signature
(52) El amor esta en el aire - Vesta
ver tema
Code Challenge
(24) Oh Romeo... ━ Puck
ver tema
TUTO + CÓDIGO
[CSS] Pseudoclase :Hasver tema
TUTO + CÓDIGO
Cambiar skin segun grupover tema
TUTO + CÓDIGO
Copiar Todo (Copy All)ver tema
TUTO + CÓDIGO
Contraseña en tablillasver tema
TUTO + CODIGO
Enlazar Tablillas de Afiliaciónver tema
Últimos temas
Un fantasmita ha aparecido...Lun Mar 25, 2024 3:05 amMayhem
#002 Libro de firmasSáb Mar 23, 2024 7:44 pmAntonyan
Pokémon Vjola | Afiliación EliteMar Mar 19, 2024 2:57 amApolo
Designspiration - Afiliación EliteMar Mar 19, 2024 2:56 amApolo
Buenas madrugadas~Lun Mar 04, 2024 12:02 pmYukari
¿Qué estás escuchando?Lun Feb 19, 2024 12:09 pmretrxrbit
Threads of Fate | Confirmación ÉliteMar Dic 26, 2023 4:35 pmApolo
Life Eternal RPG — Afiliación élite Mar Dic 26, 2023 4:34 pmApolo
élites + hermanas
Actualización: 27/09/2023
nuestros ➹ directorios
Agradecimiento especial al artista Faustine Dumontier por la ilustración de fondo que adorna el foro.
Challenge Gráfico

Elementos

Special Signature

Dragon Ball

Pelea Gráfica

Pronto

Challenge Código

Paraíso Personal

Challenge literario

Amor y Amistad


Ver el tema anteriorIr abajoVer el tema siguiente
BellaBlackCrews
BellaBlackCrews
Designer
Miér Feb 28, 2018 6:00 am
campo2 Mensajes :
109


campo3 Blood :
133622


campo4 Frasesita :
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!








Texto que se descuadra en hover Firma_john_y_aeryn_01_by_bellablackcrews-d9gwf7v
campo2 Mensajes :
109


campo3 Blood :
133622


campo4 Frasesita :
Paciencia conmigo. Soy novata :3

Hola

50 mensajes publicados
¡Seis años!
¡Seis años juntos! ♥
Roshio
Roshio
Webmaster
Miér Feb 28, 2018 4:19 pm
campo2 Mensajes :
2487


campo3 Blood :
1304019


campo4 Frasesita :
I go b o o m
ᴅʏɴᴀᴍɪɢʜᴛ
. . .
Texto que se descuadra en hover F0216a17-4a1a-4b5e-9b84-d699e8773f84-bakugou

Texto que se descuadra en hover B1

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 Texto que se descuadra en hover 1f61f

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

campo2 Mensajes :
2487


campo3 Blood :
1304019


campo4 Frasesita :
I go b o o m
ᴅʏɴᴀᴍɪɢʜᴛ
. . .
Texto que se descuadra en hover F0216a17-4a1a-4b5e-9b84-d699e8773f84-bakugou

Texto que se descuadra en hover B1

Hey, hi, hello!
Estamos encantados de conocerte. (:
Cinnamon roll
Too good for this world, too pure
¡Nueve años!
Nueve años junto a nosotros ♥
Mano amiga
Has resuelto la duda de otro usuario ♥
Ayudante destacado
Has sugerido y ha sido implementado.
Ojo de águila
Detectaste un error. >: |
¡Dix love!
¡Amamos Dix Inmortal!
¡Spammer!
Participante asiduo de la zona spam
Orador
Participante de la zona de debates
Orador proclamado
¡Has creado o participado en al menos 10 debates!
Community Manager
Has invitado a un amigo al foro
Social butterfly
Has invitado a más de 5 amigos al foro
Community Manager A Tier
¡Soy coder!
Has abierto tu galería de códigos.
Soy maestro
Has subido un tutorial en la zona de códigos
Soporte al coder
Has resuelto una duda en la zona de códigos
¡Estoy aprendiendo!
Has participado activamente en al menos 5 tutoriales
¡Soy designer!
Has abierto tu galería
Soy maestro
Has subido un tutorial en la zona gráfica
Soporte al designer
Has resuelto una duda en la zona gráfica
¡Estoy aprendiendo!
Has participado activamente en al menos 5 tutoriales
¡Aportando!
Has subido al menos 3 recursos en la zona gráfica
¡Soy Escritor!
Subiste un fanfic o escrito propio
Soy maestro
Has subido un tutorial en la zona de escritura
1000 mensajes publicados
¡Eres todo un dixiano!
¡Aportando!
Has subido 3 aportes a la zona códigos
Jarro de Caramelos
Participaste del evento 2023
¡Encontrando fantasmas!
Participaste del evento 2023
Conejo de Pascua
Mini evento 2024
BellaBlackCrews
BellaBlackCrews
Designer
Jue Mar 01, 2018 4:19 am
campo2 Mensajes :
109


campo3 Blood :
133622


campo4 Frasesita :
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?








Texto que se descuadra en hover Firma_john_y_aeryn_01_by_bellablackcrews-d9gwf7v
campo2 Mensajes :
109


campo3 Blood :
133622


campo4 Frasesita :
Paciencia conmigo. Soy novata :3

Hola

50 mensajes publicados
¡Seis años!
¡Seis años juntos! ♥
BellaBlackCrews
BellaBlackCrews
Designer
Jue Mar 01, 2018 2:12 pm
campo2 Mensajes :
109


campo3 Blood :
133622


campo4 Frasesita :
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 )








Texto que se descuadra en hover Firma_john_y_aeryn_01_by_bellablackcrews-d9gwf7v
campo2 Mensajes :
109


campo3 Blood :
133622


campo4 Frasesita :
Paciencia conmigo. Soy novata :3

Hola

50 mensajes publicados
¡Seis años!
¡Seis años juntos! ♥
Roshio
Roshio
Webmaster
Vie Mar 02, 2018 9:59 am
campo2 Mensajes :
2487


campo3 Blood :
1304019


campo4 Frasesita :
I go b o o m
ᴅʏɴᴀᴍɪɢʜᴛ
. . .
Texto que se descuadra en hover F0216a17-4a1a-4b5e-9b84-d699e8773f84-bakugou

Texto que se descuadra en hover B1

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 Texto que se descuadra en hover 1f600 Texto que se descuadra en hover 1f44c

Código:

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










campo2 Mensajes :
2487


campo3 Blood :
1304019


campo4 Frasesita :
I go b o o m
ᴅʏɴᴀᴍɪɢʜᴛ
. . .
Texto que se descuadra en hover F0216a17-4a1a-4b5e-9b84-d699e8773f84-bakugou

Texto que se descuadra en hover B1

Hey, hi, hello!
Estamos encantados de conocerte. (:
Cinnamon roll
Too good for this world, too pure
¡Nueve años!
Nueve años junto a nosotros ♥
Mano amiga
Has resuelto la duda de otro usuario ♥
Ayudante destacado
Has sugerido y ha sido implementado.
Ojo de águila
Detectaste un error. >: |
¡Dix love!
¡Amamos Dix Inmortal!
¡Spammer!
Participante asiduo de la zona spam
Orador
Participante de la zona de debates
Orador proclamado
¡Has creado o participado en al menos 10 debates!
Community Manager
Has invitado a un amigo al foro
Social butterfly
Has invitado a más de 5 amigos al foro
Community Manager A Tier
¡Soy coder!
Has abierto tu galería de códigos.
Soy maestro
Has subido un tutorial en la zona de códigos
Soporte al coder
Has resuelto una duda en la zona de códigos
¡Estoy aprendiendo!
Has participado activamente en al menos 5 tutoriales
¡Soy designer!
Has abierto tu galería
Soy maestro
Has subido un tutorial en la zona gráfica
Soporte al designer
Has resuelto una duda en la zona gráfica
¡Estoy aprendiendo!
Has participado activamente en al menos 5 tutoriales
¡Aportando!
Has subido al menos 3 recursos en la zona gráfica
¡Soy Escritor!
Subiste un fanfic o escrito propio
Soy maestro
Has subido un tutorial en la zona de escritura
1000 mensajes publicados
¡Eres todo un dixiano!
¡Aportando!
Has subido 3 aportes a la zona códigos
Jarro de Caramelos
Participaste del evento 2023
¡Encontrando fantasmas!
Participaste del evento 2023
Conejo de Pascua
Mini evento 2024
Contenido patrocinado
Ver el tema anteriorVolver arribaVer el tema siguiente
Permisos de este foro:
No puedes responder a temas en este foro.