Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

L. Henrique

Banner quebrando Container / Bootstrap

Recommended Posts

Galera,

Faz bastante tempo que estou trabalhando num projeto com o framework Lumen (A versão "modesta" do Laravel), nele também estou usando o Blade (pra deixar o trabalho mais rápido).

Existem alguns layouts/includes nos php's em blade que afetam todas as páginas do site. No layout/include principal (que cabe a todas as páginas), sua estrutura encontra-se dessa maneira:

<div class="container">
   @yield('content')
</div>

O problema é o seguinte:

  • Possuo um banner na página principal que está sendo afetado pelo container, de fato, era para o mesmo estar em full-width (como o fluid-container do Bootstrap).
  • Não tenho como criar outro include pra essa página, senão teria que alterar várias estruturas e isso afetaria todo o site.
  • Não posso alterar o include principal, senão todas as páginas vão perder o container.

O que eu preciso é:

Existe alguma forma de um "<div><img></div>" quebrar o css da sua parent?

 

Já tentei usando top, left, ajustando width, height, float, position...
O único que funcionou, claro, foi o position: absolute, mas ele F!@# com a página toda.

 

Alguma sugestão do melhor a ser feito?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olha, dá pra entender parte do problema. Entretanto, para que possamos compreender o que está causando o problema em si, necessitamos ver a página em questão, ou ao menos o pedaço de código que esteja fazendo ocorrer esta situação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Existe alguma forma de um "<div><img></div>" quebrar o css da sua parent?

Sim, se a imagem tiver dimensões "estranhas", ela pode quebrar o parent sim.

 

Talvez um overflow: hidden te ajude a não quebrar o layout, depois de definir dimensões máximas e exatas para o elemento pai dessa imagem.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Conforme pedido, segue o layout antigo (mas ainda está na mesma situação)
>> http://behealthybeoracle.com.br/

 

Editado: Pra quem não conseguir visualizar o site, o problema é o seguinte:

  • O blade divide as estruturas, tornando o trabalho mais rápido.
  • O banner está sendo inserido dentro de uma div com class container, como já citado.
  • Na visualização do site, o lumen+blade montam dessa forma:
<div class="container">
   <div class="row">
      <div class="slider-top">
         <img src="/img/banner.jpg" class="image-responsive">
      </div>
   </div>

[...]

</div>

Ele acaba adicionando o container antes do banner (o que normalmente deve acontecer). A questão é só a possibilidade de quebra desse container na class do slider-top no código acima.

 

ENCONTREI A SOLUÇÃO!!!

André e William, consegui uma solução, não foi muito limpa, mas foi uma solução do próprio framework.

Fui na rota da home e setei um $data, feito isso, adicionei ao banner a propriedade do isset com o fluid- pra inserir antes do container.

Ficou assim:

<div class="{{(isset ($home) && ($home) ? 'fluid-' : '')}}container">
   @yield('content')
</div>

Feito isso, ele só alterou a home e eu só adicionei um container pro resto do conteúdo que deveria estar dentro.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.