Entrar Ainda não tem acesso?
12
respostas

Dificuldade para criar blockquote

por PEDRO ERNESTO
| 17.7k xp | 35 posts

Eu to querendo criar uma blockquote ou algo parecido, com uma foto redonda do lado esquerdo. Logo ao lado direito, a frase "Professora Ivana Almeida" e escrito abaixo "Experiência Internacional" (com uma fonte pequena mas não tanto). E logo abaixo de "Experiência Internacional", escrito "Aulas de Reforço na Língua Inglesa" com uma fonte maior e em destaque.

Estou construindo o site da minha mãe, porém não estou conseguindo achar o código em nenhum site para fazer isso com a foto e texto.

Preciso da ajuda de vocês!

Link para ter a ideia que eu quero: http://veja.abril.com.br/blog/reinaldo/

Link para a foto: https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xtp1/v/t1.0-9/10934073_523020214504379_9188361152173939468_n.jpg?oh=89e1ca848ef614fd65c1c86222860807&oe=5841BA5D&__gda__=1480505451_dce33336877c27dbd710c546f7ad8cce

12 respostas
por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

O ideal seria que você criasse isso num photoshop ou até paint mesmo, mais fácil pra visualizar a sua ideia.

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

O básico daquela imagem arredondada por exemplo pode ser pego do próprio exemplo que você mandou:

.

.contributor-icon {
    background: #fff none no-repeat scroll 0 0;
    border: 2px solid #e9e9e9;
    border-radius: 50%;
    box-sizing: content-box;
    display: inline-block;
    height: 80px;
    left: 25px;
    margin-top: -40px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 80px;
}

A classe acima é a que é aplicada na tag figure:

<figure class="contributor-icon">
    <img alt="Reinaldo Azevedo" title="Reinaldo Azevedo" src="http://veja.abril.com.br/blog/reinaldo/files/2015/10/reinaldo-azevedo.jpg">
</figure>
por PEDRO ERNESTO
| 17.7k xp | 35 posts

Funcionou, mas só ficou a imagem redonda.

E quando tento colocar um texto ao lado da imagem, fica por cima.

E não estou conseguindo colocar algo parecido com o "blockquote" no fundo da imagem, igual ao link que mandei.

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

O código exato do que está no exemplo, no trecho que você menciona é:

HTML:

<div class="author-data">
    <h1><span>Blog</span> Reinaldo Azevedo </h1>
    <figure class="contributor-icon">
        <img alt="Reinaldo Azevedo" title="Reinaldo Azevedo" src="http://veja.abril.com.br/blog/reinaldo/files/2015/10/reinaldo-azevedo.jpg">
    </figure>

    <h3>Blog do jornalista Reinaldo Azevedo: política, governo, PT, imprensa e cultura</h3>
</div>

CSS:

.author-data {
    position: relative;
    display: table-cell;
}

.author-data h1 {
    background: #e9e9e9 url("css/img/dot.gif") repeat-x scroll center top;
    font-size: 24px;
    font-weight: bold;
    line-height: 20px;
    margin: 0;
    padding: 15px 0 15px 120px;
    text-transform: uppercase;
    color: #61262a;
    vertical-align: top;
}

.author-data .contributor-icon {
    background: #fff none no-repeat scroll 0 0;
    border: 2px solid #e9e9e9;
    border-radius: 50%;
    box-sizing: content-box;
    display: inline-block;
    height: 80px;
    left: 25px;
    margin-top: -40px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 80px;
}

figure {
    text-align: center;
    background: #eee;
    margin-bottom: 40px;
}

figure {
    margin: 0;
}

.author-data h3 {
    font-size: 20px;
    line-height: 1.125;
    margin: 5px 0 0;
    padding: 10px 20px 15px 120px;
    word-wrap: break-word;
    color: #333;
    border-bottom: 3px solid #ddd;
    min-height: 73px;
}

Com base nisso você consegue estudar e ver como as coisas se comportam pra aplicar no que você deseja.

por PEDRO ERNESTO
| 17.7k xp | 35 posts

Funcionou, mas o texto que coloco fica abaixo da imagem.

Eu queria que ficasse ao lado. Já tentei de tudo mas sempre dá no mesmo.

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

Você está fazendo isso em um site local ou já está hospedado? Compartilhe o que está fazendo aqui pra que eu ou outros possam te ajudar a entender o que está errado.

por PEDRO ERNESTO
| 17.7k xp | 35 posts

É em um site hospedado. O nome é LOCAWEB.

Quando coloco o código aqui, fica tudo certo.

Mas quando coloco lá, fica todo desarrumado.

O código que fiz é este:

<!DOCTYPE html>

Professora Ivana Almeida

Ivana Almeida

Aulas de Reforço na Língua Inglesa

por PEDRO ERNESTO
| 17.7k xp | 35 posts

Ignore o post anterior, este é o código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ivana Almeida</title>

<style>

.author-data {
    position: relative;
    display: table-cell;
}

.author-data h1 {
    background: #e9e9e9 url("css/img/dot.gif") repeat-x scroll center top;
    font-size: 24px;
    font-weight: bold;
    line-height: 20px;
    margin: 30;
    padding: 15px 0 15px 120px;
    text-transform: uppercase;
    color: #61262a;
    vertical-align: top;

}

.author-data .contributor-icon {
    background: #fff none no-repeat scroll 0 0;
    border: 2px solid #e9e9e9;
    border-radius: 50%;
    box-sizing: content-box;
    display: inline-block;
    height: 80px;
    left: 25px;
    margin-top: -40px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 80px;
}

figure {
    text-align: center;
    background: #eee;
    margin-bottom: 40px;
}

figure {
    margin: 0;
}

.author-data h3 {
    font-size: 20px;
    line-height: 1.125;
    margin: 30px 0 0;
    padding: 10px 20px 15px 120px;
    word-wrap: break-word;
    color: #333;
    border-bottom: 3px solid #ddd;
    min-height: 73px;

}




</style>


</head>
<body>

<div class="author-data">
    <h1><span>Professora</span> Ivana Almeida </h1>
    <figure class="contributor-icon">
        <img alt="Ivana Almeida" title="Ivana Almeida" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xtp1/v/t1.0-9/10934073_523020214504379_9188361152173939468_n.jpg?oh=89e1ca848ef614fd65c1c86222860807&oe=5841BA5D&__gda__=1480505451_dce33336877c27dbd710c546f7ad8cce">
    </figure>

    <h3>Aulas de Reforço na Língua Inglesa</h3>
</div>
por PEDRO ERNESTO
| 17.7k xp | 35 posts

Qual a diferença que pode influir no código, se o site for hospedado ou local?

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

Nenhuma, era só pra saber se você teria que postar o código aqui ou se era só mandar o link pra que todos pudessem ver o que está acontecendo.

Aparentemente está ok o código, como você disse, mas pode ser que tenha algum outro estilo influenciando. Qual o endereço da página?

De qualquer maneira, está funcionando esse código, segue um link com exemplo funcional (inclusive recortando a imagem):

https://jsfiddle.net/gLww7xoj/

por PEDRO ERNESTO
| 17.7k xp | 35 posts

Ahhh, tudo bem.

O endereço da página é este: http://ivanaalmeida.com.br/aulas-de-reforco-na-lingua-inglesa

Como eu disse, o erro é que o texto fica abaixo da imagem. Como resolvo isso?

por Marco Aurélio Messa
| 86.7k xp | 60 posts
Analista Programador

Eu testei o código desse fiddle na sua página e funcionou ok:

https://jsfiddle.net/gLww7xoj/3/

Não sei qual editor você está utilizando, mas vi que tem muito css e html misturado no corpo da página, tente criar um arquivo .css separado com seus estilos para que sejam chamados na página, ou pelo menos coloque todas as tag style dentro da tag head ao invés de colocar durante o body.