Layout com cantos arredondados

[anggelus 0]

Boa tarde,

eu estou refazendo o meu layout e preciso saber como que eu faço um layout com os cantos arredondados, e ao mesmo tempo eu quero que o fundo seja da mesma cor tanto na parte de cima quanto no rodapé, que também eu queria um jeito de licar com uma "linha" as laterais, fazendo uma ligação da parte de cima com a de baixo. Sendo que a área de conteúdo vai ser de fundo branco.

 

estou colocando uma imagem do layout feito com tabelas, que ficou bom, mas não funciona muito bem em vários browsers e com mudança de resolução.

O meu menu principal vai ficar onde tem o botão "Página Inicial", e vou ter um outro menu na esquerda com link para áreas específicas do site.

 

 

Abraços

Anggelus :D

[Poe 0]

Boa diversão:

 

http://www.maujor.com/w3ctuto/roundshadow.html

http://www.maujor.com/tutorial/box-arred.php

 

Quer mais? O oráculo, ou melhor, o Google, ajuda-te na sua procura! rs

 

http://www.google.com.br/search?hl=pt-BR&a...css&spell=1

[anggelus 0]

boa noite,

eu já estava fritando meu miolos e consegui, fiquei até surpreso :tongue:, agora eu tenho que descobrir como que eu faço para o rodapé descer quando algum conteúdo for maior que a área anterior, pq eu estou fazendo um sistema que vai precisar o mínimo possível de refresh na página usando AJAX, eu fiz um teste bobo e coloquei um <p>Teste</p> em um div dentro do div que cria as imagens laterais, mas o rodapé continuou fixo, se você quiser eu posto aqui o código.

Abraços

Anggelus :D

 

Novo teste:

 

[Giovani 104]

anggelus, da próxima vez post um link, fica mais fácil para ajudá-lo.

 

Como não vi o seu código quem sabe um

clear: both;

resolva o seu problema.

Em relação as bordas arredondadas, tem aqui no fórum mesmo, basta pesquisar.

 

http://www.imasters.com.br/artigo/3692

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

[anggelus 0]

beleza kra,

eu não postei um link pq eu tô fazendo em localhost, sobre o

clear: both;

como que você define ele, ele vai no rodapé do no conteúdo, porque eu testei aqui e não funcionou.

Abraços

Anggelus :D

[Giovani 104]

Na sua div rodape acrescente isso:

 

#rodape{...clear: both;...}

[]'s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

[anggelus 0]

Verifica ai pra mim fazendo favor, os nome das imagens são alto explicativos, Meio-Barra-Baixo.gif é a barra que liga o cabeçalho ao rodapé e faz também a ligação entre os cantos no rodapé

esse é o CSS

/*cria o cabecalho das bordas*/.cabecalho { background: url(../imagens/Meio-Barra-Superior.gif) repeat-x;}.cantoscima div { background: url(../imagens/Canto-Esquerdo-Alto.gif) no-repeat top left; }.cantoscima { background: url(../imagens/Canto-Direito-Alto.gif) no-repeat top right; }/*fim do cabecalho*//*cria os lados*/.lados {background: #ffffff url(../imagens/Meio-Barra-Baixo.gif) repeat-y;}cantoslado div { background: url(../imagens/Meio-Barra-Baixo.gif) repeat-y 100% 100%;}.cantoslado { background: url(../imagens/Meio-Barra-Baixo.gif) repeat-y 100% 100%;}/*fim dos lados*//*cria do rodape*/.rodape { background: url(../imagens/Meio-Barra-Baixo.gif) repeat-x;}.cantosbaixo div { background: url(../imagens/Canto-Esquerdo-Baixo.gif) no-repeat top left; }.cantosbaixo { background: url(../imagens/Canto-Direito-Baixo.gif) no-repeat top right; }/*fim do rodape*//*incio configuração do tamanho*/.cantoscima, .cantoscima div {height: 74px;}.cantoslado, .cantoslado div {height: 250px;}.cantosbaixo, .cantosbaixo div{height: 20px;}.cabecalho { margin: 0em auto 0em auto; }.lados { margin: 0em auto 0em auto; }.rodape { margin: 0em auto 0em auto; }/*fim configuração do tamanho*/

Esse é o meu HTML:

 

<div class="cabecalho" >						<div class="cantoscima">			   <div></div>			</div>			 	 </div> 	 	  <div class="lados" >					<div class="cantoslado">	<!--DENTRO DESSE DIV QUE FICARÁ TODO CONTEÚDO-->	   											<div class="conteudo" >				 <p>Teste</p>				 <p>Teste</p>				 <p>Teste</p>				 <p>Teste</p>				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p>				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p> 				 <p>Teste</p>			</div>						</div>	  	 </div> 	 	 <div class="rodape" > 				<div class="cantosbaixo">			   <div></div>			</div>	  	 </div>

[anggelus 0]

descobri o problema era que o conteúdo tava com um valor fixo height: 250px; obrigado a todos que me ajudaram