laterais infinitas

[safas 0]

Olá pessoal,

primeiramente, não sei se este é o lugar correto a se postar minha duvida, todavia, em caso negativo, favor migrar pro local correto.

 

Bom, é o seguinte:

Não sei o nome desta duvida que tenho, por isso estou a chamando de lateral infinita. Ela é as laterais do rodapé e do topo do site, assim como o do forum aqui. Voces veem que o site do forum está centralizado na página, e nas suas laterais, no topo, aonde tem o logo do Imasters, mesmo fora do espaço aonde há o conteudo das paginas, a barra colorida é continua, assim como ocorre no rodape, independente do tamanho do monitor, ela mostra a tal 'barra horizontal' de forma infinita.

 

Alguem saberia me dizer como se chama este efeito e como posso faze-lo? Quem puder ajudar, agradeço bastante.

bom feriadao pra todos =)

obrigado pessoal

[Francispansa 6]

Vou dar um exemplo de como eu faria.

 

html

<div id="footer">

<div class="footer">
Conteudo do rodapé
</div>

</div>

 

css

 

#footer{
width:100%;
height: 200px; /* altura do seu rodape */
background: #333;
/* cor que irá ocupar 100% da tela no eixo x, 
caso seja uma imagem, utilize, background: url(caminho da imagem) repeat-x 0 0; */
}

.footer{
width:980px;
margin:0 auto;
}

 

;)

[safas 0]

obrigado amigo pela ajuda, mas infelizmente nao consegui fazer funcionar =(

vou ser bem sincero, códigos não é muito meu forte, sofro bastante quando preciso ajustar algo assim (utilizo DW e ele me ajuda demais).

 

Se nao for te pedir muito ou outro colega, teria como colocar aqui no topico um template modelo com os codigos html e a css, assim como você fez, mas ja com o template completo qualquer, ao inves de ser apenas esta parte do rodape/topo. Assim eu copio a formatação do css e do html e faço meus arquivos para poder estudar, e tentar entender onde uma coisa liga na outra. Se alguem tambem souber se existe algum template assim para testes na web e que possa enviar para estudos, agradeço bastante pela ajuda, muito obrigado mesmo!!

 

abs =)

[Diéssica 140]

Ok. Da forma mais simples possível...

 

Vamos ter 4 elementos e suas respectivas cores:

site :seta: Elemento responsável por todos os outros elementos

cabecalho :seta: Cabeçalho da página

conteudo :seta: Cabeçalho da página

rodape :seta: Rodapé da página

 

O layout projetado:

 

A borda verde equivale ao elemento site, que preenche 100% do ecrã (sem largura fixa).

 

Estrutura HTML:

<div id="site">
<div id="cabecalho"></div>
<div id="conteudo"></div>
<div id="rodape"></div>
</div>

 

CSS, por enquanto:

#site {
width:100%; /* Um elemento preenche 100% do ecrã por padrão, mas coloquei só pra LEMBRAR isso */
}
#cabecalho {
background:#FF0000; /* cor vermelha em hexadecimal */
}
#conteudo {
background:#000033; /* azul em hexadecimal */
}
#rodape {
background:#660033; /* roxo em hexadecimal */
}

 

Determinando altura dos elementos (height):

#site {
width:100%; /* Um elemento preenche 100% do ecrã por padrão, mas coloquei só pra LEMBRAR isso */
}
#cabecalho {
background:#FF0000;
height:100px;
}
#conteudo {
background:#000033;
}
#rodape {
background:#660033;
height:100px;
}

 

O elemento conteudo para ser centralizado com margin:auto, precisa de uma largura fixa (width):

#conteudo {
background:#000033;
width:800px;
margin:auto;
}

Determinei 800 pixels de largura e a margem automática, para centralizar.

 

E para finalizar, vou aplicar um Reset CSS para padronizar todo o corpo do HTML:

* {
margin:0;
}

 

CSS final:

/* RESET CSS */
* {
margin:0;
}
/* FIM RESET CSS */
#site {
width:100%; /* Um elemento preenche 100% do ecrã por padrão, mas coloquei só pra LEMBRAR isso */
}
#cabecalho {
background:#FF0000;
height:100px;
}
#conteudo {
background:#000033;
width:800px;
margin:auto;
}
#rodape {
background:#660033;
height:100px;
}

Obs.: se tu não entender a parte do Reset CSS, :google:

 

O HTML continua o mesmo, só que como eu não determinei largura fixa pro elemento conteudo, ele não vai aparecer. Por isso, vou por CONTEÚDO :)

 

Estrutura final do HTML:

<div id="site">
<div id="cabecalho"></div>
<div id="conteudo">......................</div>
<div id="rodape"></div>
</div>

 

Agora é só trabalhar esses códigos em cima de uma estrutura básica do HTML. Vou utilizar a do HTML5, porque é mais simples de desenvolver e dá pra fazer aqui mesmo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>"lateral infinita"</title>
<style>
<!-- aqui a estrutura css -->
</style>
</head>

<body>
<!-- aqui a estrutura html -->
</body>
</html>

 

E pronto, substitui ali os <!-- --> pelos códigos e já vai funcionar. :) O CSS fica dentro de <style></style> porque é uma formatação.

 

:bye:, e não se renda ao DW!

[safas 0]

Oi Diessica.

Deu certo =)..hehe, funcionou, ficou igual seu exemplo, muito obrigado. Vou treinar um pouco agora para conseguir aprender realmente.

 

Sem abusar muito de sua ajuda, você sabe me dizer como eu faço essa mesma barra infinita, só que ao invés de usar cores, usar uma imagem contínua? O que devo mudar no código?

 

muito obrigado mais uma vez :)

[Pablo RD 5]

Você pode colocar uma imagem como fundo num elemento usando a propriedade background-image do css. E se quiser repetir a imagem, por exemplo, horizontalmente, use a propriedade background-repeat com o valor repeat-x.

 

Atenção: Por padrão, uma imagem já se repete tanto verticalmente quanto horizontalmente. Quando você define um background-repeat ela só repete seguindo essa sua nova definição.

 

http://w3schools.com/css/css_background.asp

[FelipePereiraQMaia 0]

Amigos, não sei bem como funciona fóruns. Sou novo aqui e vou fazer minha pergunta aqui porque é relativa ao assunto debatido. O meu layout é construído exatamente dessa forma que vocês estão falando. Porém acontece que o background fica por cima do cabeçalho e do rodapé ao minimizar a página. Para vocês entenderem melhor, minimizem exatamente essa página do IMasters e olhem como o background branco irá tomar conta do rodapé e do cabeçalho azul da logomarca! Estou o dia inteiro quebrando a cabeça de como concertar isso mas nao consigo! Alguem sabe a solução?

 

abraços