Jump to content

Adicionar lateral ao conteudo principal do site


x4lov

Recommended Posts

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.

Link to comment
Share on other 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?

Link to comment
Share on other sites

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

http://img175.imageshack.us/img175/7963/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:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.