Neste link vocês podem encontrar uma página que estou desenvolvendo.

Notem que no CSS tenho uma classe chamada ".redborder ". O código completo desta classe é:

 

.redborder, body
{
    border:2px solid red;
}

Ou seja, ele está marcando a tag body com uma borda vermelha.

 

Agora vamos as perguntas:

 

  1. Porque está marcando apenas o cabeçalho da página e não a pagina toda?
  2. Em um post no StackFlow uma pessoa me falou para alterar o código de:

 /span>div class="headerLeft" / >

para

 /span>div class="headerLeft"></div>

Como e porque esta alteração fez com que a borda marcasse toda a página?

 

   3. Notem que mesmo depois desta alteração, se eu almentar a o tamanho do meu brower, a pagina fica desalinhada, deixando por exemplo as formas de contato sempre alinhadas à esquerda. Como posso consertar isso?

 

Apenas de estar anexando os arquivos da página, no link acima vocês podem encontrar o código completo


 

 

Exibições: 145

Anexos

Respostas a este tópico

Boa tarde Riderman,

Respondendo sobre esta diferença 

 /span>div class="headerLeft" / >

para

 /span>div class="headerLeft"></div>

 

é o seguinte: Toda a marcação div precisa ser aberta com <> e fechada com </> pois se refere a um box pois podemos colocar contéudo dentro desta marcação, ela só marcou a página por que a partir do momento que vc mudou ela vc fez o fechamento correto da marcação pois antes disso o browser não reconhecia a sua marcação.

Agora a sua terceira duvida vc poderia explicar melhor pois não entendi: Como assim a hora que vc aumenta o browser a página fica desalinhada?  

 

Fico no aguardo....

Veja só Cleiton.

Na página que está em anexo, as formas de contato (contato beatriz, ana paula e o endereço) note que elas estão desalinhadas ao header (retangulo roxo no topo da página).

E isto não pode acontecer. Ele tem que ficar com com uma margem, 40px se não me engano, mas na mesma linha do retângulo.

Para tentar explicar melhor, coloque o
ao invés

É dessa forma que deve ficar.
Se você tirar o
e colocar da forma correta:
note que as formas de contato por exemplo vão se alinhar mais à esquerda da página.

Não sei se consegui explicar direito. Mas basicamente, quando faço da forma correta o site desalinha, porém a borda vermelha cobre o site todo. Mas da forma errada, o site fica alinhado, mas parece que o body é apenas o header(marcado com a borda vermelha).

Cara desculpa a demora muito trabalho e mais a facul fez eu dar uma atrasada na sua ajuda, bom entendi o seu problema, vc criou o layout diretamente no body correto?

 

Solução:

Faz o seguinte após a tag <body> cria uma div com o id all (ex: <div id="all">) e coloque a seguinte configuração no seu css:

#all

{
    width:1024px;
    margin:0 auto;
    height:100%;
}

Repare bem que a formatação é bem parecida com o a div header que vc criou apenas sem o backgroud e com a "margin: 0 auto;" pronto.

Feche esta div </div> após todo o seu layout antes da tag </body>  assim vc centraliza o seu layout e ele não desconfigura mais.

 

Qualquer dúvida é só avisar...

 

Att...

Cleiton Felipe  

Riderman de Sousa Barbosa disse:

Veja só Cleiton.

Na página que está em anexo, as formas de contato (contato beatriz, ana paula e o endereço) note que elas estão desalinhadas ao header (retangulo roxo no topo da página).

E isto não pode acontecer. Ele tem que ficar com com uma margem, 40px se não me engano, mas na mesma linha do retângulo.

Para tentar explicar melhor, coloque o
ao invés

É dessa forma que deve ficar.
Se você tirar o
e colocar da forma correta:
note que as formas de contato por exemplo vão se alinhar mais à esquerda da página.

Não sei se consegui explicar direito. Mas basicamente, quando faço da forma correta o site desalinha, porém a borda vermelha cobre o site todo. Mas da forma errada, o site fica alinhado, mas parece que o body é apenas o header(marcado com a borda vermelha).
Vlw velho, deu certo!!
só fiquei com uma dúvida:
Como foi que ele centralizou? Que propriedade fez com que ele centralizasse?
No mais vlw pela ajuda!
Vlw velho, deu certo!!
só fiquei com uma dúvida:
Como foi que ele centralizou? Que propriedade fez com que ele centralizasse?
No mais vlw pela ajuda!

Que bom que deu certo...

 

A mágica "rsrs" é o seguinte quando vc criou a configuração no seu css do id all vc colocou a largura do id e configurou a margin com o atributo auto isso já faz a centralização.

 

Vc tbm coloca a sua div com id all no primeiro nivel do body informando que o seu layout vai estar dentro desta div, a partir dai a centralização já fica ok (obs: o nome da div pode ser qualquer um eu por padrão trabalho com o nome all ou tudo para mim saber que dentro desta div está todo o meu layout).

 

Não sei se consegui explicar bem mas qualquer dúvida pode perguntar e tbm tem o site do Maujor para vc consultar tudo sobre css.

 

Caso não fui claro quanto a explicação da uma olhada neste link e vc vai entender melhor:

http://maujor.com/dicas/pg_centrada.php 

É isso carinha qualquer coisa estamos ai....

 

Fui...
Riderman de Sousa Barbosa disse:

Vlw velho, deu certo!!
só fiquei com uma dúvida:
Como foi que ele centralizou? Que propriedade fez com que ele centralizasse?
No mais vlw pela ajuda!

meu colega...segue em anexo seus arquivos como exemplo que podes seguir...

gosto de usar % em css pois assim fica mais fácil centralizar informações na tela independente da resolução.

Anexos

RSS

© 2017   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço