Prazer em desenvolver software
Body não engloba toda a página.
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:
- Porque está marcando apenas o cabeçalho da página e não a pagina toda?
- 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
Tags: body, css, div, html, xhtml
- Anexos
-
-
Página.html, 2 KB -
Site.css, 2 KB
-
Respostas a este tópico
-
Permalink Responder até Cleiton Felipe de Moraes em
-
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....
-
-
Permalink Responder até Riderman de Sousa Barbosa em
-
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). -
-
Permalink Responder até Cleiton Felipe de Moraes em
-
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). -
-
Permalink Responder até Riderman de Sousa Barbosa em
-
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! -
-
Permalink Responder até Riderman de Sousa Barbosa em
-
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! -
-
Permalink Responder até Cleiton Felipe de Moraes em
-
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:
https://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! -
-
Permalink Responder até Wilson RG em
-
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
-
-
Site.css, 2 KB
-
Pgina.html, 2 KB
-
-
© 2015 Criado por Ramon Durães.
