[Resolvido] problema com float

[Thiago Carvalho 0]

Oi pessoal, primeiro peço desculpas se estou repetindo algum tópico recente, mas estou procurando por tópicos que possam me ajudar. O número de pa´gias de tópicos passa do 100 logo acho que vou demorar um pouco.

 

Então decidi postar esse para adiantar o trabalho,

 

estou com um problema de estrutura num site que estou fazendo que acredito deve-se ao mau uso das propriedades float e position, se puderem dar uma olhada no site é esse aqui acesse o site aqui.

 

minha principal dúvida é por que o site está extrapolando o tamanho de W: 780px, e criando uma linha de mais ou menos de 10px de espaçamento do lado direito.

 

Outra coisa, eu gostaria de substituir meu menu em flash por um em CSS, mas não sei fazer um menu CSS horizontal...

 

se puderem me ajudar agradeço...

 

Muito obrigado pela atenção

 

Thiago Carvalho

 

este é o estilo:

 

 

CODE

/* styles - Por favor, a modificar o arquivo comentar o que foi mudado e por quê */

body {

line-height:1.166;

font-family:"Trebuchet MS", sans-serif; /* declara a fonte padrão do documento */

font-size:10px; /* declara o tamanho padrão da fonte do documento */

color:#000; /* declara o cor padrão da fonte do documento */

background:url(../images/background.jpg) scroll 0%;

padding:0;

margin:0;

/* aqui se configura a barra de rolagem de todo o site */

scrollbar-face-color:#ffffff;

scrollbar-highlight-color:#9C9C9C;

scrollbar-3dlight-color:#ffffff;

scrollbar-darkshadow-color:#ffffff;

scrollbar-shadow-color:#9C9C9C;

scrollbar-arrow-color:#9C9C9C;

scrollbar-track-color:#ffffff;

background-color: #ffffff;

/* acaba aqui a configuração da barra de rolagem */

}

div {

position:relative;

}

span {

position:relative;

display:inline;

}

.tudo {

margin:0 10% 0 10%;

padding:0 0 4% 0;

width:100%;

}

.conteudo {

background-image:url(web/images/img_fundo.png);

background-repeat:repeat-y;

padding:0 5px;

}

#head_anima {

width:780px;

}

#left {

float:left;

width:170px;

padding:0 5px;

}

#main {

float:left;

width:420px;

}

#right {

float:right;

width:170px;

padding:0 5px;

}

#bottom {

float:none;

margin:30px 0 10px 0;

padding:5px 10px 5px 100px;

width:780px;

background:#EEE url(../imagem/logo_PB.png) no-repeat 2% 50%;

}

[William Bruno 1501]

<div name="tudo" id="tudo" align="left" class="tudo">

você não precisa declarar "name" para as suas DIVs, e apesar de você ter declarado ID, não existe isso no teu CSS, você trabalhou só com "class".(qndo declara .tudo, é uma class, qndo declara #tudo é uma id)

 

 

.tudo {	
 margin:0 10% 0 10%;/*eu usaria o valor AUTO*/
 padding:0 0 4% 0; /*não entendi o porque deste padding*/
 width:100%; /*o correto acho que seria declara 790px, que é a largura do seu documento*/

Acredito que esteja nessa declaração de class o problema do espaçamento.

[Anderson Narciso 3]

boooa tiu uiLL =]

 

Cara teu menu em flash é um drop down

Ficou show. Mas se queres mudar

Tenta o Busca no Forum, tem varios artigos sobre menu drop, concerteza vas encontrar algo.

Abraço.

[William Bruno 1501]

xD

[Thiago Carvalho 0]

Cara, eu sempre declaro name nas minhas tags para facilitar no uso de um JS futuro. no caso das classes .tudo e .conteudo eu coloquei assim para manter o mesmo layout em páginas diferenets caso as ID #tudo e #conteudo fossem usadas em algum JS, mas aco que você tenm razão vou mudar e ver qualé de mermo, valeu

[William Bruno 1501]

Hum.. entendi.

Bom Thiago, eu eliminei o scroll horizontal, alinhando corretamente o seu site no centro da página.

 

body {	
	text-align: center; /*vai jogar as DIVs pro centro*/
}
.tudo{
	margin: auto; /*automaticamente, vai calcular as margens para que TUDO fique no centro */
	width: 790px; /*largura do documento*/
}

[Thiago Carvalho 0]

Pow cara valeu mesmo... nunca pensei em colocar as margens em auto, é que o IE sempre dá problema com isso, mas ficou beleza valeu... precisando de alguma ajuda também... é só pedir...

[brcontainer 16]

Valew tiu uiLL, e Thiago Carvalho qualquer duvida volte a perguntar ;)