0

Estoy haciendo una timeline en codepen basasdo en otro pen. Lo personalicé hasta lo más mínimo por el CSS pero no estoy dando con el peque detalle para que los "puntos" de la línea me queden alineados con los textos.

Yo estoy aprendiendo CSS y ya lo entiendo bastante, pero sinceramente no he podido alinear estos elementos; logré hacerlo responsive, animarlo y hacerle unos efectos hover que despues se los quité porque no me servían.

Les dejo el ejemplo a ver si me pueden dar una luz.

body {
    background: #000;
}
/*animacion*/
@-webkit-keyframes fadeInUp{
  0%{
    opacity: 0;
    -webkit-transform: translateY(80px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInUp{
  0%{
    opacity: 0;
    transform: translateY(80px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}


/* ESTRUCTURA DEL TIMELINE 
Colores Azul: 132D46
        verde: 176E10
Impresion de entrada CSS3
Validacion W3School
*/
h1{
  font-size:60px;
  text-align:center;
}
.timeline{
  position:relative;
  margin:0px auto;
  padding:0px 0;
  width:1000px;
  box-sizing:border-box;
}

/*Linea*/
.timeline:before{
    content: '';
  position:absolute;
  left:50%;
  width:3px;
  height:100%;
  background:#176E10;
}
.timeline ul{
  padding:0;
  margin:0;
}
.timeline ul li{
  list-style:none;
  position:relative;
  width:50%;
  padding:20px 40px;
  box-sizing:border-box;
}
.timeline ul li:nth-child(odd){
  float:left;
  text-align:right;
  clear:both;
    padding-top: 30px;
}
.timeline ul li:nth-child(even){
  float:right;
  text-align:left;
  clear:both;
    
}
.content{
  padding-bottom:20px;
}
.timeline ul li:nth-child(odd):before
{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:24px;
  right:-6px;
  background:#176E10;
  border-radius:50%;
  box-shadow:0 0 0 3px #fff;
}

.timeline ul li:nth-child(even):before
{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:24px;
  left:-4px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 0 3px #176E10;
}
.timeline ul li h3{
  padding:0;
  margin:0;
  color:rgba(233,33,99,1);
  font-weight:600;
}
.timeline ul li p{
  margin:10px 0 0;
  padding:0;
   font-size:20px;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight:300;
  color: #fff;
  -webkit-animation:fadeInUp 6s;
  animation:fadeInUp 4s;
}
.timeline ul li .time h4{
  margin:0;
    position: relative;
  padding:10;
  font-size:50px;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  -webkit-animation:fadeInUp 4s;
  animation:fadeInUp 7s;
}
.timeline ul li:nth-child(odd) .time
{
  position:absolute;
  top:12px;
  right:-165px;
  margin:0;
  padding:8px 16px;
  background:;
  color:#176E10;
  border-radius:18px;
  box-shadow:0 0 0 0px;
}
.timeline ul li:nth-child(even) .time
{
  position:absolute;
  top:12px;
  left:-165px;
  margin:0;
  padding:8px 16px;
  background:;
  color:#176E10;
  border-radius:18px;
  box-shadow:0 0 0 0px rgba(233,33,99,0.3);
}
@media(max-width:1000px)
{
  .timeline{
    width:100%;
  }
}
@media(max-width:767px){
  .timeline{
    width:100%;
    padding-bottom:0;
  }
  h1{
    font-size:40px;
    text-align:center;
  }
  .timeline:before{
    left:20px;
    height:100%;
  }
  .timeline ul li:nth-child(odd),
  .timeline ul li:nth-child(even)
  {
    width:100%;
    text-align:left;
    padding-left:50px;
    padding-bottom:50px;
  }
  .timeline ul li:nth-child(odd):before,
  .timeline ul li:nth-child(even):before
  {
    top:-18px;
    left:16px;
  }
  .timeline ul li:nth-child(odd) .time,
  .timeline ul li:nth-child(even) .time{
    top:-30px;
    left:50px;
    right:inherit;
  }
}
<body>
  <div class="timeline">
    <ul>
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>1990</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>1995</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo
 </p>
        </div>
        <div class="time">
          <h4>2000</h4>
        </div>
            </li>
     <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>2005</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>2017</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>2021</h4>
        </div>
      </li>
      
      
      <div style="clear:both;"></div>
    </ul>
  </div>
</body>

Necesito poder alinear horizontalmente los h4 con los párrafos, utilizo text- e item- align pero no pasa nada.

2 respuestas 2

0

Puedes usar top: 50% en vez de top: 24px:

.timeline ul li:nth-child(2n+1)::before {
  /* top: 24px; */
  top: 50%;
}

Usar porcentajes te permite ajustar justo a la mitad un elemento con position: absolute.

Pero para la parte responsiva, cuando la pantalla es menor a 767px es un poco más complicado de corregir ya que los elementos .time son absolutos y tienes que acomodarlos un poco al tanteo y eso en general hace que sea difícil hacer cambios y ajustar las cosas.

Puedes probar el ajuste que se puede hacer aquí:

body {
    background: #000;
}


/*animacion*/

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ESTRUCTURA DEL TIMELINE 
Colores Azul: 132D46
        verde: 176E10
Impresion de entrada CSS3
Validacion W3School
*/

h1 {
    font-size: 60px;
    text-align: center;
}

.timeline {
    position: relative;
    margin: 0px auto;
    padding: 0px 0;
    width: 1000px;
    box-sizing: border-box;
}


/*Linea*/

.timeline:before {
    content: '';
    position: absolute;
    left: 50%;
    width: 3px;
    height: 100%;
    background: #176E10;
}

.timeline ul {
    padding: 0;
    margin: 0;
}

.timeline ul li {
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    margin-top: 2rem;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd) {
    float: left;
    text-align: right;
    clear: both;
    /* padding-top: 30px; */
}

.timeline ul li:nth-child(even) {
    float: right;
    text-align: left;
    clear: both;
}


/* .content {
    padding-bottom: 20px;
} */

.timeline ul li::before {
    content: '';
    top: 50%;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #176E10;
}

.timeline ul li:nth-child(odd):before {
    right: -6px;
    background: #176E10;
}

.timeline ul li:nth-child(even):before {
    left: -4px;
    background: #fff;
}

.timeline ul li h3 {
    padding: 0;
    margin: 0;
    color: rgba(233, 33, 99, 1);
    font-weight: 600;
}

.timeline ul li p {
    margin: 10px 0 0;
    padding: 0;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 300;
    color: #fff;
    -webkit-animation: fadeInUp 6s;
    animation: fadeInUp 4s;
}

.timeline ul li .time h4 {
    margin: 0;
    position: relative;
    padding: 10;
    font-size: 50px;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    -webkit-animation: fadeInUp 4s;
    animation: fadeInUp 7s;
}


/* Refactorized */

.timeline ul li .time {
    top: 50%;
    transform: translateY(-50%);
}

.timeline ul li:nth-child(odd) .time {
    position: absolute;
    right: -165px;
    margin: 0;
    padding: 8px 16px;
    background: ;
    color: #176E10;
    border-radius: 18px;
    box-shadow: 0 0 0 0px;
}

.timeline ul li:nth-child(even) .time {
    position: absolute;
    left: -165px;
    margin: 0;
    padding: 8px 16px;
    background: ;
    color: #176E10;
    border-radius: 18px;
    box-shadow: 0 0 0 0px rgba(233, 33, 99, 0.3);
}

@media(max-width:1000px) {
    .timeline {
        width: 100%;
    }
}

@media(max-width:767px) {
    .timeline {
        width: 100%;
        padding-bottom: 0;
    }
    h1 {
        font-size: 40px;
        text-align: center;
    }
    .timeline:before {
        left: 20px;
        height: 100%;
    }
    .timeline ul li:nth-child(odd),
    .timeline ul li:nth-child(even) {
        width: 100%;
        text-align: left;
        padding: 70px 50px 20px;
        /* padding-bottom: 50px; */
    }
    .timeline ul li:nth-child(odd):before,
    .timeline ul li:nth-child(even):before {
        /* top: -18px; */
        left: 16px;
    }
    .timeline ul li:nth-child(odd) .time,
    .timeline ul li:nth-child(even) .time {
        top: 44px;
        left: 50px;
        right: inherit;
    }
}
<div class="timeline">
  <ul>
    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        <h4>1990</h4>
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        <h4>1995</h4>
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo
        </p>
      </div>
      <div class="time">
        <h4>2000</h4>
      </div>
    </li>
    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        <h4>2005</h4>
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        <h4>2017</h4>
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        <h4>2021</h4>
      </div>
    </li>


    <div style="clear:both;"></div>
  </ul>
</div>

Una mejor alternativa que puedes hacer es usar display: grid en cada li para alinear tus objetos, así:

  • Evitas fijar elementos con pixeles
  • Puedes acomodar los elementos con order a tu gusto

Puedes ver la diferencia en el siguiente fragmento:

* {
    box-sizing: border-box;
}

body {
    background: #000;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
}

.timeline p {
    font-size: 20px;
    color: #fff;
    animation: fadeInUp 4s;
}

.time {
    font-size: 50px;
    animation: fadeInUp 7s;
    padding: 10;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
}

.timeline {
    position: relative;
    width: 100%;
}

.timeline ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}


/* single item */

.timeline li {
    display: grid;
    width: 100%;
    position: relative;
    padding: 1rem;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.timeline li .time,
.timeline li:nth-child(even) .content {
    order: 1;
    text-align: start;
}

.timeline li .content,
.timeline li:nth-child(even) .time {
    order: 0;
    text-align: right;
}


/* year */

.timeline .time {
    color: #176E10;
}


/*line & bullets */

.timeline::before,
.timeline ul li::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: #176E10;
}


/* line */

.timeline::before {
    transform: translateX(-50%);
}


/* bullets */

.timeline ul li::before {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #176E10;
}

.timeline ul li:nth-child(even)::before {
    background: #fff;
}

@media(max-width:767px) {
    /* line and bullets */
    .timeline::before,
    .timeline ul li::before {
        left: 1rem;
    }
    .timeline li {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 2rem 2.5rem;
    }
    .timeline li div {
        text-align: left !important;
    }
    .timeline .time {
        order: 0 !important;
    }
    .timeline .content {
        order: 1 !important;
    }
}
<div class="timeline">
  <ul>
    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        1990
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        1995
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo
        </p>
      </div>
      <div class="time">
        2000
      </div>
    </li>
    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        2005
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        2017
      </div>
    </li>

    <li>
      <div class="content">
        <p>Texto descriptivo en el parrafo</p>
      </div>
      <div class="time">
        2021
      </div>
    </li>
  </ul>
</div>


Observaciones:

  • En css puedes simplificar tú código:
/* De esto */
.timeline ul li:nth-child(odd):before,
.timeline ul li:nth-child(even):before {
/* ... */
}

/* A esto */
.timeline ul li::before {
/* ... */
}
  • Procura usar ::before en vez de :before, ver aquí para más información
1
  • 1
    Muchas gracias, tube que hacer un peque;o ajuste para que quede alineado en versión de pantallas mas pequenas... Pero me ah funcionado perfecto y eh salido del lio... mil gracias!!!
    – Manuuu
    Commented el 19 may. 2021 a las 12:15
0

Lo que sucede es que el elemento <div class="content"> con <div class="time">juntos sobrepasan al ancho del contenedor <li>.

Una manera de resolverlo es cambiando el width del elemento con clase .content por ejemplo:

@media(max-width:767px){
  .timeline{
    width:100%;
    padding-bottom:0;
  }
  h1{
    font-size:40px;
    text-align:center;
  }
  .timeline:before{
    left:20px;
    height:100%;
  }

/* Aquí */
  .timeline ul li div.content{
     width: 70%;
     float: right;
    
  }
  
  ....
}
1
  • Gracias por tu aporte!
    – Manuuu
    Commented el 19 may. 2021 a las 12:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.