[Resolvido] Posição de uma div

[TeixeiraRamos 4]

Muito obrigado funcionou muito bem e com uma rapidez tremenda!!

Agora vou vericar o que tenho que introduzir nas minhas HTML pois as palvras com acentos ficaram com uns caracteres difentes tipo:

 

Após adiar quatro vezes a decisão sobre a obrigatoriedade do desbloqueio de celulares no País, a Agência Nacional de Telecomunicações (Anatel) determinou em reunião na tarde desta quinta-feira que as operadoras terão que desbloquear os aparelhos imediatamente e sem qualquer multa. De acordo com informações da agência reguladora, a decisão passa a valer assim que for publicada no Diário Oficial da União. A expectativa é de que a orientação do conselho da Anatel seja encaminhado ainda nesta semana para que seja publicada dentro de dez dias.

 

Valeu!!

[Thiago Retondar 18]

Coloque um charset e veja como o editor está salvando.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TeixeiraRamos 4]

Alterei a meta onde consta ISO-8859-1 para

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

e os carateres doidos sumiram ficando tudo como antes. Valeu! Ta notando como estou ficando?

[TeixeiraRamos 4]

Bem continuando a questão da posição.

Uma página HTML com CSS é criada com critérios. Caso contrário seria lastimável.

Mas o que ainda não consegui entender é esse critério de como se chegar a conclusão da posição de uma div em uma página.

Não tenho dúvida que vou ficar tentando e vou conseguir coloca-las no lugar que eu desejo mas não pode ser esse o critério que estou adotando de chega para lá, mais um pouco para para direita, sobe, depois para lá e vou testando, testando até chegar a uma posisão correta. Tem algum critério para se chegar a uma conclusão dasse posição.Correto?

Vamos supor que eu desejo colocar três divs uma do lado da outra horizontalmente bem abaixo da barra inicial. O normal como é usado por ai.

Que números e operações são feitas para chegar a conclusão da posição dessas divs. Vai sendo colocado e vai testando, testando. Tudo bem que existe o Float com as sua 3 posições mas isso não é tudo. Não basta usar o Float e indicar: left (para a direita), right (para a esquerda) ou name e pronto. Tem que trabalhar com outros fatores. Deve haver algo para chegar a uma conclusão, por exemplo:

 

#tudo { 
	width : 980px; 
	margin : 0 auto; 
	text-align : left; 
	background : #fff; 
}

A div #priNcipal tem:

 

#principal { 
	background : #fff; 
	margin : 0 40px; 
	clear : both; 
	width : 900px; 
}

No topo tem:

 

#topo { 
	position : relative; 
	width : 980px;      /*largura do topo*/
	height : 100px;     /*altura do topo*/
	background : #666666 url(file:///C|/inetpub/wwwroot/Copia%20meu%20site%20Local%20Hospedagem/images/Image/logo.jpg) no-repeat;                 /*Imagem no fundo do top*/ 
}

 

Dessa forma se você pretende colocar as divs dentro da div #principal faz o seguinte:

a)some a largura x da div #toda com a largura da div Y da #principal.

b)o resultado será igual a largura da sua div-1 (lado direito);

E assim sucessivamente até chegar a coclusão que as três div tem X, Y e Z posições. Será que é isso?

 

Se tiver algum material de leitura por favor indique que gostaria muito de aprender essa parte.

 

Obrigado.

Duas e vinte da madrugada. Vou dormir.

 

 

Não é dessa forma que funciona?

[Desnickadu 0]

layout de tres colunas normalmente fazemos com 'float: left' nas 3.

 

o tamanho, posição e talz depende do layout só. Não existe uma formula de como fazer.

 

 

 

cuidado com esses positions :P

eles são grande bugadores de layout xD

[Thiago Retondar 18]

Cuidado com o jeito que você chama as imagens! http://forum.imasters.com.br/public/style_emoticons/default/seta.gif file:///C|/inetpub/wwwroot/Copia%20meu%20site%20Local%20Hospedagem/images/Image/logo.jpg.

 

 

Coloque as imagens em pastas relacionadas ao site e que vão ser hospedadas.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TeixeiraRamos 4]

Obrigado com relação modo de chamar a imagem. Esse modo veio da cópia do local de hopedagem vou verificar. Valeu!

Mas é o seguite: Considerando "layout de tres colunas normalmente fazemos com 'float: left' nas 3." Muito bom as divs ficaram da forma como eu queria. Funcionou! Mas estou errando em alguma coisa e não sei a onde:

 

a) digitando um texto dendro de uma das divs o texto não para vai direto entrando por dentro de outra div. Vou ter que usar <br /> para quebrar toda vez que isso ocorrer?;

 

B) não tem como manter o texto fixo (como estva antes sem %),ou seja, ficar dentro da sua respectiva div e automativamente ir quebrando?;

 

c) não tem necessidade de colocar nada em positon de cada div? Não colocando ela assume qual position?;

 

d) tenho que colocar mais tres em baixo. Vou seguir o mesmo processo?

 

 

A CSS dasse parte ficou assim:

#area-euindico{

float:left;

width:27%;

padding-top: 40px;

text-align: left;

margin: 0px;

}

 

#area-politica {

float:left;

width:36%;

padding-top: 40px;

text-align: left;

border-right: thin dotted #CCCCCC;

margin: 0px;

}

 

#area-hobby {

float: left;

width: 36%;

padding-top: 40px;

text-align: left;

border-right: thin dotted #CCCCCC;

margin: 0px;

}

 

 

 

A HTML

<div id="area-politica">

<h3>Div Politica</h3>

<h4>Vericar posição area Politica</h4>

<p>Teste babababababababababababababa<br />

babababababababab<br />

ababababababababababababab </p>

</div>

 

 

<div id="area-hobby">

<h3>Div Hobby</h3>

<h4>Vericar posição área Hobby</h4>

<p>Teste avavavavavavaav</p>

</div>

 

 

<div id="area-euindico">

<h3>Div Eu indico</h3>

<h4>Vericar posição Eu indico</h4>

<p>Teste avavavavavavaav</p>

</div>

 

[Desnickadu 0]

o browser quebra automaticamente quando existem espaços no texto.

como você colocou uma palavra muito grande ele não quebra.

pra fazer teste de conteudo use Lorem Ipsun : http://www.lipsum.com/

assim fica um texto de verdade :)

 

 

se nenhum position for declarado ele é tratado como 'static', dessa forma a renderização do browser segue a ordem em que foi escrito do HTML.

 

não tenho nenhuma materia sobre isso em portugues pra te passar, em te fica com o que a W3C diz xD

http://www.w3schools.com/Css/pr_class_position.asp

 

 

pra por mais tres colunas embaixo dessa você faz o mesmo esquema, mas na primeira da esquerda você precisa declarar 'clear: both;', caso contrario o número de colunas vai dependender do tamanho de cada coluna e do tamanho do seu do box pai.

por exemplo, se você tem cada coluna de 'width:100px' e um pai de 'width: 500px;' vão caber 5 colunas nele, mas se você declarar o 'clear:both' na terceira coluna as restantes irão para baixo.

 

toma cuidado ao fazer um layout liquido [usando porcentagens nos tamanhos do box], porque o resultado muda bastante de acordo com a resolução do usuario

[TeixeiraRamos 4]

Quando você pede para "toma cuidado ao fazer um layout liquido [usando porcentagens nos tamanhos do box], porque o resultado muda bastante de acordo com a resolução do usuario" eu tabamém achei que teria consequencias desse tipo. Eu li alguma coisa. Mas você não comentou que para o meu caso deveria seguir "layout de tres colunas normalmente fazemos com 'float: left' nas 3.". Usa o layout com float: left mas tudo com px? E a posição absoluta, relativa?

[Desnickadu 0]

sim, pode fazer tudo com pixels e/ou colocar tudo dentro de um container com tamanho definido em pixels, ai não tem problemas usar porcentagens internas.

 

'position: absolute' vai fazer o box ficar posicionado relativamente ao pai mais proximo que tenha um position que não seja 'static'

 

'position: relative' vai posicionar o box a partir do ponto que ele deveria ser renderizado. então você define as medidas que ele vai "andar" [left-right-top-bottom].

 

'position: fixed' vai fazer o box ficar "grudado" no monitor, sem se mexer.

[TeixeiraRamos 4]

Obrigado.

Bem, todas os divs #principal, #tudo, #topo usam px.

Pelo que entendi se eu colocar as minhas div dentro da #principal que tem uma posição statica (usando px) não terei problema de visualizarção dos textos conformur o tamanho d monitor?

[Desnickadu 0]

tamanho estatico com pixels, certo ?

então não tem problema de colocar dentro dessas 'div' alguma 'div' com tamanho em porcentagem.

 

se esse exemplo das tres colunas que você mostrou hoje estiver dentro da '#tudo' que tem tamanho em pixels você não vai ter problemas não :)

[TeixeiraRamos 4]

Elas estão dentro de "#tudo", que por sua vez está dentro da "#pricipal":

 

 

#tudo {

width : 980px;

margin : 0 auto;

text-align : left;

background : #fff;

}

 

#principal {

background : #fff;

margin : 0 40px;

clear : both;

width : 900px;

 

 

Por favor, eu colocando depois no servidor (HTML e CSS) daria para você fazer suas criticas e oientações?

Faz muitos anos que fiz cursos de HTML agora estou apanhando com as CSS mas é muito bom.

[Desnickadu 0]

não só eu como toda a galere que faz codigo aqui pode te ajudar :)

 

eu ainda estou começando perto da galera que frequenta isso aqui x]~~

[TeixeiraRamos 4]

Ótimo para todos criticarem.

Fui até Lorem Ipsun : http://www.lipsum.com/ é exatamente o que eu desejo mas tudo em ingles e o

Download all of the banners: banners.zip or banners.tar.gz são das imagens. Não adianta.

Gistaria de um exemplo para aprender.

[Desnickadu 0]

http://pt.lipsum.com/

 

Lorem Ipsum é pra você usar pra ver como fica o conteudo no seu site, só pra isso

 

não é um modelo nem uma forma de criar :P

[TeixeiraRamos 4]

Eu estou vendo fantasma. Estava testando o texto digitando dentro da div xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx, esses x's entravam dentro de outra div. Com isso classifiquei como erro. Agora digitando um texto normal observei qua as palavras entram normalmente e não ultrapassaram para a div do lado. Dessa forma está correta a div? Correto gente?

[Thiago Retondar 18]

Dessa forma está correta a div? Correto gente?

Sim, pois você não vai ter uma palavra do tamanho xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.. @_@

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TeixeiraRamos 4]

Fechado! Obrigado.