Image breaks the title

Asked

Viewed 67 times

2

I have an image and underneath it I have a title, next I have three block. Follow the image:

inserir a descrição da imagem aqui

But when I add just one line of title, it breaks, the image ends up descending.

inserir a descrição da imagem aqui

I wanted to make the image all the same with a line or two lines, they didn’t move, as in the first picture?

HTML

<section class="lectures">
    <article class="lectures-content">
        <img src="http://imagens.canaltech.com.br/54960.81428-Facebook.jpg">
            <h3 class="lectures-title"><a href="#">Performance em CSS - BrazilJS 2012 DUAS LINHAS</a></h3>
            <span class="lectures-about">Link da palestra:</span>
            <span class="lectures-about">Duração:<strong>10:20</strong></span>
            <span class="lectures-about">Palestrante:<strong>Paul Ishid</strong></span>
             <span class="watch"><a href="#">Assista agora</a></span> 
    </article>
</section>
<section class="lectures">
    <article class="lectures-content">
        <img src="http://imagens.canaltech.com.br/54960.81428-Facebook.jpg">
            <h3 class="lectures-title"><a href="#">Performance em CSS - BrazilJS 2012</a></h3>
            <span class="lectures-about">Link da palestra:</span>
            <span class="lectures-about">Duração:<strong>10:20</strong></span>
            <span class="lectures-about">Palestrante:<strong>Paul Ishid</strong></span>
             <span class="watch"><a href="#">Assista agora</a></span> 
    </article>
</section>
<section class="lectures">
    <article class="lectures-content">
        <img src="http://imagens.canaltech.com.br/54960.81428-Facebook.jpg">
            <h3 class="lectures-title"><a href="#">Performance em CSS - BrazilJS 2012 DUAS LINHAS</a></h3>
            <span class="lectures-about">Link da palestra:</span>
            <span class="lectures-about">Duração:<strong>10:20</strong></span>
            <span class="lectures-about">Palestrante:<strong>Paul Ishid</strong></span>
             <span class="watch"><a href="#">Assista agora</a></span> 
    </article>
</section>

CSS

.lectures {
  width: 300px;
  overflow: hidden;
  margin: 20px;
  padding-right: 22px;
  font-family: 'Aleo';
  display: inline-block;
  position: relative; }
  .lectures:before {
    content: '';
    position: absolute;
    border-right: 1px solid #DADADA;
    position: absolute;
    height: 60%;
    right: 0;
    top: 50px; }
  .lectures img {
    width: 280px;
    height: 150px;
    display: block;
    margin: 0 auto;
    border-radius: 5px; }
  .lectures .lectures-title {
    text-align: center;
    font-size: 16px;
    font-family: helvetica;
    padding-bottom: 7px;
    margin: 5px; }
    .lectures .lectures-title a {
      color: #D90452; }
  .lectures .lectures-about {
    display: block;
    padding: 0 0 10px 10px;
    font-family: 'helvetica';
    font-size: 12px;
    color: #f2d750;
    padding-top: 7px;
    background: #333;
    margin-top: 10px;
    border-radius: 10px;
    background: #8e7300; }
  .lectures strong {
    padding-left: 5px;
    color: #F2F2F2; }
  .lectures h3 {
    height: 50px;
  }

.watch {
  display: block;
  text-align: center; }
  .watch a {
    background: #f2d750;
    color: #D90452;
    border-bottom: 4px solid #8e7300;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px;
    display: block;
    width: 70%;
    margin: 10px auto; }

http://codepen.io/Andersonn/pen/KCxyr

html css

1 answer

3

1) Solution

Was added:

.lectures h3 {
    height: 50px;
  }

In the full Css code:

.lectures {
  width: 300px;
  overflow: hidden;
  margin: 20px;
  padding-right: 22px;
  font-family: 'Aleo';
  display: inline-block;
  position: relative; }
  .lectures:before {
    content: '';
    position: absolute;
    border-right: 1px solid #DADADA;
    position: absolute;
    height: 60%;
    right: 0;
    top: 50px; }
  .lectures img {
    width: 280px;
    height: 150px;
    display: block;
    margin: 0 auto;
    border-radius: 5px; }
  .lectures .lectures-title {
    text-align: center;
    font-size: 16px;
    font-family: helvetica;
    padding-bottom: 7px;
    margin: 5px; }
    .lectures .lectures-title a {
      color: #D90452; }
  .lectures .lectures-about {
    display: block;
    padding: 0 0 10px 10px;
    font-family: 'helvetica';
    font-size: 12px;
    color: #f2d750;
    padding-top: 7px;
    background: #333;
    margin-top: 10px;
    border-radius: 10px;
    background: #8e7300; }
  .lectures strong {
    padding-left: 5px;
    color: #F2F2F2; }
  .lectures h3 {
    height: 50px;
  }

.watch {
  display: block;
  text-align: center; }
  .watch a {
    background: #f2d750;
    color: #D90452;
    border-bottom: 4px solid #8e7300;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px;
    display: block;
    width: 70%;
    margin: 10px auto; }

2) Solution:

Was added height: 50px in .lectures .lectures-title

.lectures .lectures-title {
        text-align: center;
        font-size: 16px;
        font-family: helvetica;
        padding-bottom: 7px;
        margin: 5px; height: 50px;}

In the Full Css Code

.lectures {
  width: 300px;
  overflow: hidden;
  margin: 20px;
  padding-right: 22px;
  font-family: 'Aleo';
  display: inline-block;
  position: relative; }
  .lectures:before {
    content: '';
    position: absolute;
    border-right: 1px solid #DADADA;
    position: absolute;
    height: 60%;
    right: 0;
    top: 50px; }
  .lectures img {
    width: 280px;
    height: 150px;
    display: block;
    margin: 0 auto;
    border-radius: 5px; }
  .lectures .lectures-title {
    text-align: center;
    font-size: 16px;
    font-family: helvetica;
    padding-bottom: 7px;
    margin: 5px; height: 50px;}
    .lectures .lectures-title a {
      color: #D90452; }
  .lectures .lectures-about {
    display: block;
    padding: 0 0 10px 10px;
    font-family: 'helvetica';
    font-size: 12px;
    color: #f2d750;
    padding-top: 7px;
    background: #333;
    margin-top: 10px;
    border-radius: 10px;
    background: #8e7300; }
  .lectures strong {
    padding-left: 5px;
    color: #F2F2F2; }  

.watch {
  display: block;
  text-align: center; }
  .watch a {
    background: #f2d750;
    color: #D90452;
    border-bottom: 4px solid #8e7300;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px;
    display: block;
    width: 70%;
    margin: 10px auto; }

Online Example: Codepen

  • 2

    Very good! I was hammering here the head to try to find, Thanks @Maria

  • Another possibility is to touch the vertical-align.

  • 1

    @bfavaretto that was my first comment without seeing anything, but, what happens he has more items below equal is in Codepen have a look: http://codepen.io/anon/pen/pBlef

  • Ah, now I understand.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.