[Duda] Mis títulos se desacomodan

Mar Nov 28, 2017 1:14 am

Jelou! Creo que hoy vengo con una duda más simple, hice este code para un foro que no tenía modelo de búsquedas, peeeeeeeeeeeero, no sé dónde metí la pata y ahora el texto cuando es largo aunque quepa en la cajita no se centra y el position:relative, me lo desacomoda. ¿Alguien me puede revisar el código a ver dónde está el error? ;-;

Título

Fem-Masc| Edad | Ocupación

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Título Larguito

Fem-Masc| Edad | Ocupación Larguitos

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Intento que se vea como la caja a la izquierda ya sea que tenga título largo o corto, probé con el text-align:center y no se mueve para nada, probé con margin 0px 15px 0px y si se mueve pero pasa lo mismo que con relative. Help pls?

Mar Nov 28, 2017 10:15 am

En la segunda tablilla donde dices que sale movido, tienes dos elementos con left, donde estos se moveran a la izquierda según los pixeles de cada uno:

Código:: .titulo { font-size: 20px; font-family: Poppins; text-transform: uppercase; font-weight: 700; color: #fff; position: relative; top: 12px; /* left: 70px; */ line-height: 100%; display: inline-block; } .data { font-size: 11px; font-family: fira sans; text-transform: uppercase; text-align: center; color: #fff; position: relative; top: 14px; /* left: 25px; */ line-height: 100%; display: inline-block; }

Si se lo quitas verás que vuelven a su posición default, y para que queden alineados, al div contenedor de estos elementos debes colocarle el align: center;

Código:: .c-titulo { width: 200px; height: 60px; text-align: center; background: #486066; }

Y tambien veo que se te desalinea la caja del texto, tambien echale ojo a las medidas de los margin que pusiste y las de altura y anchura del div contenedor
[Duda] Mis títulos se desacomodan 4263204366

[Duda] Mis títulos se desacomodan 4263204366

Mar Nov 28, 2017 7:21 pm

Título

Fem-Masc| Edad | Ocupación

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Título Larguito

Fem-Masc| Edad | Ocupación Larguitos

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Le quité el left y le agregué el text-align:center pero...no funcionó muy bien ;-;

Mar Nov 28, 2017 7:38 pm

Una pregunta... quieres que salgan las dos tablillas una al lado de la otra? Por que no entendi eso bien... pensé que una era como debía verse y la otra con el error?

Mar Nov 28, 2017 7:47 pm

Sip la idea es que salgan una al lado de la otra gddgjdgfhjkdl será un modelo de búsquedas así que intento hacer que pueda incluso añadir más, pero no puedo acomodarlas x.x

Miér Nov 29, 2017 12:12 pm

En ese caso mi recomendación es que uses una tabla y no los estes moviendo con position: absolute o relative, ni con los margin, porque al estar usando el mismo nombre de etiqueta para cada uno siempre te saldrá movido diferente cuando repitas el HTML.

hola

Código:: <table> <tbody> <tr> <td><div class="caja">hola</div></td> <td><div class="caja">hola</div></td> </tr> </tbody> </table>

¡Espero se solucione! Saludos [Duda] Mis títulos se desacomodan 2226693718

Miér Nov 29, 2017 10:50 pm

Título

Fem-Masc| Ocupación| Edad Aprox.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet aliquet placerat. Nunc sodales diam non nisi sollicitudin, et lacinia leo posuere. Morbi imperdiet facilisis venenatis. Pellentesque maximus euismod neque, nec condimentum nisi malesuada vel. Praesent tristique turpis sem, sit amet pharetra odio tempus in. Morbi commodo vitae magna ut laoreet. Pellentesque justo nibh, ultrices id varius sit amet, mattis eu lacus. Proin leo turpis, aliquet et sapien at, ultricies lacinia metus. Ut vel semper neque, et consequat sapien. Mauris fermentum ligula vel magna vestibulum, ac consequat diam semper.

Suspendisse sit amet nunc iaculis, cursus lorem sit amet, ullamcorper ante. Fusce sit amet mauris nibh. Suspendisse cursus ante sem, at blandit ligula molestie at. Sed rutrum maximus massa, nec interdum nunc feugiat quis. Vestibulum egestas, elit et molestie volutpat, metus elit ornare sem, consectetur accumsan dui diam vitae purus. Aliquam et orci ultrices, gravida nisl vel, porta urna. Praesent vitae nulla vel dui convallis facilisis. In sollicitudin tellus ultricies odio sollicitudin, non finibus lorem pulvinar. Aenean id laoreet felis. Fusce eget ipsum semper, aliquam neque quis, volutpat tortor. Fusce ullamcorper laoreet hendrerit. Morbi blandit gravida risus nec tincidunt.

Aenean porttitor aliquet ipsum sit amet blandit. Maecenas ipsum neque, porttitor eget massa vitae, pharetra sagittis mi. Morbi accumsan pellentesque arcu quis viverra. Donec a porta diam. Curabitur nec sem id turpis auctor ultrices. Etiam vehicula blandit massa a luctus. Aenean lobortis magna egestas nisl finibus tempus. Donec sit amet sodales elit. Etiam sed nulla tempor, gravida diam sit amet, malesuada felis. Quisque faucibus enim eu scelerisque consequat. Sed posuere tincidunt purus, sed mattis sapien. Morbi volutpat varius imperdiet. Fusce eu risus ac nulla luctus hendrerit. Sed euismod magna non efficitur efficitur. Suspendisse bibendum eleifend quam, ut hendrerit nisl consequat non. Vestibulum hendrerit gravida mi, varius vulputate justo dictum a.

Título Larguito

Fem-Masc| Ocupación| Edad Aprox.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet aliquet placerat. Nunc sodales diam non nisi sollicitudin, et lacinia leo posuere. Morbi imperdiet facilisis venenatis. Pellentesque maximus euismod neque, nec condimentum nisi malesuada vel. Praesent tristique turpis sem, sit amet pharetra odio tempus in. Morbi commodo vitae magna ut laoreet. Pellentesque justo nibh, ultrices id varius sit amet, mattis eu lacus. Proin leo turpis, aliquet et sapien at, ultricies lacinia metus. Ut vel semper neque, et consequat sapien. Mauris fermentum ligula vel magna vestibulum, ac consequat diam semper.

Suspendisse sit amet nunc iaculis, cursus lorem sit amet, ullamcorper ante. Fusce sit amet mauris nibh. Suspendisse cursus ante sem, at blandit ligula molestie at. Sed rutrum maximus massa, nec interdum nunc feugiat quis. Vestibulum egestas, elit et molestie volutpat, metus elit ornare sem, consectetur accumsan dui diam vitae purus. Aliquam et orci ultrices, gravida nisl vel, porta urna. Praesent vitae nulla vel dui convallis facilisis. In sollicitudin tellus ultricies odio sollicitudin, non finibus lorem pulvinar. Aenean id laoreet felis. Fusce eget ipsum semper, aliquam neque quis, volutpat tortor. Fusce ullamcorper laoreet hendrerit. Morbi blandit gravida risus nec tincidunt.

Aenean porttitor aliquet ipsum sit amet blandit. Maecenas ipsum neque, porttitor eget massa vitae, pharetra sagittis mi. Morbi accumsan pellentesque arcu quis viverra. Donec a porta diam. Curabitur nec sem id turpis auctor ultrices. Etiam vehicula blandit massa a luctus. Aenean lobortis magna egestas nisl finibus tempus. Donec sit amet sodales elit. Etiam sed nulla tempor, gravida diam sit amet, malesuada felis. Quisque faucibus enim eu scelerisque consequat. Sed posuere tincidunt purus, sed mattis sapien. Morbi volutpat varius imperdiet. Fusce eu risus ac nulla luctus hendrerit. Sed euismod magna non efficitur efficitur. Suspendisse bibendum eleifend quam, ut hendrerit nisl consequat non. Vestibulum hendrerit gravida mi, varius vulputate justo dictum a.

Listo! hdgsfghfjk muchas gracias [Duda] Mis títulos se desacomodan 3114844438

Elementos

Dragon Ball

Pronto

Paraíso Personal

Amor y Amistad

Conejo de Pascua

[Duda] Mis títulos se desacomodan