[Resolvido] Float:left não está funcionando direito...

[pamellass 0]

Oi!

 

Gente, estou desde de manhã tentando arrumar isso aqui, e ele simplesmente n fica certo não sei pq, tentei mil coisas já!

 

 

No IE a div texto fica assim:

 

 

E no firefox fica assim:

 

 

 

eu não sei mais o que fazer, perdi a tarde inteira nisso...! :(

 

 

HTML:

 

<ul id="navmain">
   <li class="on">Sobre o CEDM</li>
   <li><a href="?page=clinica">Clínica</a></li>
<li><a href="?page=cursos">Cursos</a></li>
<li><a href="?page=sports">Sports</a></li>
   <li><a href="?page=prevencao">Prevenção da Dor</a></li>
<li><a href="?page=estudos">Centro de Estudos</a></li>
<li><a href="?page=contato">Contato</a></li>
</ul>
</div>
<div class="conteudo">
<div id="submenu">
	<ul class="sub">
       <li><a href="?page=filosofia">Filosofia</a></li>
       <li><a href="?page=historia">História</a></li>
   	<li><a href="?page=equipe">Equipe</a></li>
   	<li><a href="?page=home" class="inicial">Página inicial</a></li>
	</ul>
</div>
<div class="texto">
   <h1>O CEDM</h1>
   <h2>Centro de estudos que atua como Clínica e Instituição de Ensino</h2>
   	<p>O CEDM é um Centro de estudos e tratamento do corpo, que busca a melhor compreensão e tratamento da dor crônica e do desempenho funcional do corpo, partindo do pressuposto de que cada indivíduo possui um Perfil Biomecânico Funcional (PBF) individual, que justifica suas posturas do cotidiano, e portanto a performance de seus movimentos e quadros de dor, e necessita de tratamentos personalizados, que se baseiem nesse perfil.</p><br/>
       <p>Oferecemos:</p>
       <p><span class="bold">Cursos Profissionalizantes, (para profissionais de Fisioterapia e Educação Física)</span><br/>
Para oferecer um modelo de formação continuada em dor que utiliza o modelo pedagógico de estudo baseado em problema, e aproxima os Fisioterapeutas e Educadores Físicos da discussão interdisciplinar sobre as causas e perpetuação da dor crônica, fornecendo assim autonomia na capacidade de personalização dos métodos de aplicação clínica.</p>

<p>Tratamento e/ou Prevenção da dor, (para vítimas da dor crônica ou pessoas interessadas na prevenção ou na melhora da performance física) <br/>
Para tratar ou prevenir o aparecimento da dor crônica, por meio da integração de conhecimentos interdisciplinares da Fisiologia, que possibilitam a avaliação do perfil biomecânico funcional de cada um e, portanto, a solução clínica ideal para cada caso, de acordo com sua estrutura, movimentos e necessidades corporais;</p>
<p>Aulas e Grupos de estudo, (para pacientes e pessoas leigas no assunto)<br/>
Aulas de Pilates, Treinamentos funcionais, Seminários e Grupos de estudo que propagam parte desse rico conhecimento e o insere na prática esportiva e desportiva, de acordo com as necessidades e interesses do aluno/paciente, que deseja aprimorar seu conhecimento e/ou a performance de seu corpo e aplicá-lo no seu dia-a-dia.</p>

       </p>
       <br />
       <div class="white"></div>
</div>
</div>

 

 

 

 

 

 

CSS:

.conteudo {
width:960px;
background:#efefef url(../images/conteudo.gif) no-repeat right bottom;
}
#submenu {
width:239px;
height:617px;
background:url(../images/bluev.jpg) repeat-x;
float:left;
}
ul.sub  {
list-style:none;
padding-top: 30px;
}

ul.sub li {
padding-top: 20px;
padding-bottom: 20px;
border-bottom:white 1px solid;
text-align:center;
font: 1em Arial, Helvetica, sans-serif;
}

ul.sub a {
text-decoration:none;
text-align:center;
color:white;
}
ul.sub a:hover {
text-decoration:underline;
}
a.inicial {
font: 0.76em Arial, Helvetica, sans-serif;
color:#232559;
border:none;
}
.texto {
margin-right:45px;
width:721px;
height:100%;
}
.texto h1 {
padding:45px 0 30px 0;

}
.texto h2 {
font: italic 1.2em Arial, Helvetica, sans-serif;
padding:5px 0 20px 0;
color:#378ec3;
}
.texto p {
padding:0 45px 20px 0;
font: 0.85em Arial, Helvetica, sans-serif;
line-height:23px;
color:#333;

}
.texto ul {
padding:0 45px 20px 0;
font: 0.85em Arial, Helvetica, sans-serif;
line-height:23px;
color:#333;
}
.white {
height:400px;	
}

 

Coloquei "float:left" na div anterior a do texto, que é a 'submenu', e ja tentei colocar margin e padding para afastar o texto do submenu...mas ele n vai!

[Guilherme Oderdenge 42]

Pamela, lembre-se que quando você utilizar regras que não irão se repetir, utilize id, ou seja, #regra. Entendeu?

 

Quanto ao seu problema:

#conteudo {
  background:#efefef url(../images/conteudo.gif) no-repeat right bottom;
  width: 960px;
  float: left;
}

#submenu {
  background: url(../images/bluev.jpg) repeat-x;
  width: 239px;
  height: 617px;
  float: left;
  margin-right: 45px;
}

.texto {
  width: 721px;
  float: left;
}

 

Isso pode te ajudar, mas veja bem: para que a div onde irá conter o seu texto não vá abaixo da div do submenu, você deve criar uma camada de alinhamento para cada extremidade de conteúdo que o seu site vai ter.

 

Por exemplo:

#left {
  width: 300px;
  float: left;
}

#center {
  width: 300px;
  float: left;
}

#right {
  width: 300px;
  float: left;
}

 

Além do código acima estar correto e organizado, ele separa as camadas da maneira que você quer separar.

 

Conto com o seu bom senso para se "ralar" um pouquinho e tentar entender/interpretar o seu problema melhor. Pegar um problema pronto e jogar para nós resolvermos para você não irá acrescentar para o seu conhecimento.

[Evandro Oliveira 331]

Creio que o problema seja a margin-right da div.texto.

[pamellass 0]

Guilherme, pode ter certeza que ralei bastante aqui antes de pedir a ajuda a vcs! ;)

Só não paro tudo e estudo tuuuuudo de novo, pq está fora de cogitação agora isso.....já to atrasada 1 mes nesse projeto e ainda vou ter de aprender outras coisas ainda.....mas com certeza, quando acabar esse, vou parar e estudar mais a fundo, pois só estou descobrindo agora que é bem mais complexo do q parece! Achava que era muito mais simples! =b

 

Enfim, o ID, eu havia entendido nos meus estudos q só podia usar uma vez por tipo de tag! Eu posso então ter várias DIVs com IDs diferentes na mesma página?!

[Evandro Oliveira 331]

Não é por TAG. ID deve ser única no documento inteiro.

 

Não vai dar pau colocar na mesma TAG ou em TAG diferente, mas

<div id="div">primeira</div><div id="div">segunda</div>

e tão não-recomendado quanto

<body id="pagina"><div id="pagina">conteudo</div></body>

 

Quando falamos de ID, é um identificador único, você sabe exatamente qual - e não quais - elemento vai ser evidenciado.

[pamellass 0]

ok entendi, valeu!!

 

o resto q o guilherme falou ainda n deu certo, to tentando aqui!

 

ah, deu certo, tive de diminuir a largura da div texto por causa da margin de 45px! :)

 

mas agora o fundo ficou confuso....rs

 

http://www.centrodeestudosdador.com.br/um/index.php?page=sobre

 

vou tentar arrumar aqui.

 

---------------------------------------------------

 

 

gente, eu consegui arrumar, dei um "clear:both" no footer...

 

mas o problema agora, é algo que nunca lidei: tem como fazer com que uma div não contorne a outra sem delimitar a altura dessa outra? A div texto que subiu para o lado direito do submenú, está contornando ela ao invez de ficar no espaço que delimitei a ela...

 

http://www.centrodee....php?page=sobre

 

pois não quero definir uma altura pra div do submenú, pois vai mudar de acordo com a quantidade de texto....

[Diéssica 140]

Tu tem que fazer uma div só pra esse conteúdo (se já não tem), definir uma largura e dar float:right. Simples.

 

Aí vai separar da div do submenu, que é float:left, pois vai trabalhar só do lado direito com a largura definida.

 

Olha o que tá acontencendo:

 

O erro tá no teu código. Esqueceu de determinar o que tu quer que aconteça no CSS :thumbsup:

 

Não deixa que o browser fique responsável pelo o que deve ser feito.

 

---------------------------------

.texto {
   height: 100%;
   width: 676px;
}

para

.texto {
   float:right;
   width: 676px;
}

 

O height 100% é desnecessário.

[pamellass 0]

diéssica, mas esse conteúdo já está dentro da div texto....tem q tar dentro de outra div ainda?!

[Diéssica 140]

diéssica, mas esse conteúdo já está dentro da div texto....tem q tar dentro de outra div ainda?!

Não. Só queria que tu mesma procurasse pra entender. Editei o post :)

[pamellass 0]

deu certo!!! mas o fundo da div texto e div conteudo sumiram! vou tentando descobrir...

[Diéssica 140]

deu certo!!! mas o fundo da div texto e div conteudo sumiram! vou tentando descobrir...

:thumbsup:

 

Tenta pôr o height 100% de novo então. Se foi isso, me desculpa pelo erro, achei que era pro conteúdo expandir.

[pamellass 0]

não, mas a imagem de fundo eu coloquei na div conteudo, que é uma div q engloba todo o espaço do submenu + texto! Pq se eu coloco a imagem de fundo na div texto, a parte de baixo do submenu e a margem até a div texto ficam brancas! Estranho que aparece tudo certo no IE, mas n aparece no chrome e firefox...

[Diéssica 140]

Estranho que aparece tudo certo no IE, mas n aparece no chrome e firefox...

Se isso tá acontecendo, com certeza tem algo bem errado...

 

Tenta pôr um overflow:hidden; na div responsável pelo submenu e pelo conteúdo então!

 

(a div id conteudo)

[pamellass 0]

deu certo!!!! :)))

 

muitissimo obrigada!!