← HTML + CSS

[CSS] Float CSS fundo desaparece

Lida 6748 vezes

Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Aqui está o código HTML:

Código: [Seleccione]
<div id="content">
<div id="topmenu">item</div><!-- topmenu -->

<div class="post">
texto
<a href="#">isto é um link</a>
</div><!-- post -->

<div id="sidebar">
<h2>Titulo</h2>
<ul><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li></ul>
</div><!-- sidebar -->
</div><!-- content -->

Aqui está o CSS:

Código: [Seleccione]
#content {
width:990px;
background:url(images/bg_content.png) repeat-y;
}

#topmenu { height:48px; width:963px; margin:0 auto; background:#252525 url(images/top_menu.png) right; color:#fff; clear:both; }

.post { width:580px; margin:0px; float:left;}

.post h1 a:link { border:0; color:#5486b9; }

#sidebar{
margin: 0;
width: 300px;
text-align: left;
vertical-align: top;
color: #000;
float:left;
}

Questão 1
O fundo do #content desaparece quando meto um float na #sidebar.

Já meti os códigos apenas com floats e quando coloco o float, seja ele qual for, na #sidebar o fundo do content desaparece.

Questão 2
Quando faço copy / paste do .post a sidebar desce e fica alinhada com o segundo post em vez de estar no topo como devia estar. Mesmo alterando as larguras, usando clears, o problema mantém-se.


Já não é a primeira vez mas sinceramente não me consigo recordar como resolvi isto anteriormente. É fustrante  #-o

Alguém me pode dar uma ajudinha?  :-k
Offline

mobilista 
Membro
Mensagens 80 Gostos 0
Troféus totais: 24
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1

Não percebo muito disto mas sem ver um esquema visual do que queres fazer é que não chego mesmo lá.

Por outro lado, se pões um float na sidebar e esta corresponde ao nome que está a usar, ou seja, uma coluna de navegação que acompanha o corpo, esta deve vir em primeiro lugar no html...

O que costumo fazer é float left na sidebar (se ficar à esquerda), float right no corpo, especificando as respectivas margins, e depois crio um div footer com um clear:both (que até pode ficar vazio se quiseres, mas tem que existir para veres todo o conteúdo de ambos os floats).

Ajuda?
Offline

bfms 
Equipa
Mensagens 1769 Gostos 40
Feedback +1

Troféus totais: 35
Trófeus: (Ver todos)
Search Level 6 Apple User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Não percebi uma coisa, já meteste tudo com float: left;?
Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Update

Problema resolvido, coloquei mais divs e acabou por fazer o que eu queria.
Acabei por criar um div com a largura completa da coluna da esquerda e assim já funcionou.

Mas se ficasse apenas com o div posts não dava, ou seja:

Post / sidebar

Mas se fizesse 2 posts a sidebar ficava alinhada com o mais abaixo do género:

Post

Post / Sidebar



Alguém tem uma explicação para isto?
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Olá,

Isso dependeria do div pai, podendo ter um width ou não.. Por vezes a definição da largura faz os div's descerem tendo float ou não..

Cumprimentos,
webflex
Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Bom, o meu problema continua e desta vez não estou a conseguir resolver.

Código: [Seleccione]
<div id="content">
<div id="sidebar">
<h2>Menu</h2>
<div class="menu"></div><!-- menu -->
<div class="menu_bottom"></div><!-- fundo menu -->
</div><!-- sidebar -->

<div id="conteudo">
<div class="entry">
<h1>Apresentação</h1>
<div class="info">22 setembro 2008</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><!-- entry -->
</div><!-- conteudo -->
</div><!-- content -->

Este é o codigo.

Quando o #conteudo recebe um float:left o layout parte-se e o #content é como se tivesse altura de zero.
Se definir um min-height o fundo do #content aumenta mas a partir do momento que o #conteudo é maior que o min-height o layout não acompanha.

Já se fizer float na #sidebar o layout não parte. Mesmo que o #conteudo tenha apenas texto ao colocar um float o layout parte-se.

Alguém me sabe explicar pq?

Adicionei um anexo para quem quiser ver um exemplo do problema.
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Boa Noite,

É possível ver um exemplo online?

Cumprimentos,
webflex
Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Bom depois de martelar com a cabeça a solução até era simples.

bastou colocar um float:left e clear:both no #content e voltou a funcionar.

Agora se me pedirem uma explicação concreta para o problema não sei dar..
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Olá,

A propriedade float como o próprio nome indica quer dizer flotuante, logo se você tiver uma div do lado direito com float: left; e uma div do lado esquerdo sem qualquer float, a div do lado direito vai sobrepor a div esquerda.. Não sei se me fiz entender, mas aconselho a dar uma estudada em construções com Float ;).

Cumprimentos,
webflex
Offline

muiomuio 
Membro
Mensagens 324 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Sim claro, isso é obvio.

O problema é q eu tinha um div sem float e por baixo outro div sem float e dentro do 2º div tinha 2 com float:left

Assim que colocava o float:left dos 2 divs dentro do segundo div ele desaparecia.

Exemplo:

Cenário 1:
O div content tem um fundo e funciona perfeitamente.
Código: [Seleccione]
<div id="content">
<div id="sidebar"></div>
<div id="conteudo"></div>
</div>

Cenário 2:
O div content tem um fundo, a sidebar tem float:left; e o conteudo igualmente.

Código: [Seleccione]
<div id="content">
<div id="sidebar" style="float:left;"></div>
<div id="conteudo" style="float:left;"></div>
</div>

Neste caso o div content era como se não existisse ou tivesse.

O problema resolvi colocando float:left; no content.
Agora a questão é porque é que o #content desaparecia pelo facto dos 2 divs dentro dele terem floats e porque é que não desaparecia quanto apenas a sidebar tinha float.
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Olá muiomuio,

Esse problema acontece, porque quando se atribui float a uma div, esta deixa de estar associada ao conteúdo, deixa de ser o que se chama de "inherit", simplificando o seu width e height deixa de estar associado à div dentro da qual está inserida. Não sei se me expliquei muito bem.

Qualquer dúvida, apita.

Abraços,
Ricardo