• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

x4lov

Adicionar lateral ao conteudo principal do site

11 mensagens neste tópico

Ora bem estou a tentar dar os primeiros paços em css e precisava de vossa ajuda.

No file html tenho isto:

<!-- Conteudo do site -->
<div id="conteudo">

E no file de estilos isto:

#conteudo {
width: 746px;
margin:0px;
padding:0px;
padding-bottom:10px;
border-top: 0px solid #999;
background-color:#fff;
color:#666;
overflow:hidden;
}

Agora queria saber como adiciono uma lateral esuqerda e direita e ficar com o conteudo no meio.

As laterais são height: 6px e with: 100% e usam um gif cada.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Consegui adicionar as laterais e elas repetiram alguns pixeis mas não até a baixo como eu queria ficaram a meio, parece que existe ali qq coisa a travar a repitção das laterais até ao fundo.

Código file HTML:

<div id="conteudo">
<div id="laterais">
<div class="lateral_esquerda"></div>
<div class="lateral_direita"></div>
</div>

Código file CSS:

#conteudo {
width: 750px;
margin:0px;
padding:0px;
padding-bottom:0px;
border-top: 0px solid #999;
background-color:#fff;
color:#666;
overflow:hidden;
} 

#lateral {
width:6px;
padding:0;
}
.lateral_esquerda {
width: 6px;
height:100%;
background:transparent url(images/lateral_esquerda.gif) 100% 0 repeat-y;
margin:0;
padding:0;
float:left;
}

.lateral_direita {
width: 6px;
height:100%;
background:transparent url(images/lateral_direita.gif) 100% 0 repeat-y;
margin:0;
padding:0;
float:right;
}

Alguma ajuda?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Para facilitar a visualisação do código utiliza a funcionalidade GeSHi.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

eu faria conteudo, lateral, meio, lateral. As laterais e meio estariam dentro do conteudo. Uma materal dás tipo margin-left 0px; a outra margin-rigth 0px;

Isto é como faria, agora tu lá sabes lol :D

Cumps 8)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ok, vou analizar e testar depois digo se resultou no meu código.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Visita o Armazém de Código de CSS que encontras recursos para o que queres. ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado Triton, vou estudar todas as hipoteses, se tiver dúvidas logo coloco aqui. Obrigado  ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já tentei de diversas maneiras e ainda n consegui aquilo que pretendia. Vou tentar explicar-me melhor.

exemplooq7.jpg

Na figura temos o layout que pretendo, temos o header e o footer a vermelho, o conteudo no meio mais escuro e a verde as laterais que são 2 gifs com 1px de altura repetido até ao footer. Ora eu consigo colocar lá a lateral mas só consigo repetir até um x de comprimento não consigo fazer com que a lateral se repita até abaixo, já testei repeat-y mas nada.

O Azul é +- o comprimento da lateral que consigo  :bored:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

tenho ai um post.. que tem o queres nesta secçao e so dares uma vista de olhos

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora