CSS Problemas ao adicionar linha continua.

nehdavoxx · 15 de janeiro de 2018

Boa noite pessoal.

To começando em programação web aprendendo aqui e ali.

Peguei uns exercícios na internet pra eu fazer aqui e ao escrever esse código abaixo:

O HTML :

<!--DOCTYPE html-->
<html>
    <head>
    <meta charset="utf-8">
    <title>Questão 02</title>
    <link rel"stylesheet" href="page2.css">
    </head>
    <body>
    <hr>
        <h1>Mudanças de linha</h1>
        <p>"No mundo dos negócios todos são pagso com duas</br>
        moedas:Dinheiro e Experiência...Agarre a experiência</br>
        primeiro, o dinheira virá depois".--Harold Geenen</br></p>
    </br>
        <p>"Há homens que lutam um dia e são bons.</br>
        Há outros que lutam muitos dias e são melhores.</br>
        Mas há os que lutam todos os dias e estes são</br>
        imprescindiveis."
    </br>
        --Bertolt Brecht</P>
    </br>
    <hr>
    </body>
</html>

e este CSS:

h1{
    font-family:serif;
    font-size:36px;
    }
P{
    font-family:serif;
    font-size:28px;
    }
hr{
    display:block;
    margin-top:0.5em;
    margin-bottom:0.5em;
    margin-left:100px;
    margin-right:100px;
    border-style:inset;
    border-width:3px;
    color:blue;
    }

Bom a linha adicionada deveria ficar apenas acima do texto centralizado no meio da página, no entanto a linha ficou continua de um lado ao outro da página.

o que eu faço pra resolver tal problema?

Ps: Li que não tem como formatar esta linha com HTML 5 e CSS3, mas não tenho confiança na fonte dessa info.

DiF · 16 de janeiro de 2018

@nehdavoxx Não sei se entendi... mas você quer que o texto fique centralizado abaixo da HR?

tipo isso: https://jsfiddle.net/9vj6c4v6/

Felipe Paz · 17 de janeiro de 2018

@nehdavoxx por padrão, a tag hr vem com display block, portanto, ela ocupa toda a linha. O que você pode fazer é criar uma div e encapsular tanto o hr quanto a tag p.

Aqui dá pra ver um exemplo https://jsfiddle.net/L7t3gxfk/

nehdavoxx · 17 de janeiro de 2018

Opa é exatamente como vocês disseram, eu preciso formatar esta linha, o problema é que estava me embananando com os elementos em CSS da formatação do <hr>.

@Felipe Paz, éra este o caso, eu peguei um exemplo básico onde o o display era default e me perdi neste ponto.

vou verificar como faço para deixa-la menor e vou aplicar o align para alinha tudo no centro.

Felipe Paz · 17 de janeiro de 2018

@nehdavoxx eu havia editado a resposta para a correta mas acabou não indo e percebi só agora. No teu código há dois erros com a tag p. Esta tag é minúscula, tanto no css quanto no fechamento do segundo parágrafo está P maiúsculo e isso não está deixando alinhar.

p{
    font-family:serif;
    font-size:28px;
  	text-align: center;
    }

e trocar este --Bertolt Brecht</P> por --Bertolt Brecht</p>

Entrar

CSS Problemas ao adicionar linha continua.

Posts recomendados

nehdavoxx

DiF

Felipe Paz

nehdavoxx

Felipe Paz

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos