Ir ao conteúdo
  • Cadastre-se
Carlos Alexandre 399

HTML RESOLVIDO Alinhamento com html, preciso alinha a segundo linha com a de cima

Posts recomendados

tesr.thumb.png.ff3939c70aa09469cb45d0ac8c5596ab.png

então essa imagem foi editada só para demostra uma situação, na primeira seta esta apontada pro nome "industrializadas" e ele começa na borda da pagina, tem como coloca a palavra "industrializadas" seguindo a borda da palavra de cima "NÃO" mesmo usando o simbolo awesome font

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Carlos Alexandre 399 Olá, captei o que você quer.

Acredito que tem duas formas de resolver isso.

 

Uma é colocando a frase toda em um contêiner como irmão adjacente do elemento <i>

Com isso a estrutura terá que ser alterada para algo do tipo:

<div class="container">
     <i class=" pata fa fa-paw fa-spin"></i>
     <p class="texto">
        Não É para quem não se importa com a saúde de seu cão 
       e quer continuar dando as tóxicas rações industrializadas
     </p>
</div>

Primeiro define o elemento DIV class container como display: table.

 

depois no elemento <p> você define o display como table-cell juntamente com padding de 5px.

 

.container{
  display: table;
}
.pata{
  color: #ff9800;
}

.texto{
  display: table-cell;
  padding-left: 5px;
}

Veja funcionando: https://jsfiddle.net/dife/ozyu2eha/9/

 

A outra maneira seria, na palavra industrializada, você adicionar ela entre o elemento<span> e mover para a margem indicada... mas não é muito bom fazer essa gambiarra... por isso faça da forma que mostrei acima com display table e table-cell

 

PS: no exemplo, do link, se ficar a frase toda em uma linha, experimente arrastar a divisória da tela pro lado direito pra diminuir.. dai você vai ver a palavra industrializada alinhada corretamente

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

4784204_Sem-Ttulo-1.thumb.png.fa6a11078054c10597955d6971f0c7a5.png

Na imagem 1 estou usando um código criado por um moderador : link do funcionamento >> https://jsfiddle.net/61mb5ad0/

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <style>
        .container{
       display: table;
     }
     .pata{
       color: #ff9800;
     }

     .texto{
       display: table-cell;
       padding-left: 5px;

     }
      </style>
  </head>
<h2>Antes de começar falando para quem este programa é perfeito, precisamos ser 100% claros sobre para quem ele NÃO É:</h2>
   <body>
      <div class="container">
          <i class=" pata fa fa-paw fa-spin"></i>
          <p class="texto">
            Não É para quem não se importa com a saúde de seu cão
            e quer continuar dando as tóxicas rações industrializadas
          </p>
        </div>
        <div class="container">
            <i class=" pata fa fa-paw fa-spin"></i>
            <p class="texto">
              Não É para quem não se importa com a saúde de seu cão
              e quer continuar dando as tóxicas rações industrializadas
            </p>
          </div>
          <div class="container">
              <i class=" pata fa fa-paw fa-spin"></i>
              <p class="texto">
                Não É para quem não se importa com a saúde de seu cão
                e quer continuar dando as tóxicas rações industrializadas
              </p>
          </div>
      </body>
</html>

 

Na imagem 2 eu estava testando : link do funcionamento >> https://jsfiddle.net/ft789vja/

 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
   <h4><span style="font-size: 16pt;">Antes de começar falando para quem este programa é perfeito, precisamos ser 100% claros sobre <strong>para quem ele NÃO É:</strong></span></h4>
   <p> </p>
   <p> </p>
   <span style="font-size: 12pt;">
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem NÃO TEM cachorro </p>
   <p> </p>
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem não se importa com a saúde de seu cão e quer continuar dando as tóxicas rações industrializadas </p>
   <p> </p>
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem ainda acredita que a ração é a melhor forma de alimentar seu cão. </p>
   <p> </p>
   <p><i class="fa fa-paw fa-spin" style="color:#ff9800"></i> NÃO É para quem não está disposto a tomar uma ação imediata para: melhorar a saúde, comportamento e a felicidade de seu cachorro </p>
  </span>
  </body>
</html>

 

na primeira imagem ta usando css, eo css ta bugando o site 

 

queria que ficasse o desenho da pata 🐾com o texto sempre a frente dela sem usa css

🐾sadasdad

     asdadadad

     sadasdada

 

ao invés do texto fica assim

 

🐾asdadas

asdadasasda

asdasdadadaa

 

preciso muito de ajuda pra esse projeto já pesquisei toda forma de fazer isso mais só conseguir essa do css mais ela ta bugando o site

 

 

Se ate o mesmo moderador estive vendo isso se tive uma solução por favor 

 

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Carlos Alexandre 399  Sim isso é normal.  Porque tá havendo conflito com alguma regra. 

 

Você vai ter que reformular o seu CSS e até mesmo a estrutura do HTML. Não tem outro jeito.

Compartilhar este post


Link para o post
Compartilhar em outros sites
6 horas atrás, Carlos Alexandre 399 disse:

queria que ficasse o desenho da pata 🐾com o texto sempre a frente dela sem usa css

Impossível. Você vai ter que usar o CSS se quiser formatar o texto.

Dá para fazer com javascript, mas mesmo assim o javascript vai manipular o CSS.. então vai no CSS direto mesmo.

 

6 horas atrás, Carlos Alexandre 399 disse:

preciso muito de ajuda pra esse projeto já pesquisei toda forma de fazer isso mais só conseguir essa do css mais ela ta bugando o site

Só podes fazer isso com o CSS.. Se tá bugando o site, não achas que tem algo de errado na sua estrutura e no resto do CSS?

 

Reformule, seu código.  Pelo que eu vi no seu código HTML, você tá usando elementos que não são apropriados.

O elemento span não é um contêiner como o DIV.  O elemento <i> tá dentro do elemento de parágrafo. 

Se você quer manipular os elementos de forma efetiva, separe eles. 

Exatamente como fiz no exemplo no JSFiddle.  O elemento de ícone precisa ficar como irmão adjacente do elemento de parágrafo... enfim...

Com um pouco mais de estudo você vai conseguir.

 

6 horas atrás, Carlos Alexandre 399 disse:

Se ate o mesmo moderador estive vendo isso se tive uma solução por favor 

A solução já foi dada. O problema está na estrutura do site e no CSS. Como mencionei antes, reformule ele de forma mais limpa.. porque usar o CSS inline pode causar problemas, só use inline( diretamente no elemento) se quiser sobrescrever uma regra css... já que o grau de precedência é maior.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

GRÁTIS: minicurso “Como ganhar dinheiro montando computadores”

Gabriel TorresGabriel Torres, fundador e editor executivo do Clube do Hardware, acaba de lançar um minicurso totalmente gratuito: "Como ganhar dinheiro montando computadores".

Você aprenderá sobre o quanto pode ganhar, como cobrar, como lidar com a concorrência, como se tornar um profissional altamente qualificado e muito mais!

Inscreva-se agora!