[Resolvido] Bordas arrendondadas no layout, como fazer ?

[Meh 0]

Olá, bom dia!

Estou trabalhando em um novo site, faz um bom tempo já. E meu layout tem a Div#tudo, div# topo, div# menu e div#conteúdo. Eu quero por bordas arredondadas nesse layout, e até agora vi apenas Caixas com cantos arredondados. Tenho um CSS separado e talz.

meu layout é assim:

Quero saber como por bordas arredondadas no menu, conteúdo e rodapé (todos juntos), tirando fora o topo, pois é uma imagem, e não quero que haja bordas. o topo, menu, conteúdo, etc, estão na mesma div#tudo. como faço ?

Obrigado desde já. :)

[Eliseu M. 2]

Ah... como eu sou defensor do CSS3 e odiador do IE... faria com border-radius. Mas, se deseja ?que funcione em todos navegadores, terá que fazer com imagens ou JQuery (que é uma das melhores opções atualmente).

 

Dê uma olhada aí: http://www.devwebpro...iques-with-css/

 

Basicamente é isso:

 

IMG B-I

CONTEUDO

IMG B-F

 

O que significa? Que o container seria constituído por 3 imagens: uma de início da borda, uma de fundo e outra do fim da borda, sacou? É simples...

 

Falou!

[Evandro Oliveira 331]

as div's que receberão as bordas, deverão possuir a CSS position: relative

 

crie 4 classes em css

.bd_sup_esq {
  background: url(borda_superior_esquerda.jpg);
  height: 5px; /* altura da imagem de borda */
  left: 0;
  position: absolute;
  top: 0;
  width: 5px; /* largura da imagem de borda */
}

.bd_sup_dir {
  background: url(borda_superior_direita.jpg);
  height: 5px; /* altura da imagem de borda */
  position: absolute;
  right: 0
  top: 0;
  width: 5px; /* largura da imagem de borda */
}

.bd_inf_esq {
  background: url(borda_inferior_esquerda.jpg);
  bottom: 0;
  height: 5px; /* altura da imagem de borda */
  left: 0;
  position: absolute;
  width: 5px; /* largura da imagem de borda */
}

.bd_inf_dir {
  background: url(borda_inferior_direita.jpg);
  bottom: 0;
  height: 5px; /* altura da imagem de borda */
  position: absolute;
  right: 0;
  top: 0;
  width: 5px; /* largura da imagem de borda */
}

ao fim de cada div que terá bordas arredondadas, adicione:

<span class="bd_sup_esq"></span>
<span class="bd_sup_dir"></span>
<span class="bd_inf_esq"></span>
<span class="bd_inf_dir"></span>

Se fizer via Javascript, obterá uma marcação mais limpa, mas eu sou contra utilizar JS para lay-out ou estilização. Pra mim JS é evento e interação.

 

function makeMeRounded(target) {
  var options = {
    height: '5px',
    width: '5px',
    locations = [
      'borda_superior_esquerda.jpg',
      'borda_superior_direita.jpg',
      'borda_inferior_esquerda.jpg',
      'borda_inferior_direita.jpg'
    ]
  }
  for (i = 0; i < 4; i++) {
    border = document.createElement('span');
    border.style.backgroundImage = options.locations[i];
    border.style.width = options.width;
    border.style.height = options.height;
    if(i == 0 || i == 1) border.style.top = '0';
    else border.style.bottom = '0';
    if(i == 0 || i == 3) border.style.left = '0';
    else border.style.right = '0';
    document.getElementById(target).appendChild(border);
  }
}

window.onload = function(){
  makeMeRounded('menu');
  makeMeRounded('conteudo');
  makeMeRounded('rodape');
}

[Meh 0]

Só uma dúvida, esses geradores automáticos de bordas (sei lá se é isso mesmo), do tipo spiffybox ou RoundedCornr.. eles fazem o quê? lhe dão somente as bordas ou as caixas inteiras para serem substituídas? Eu ainda não entendo como funciona isso...

[Thiago Retondar 18]

Eles geram o código pra você. Assim você não precisa pensar em lógica, em como fazer, em nada.

 

Eu, particularmente, não gosto disso.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Meh 0]

Ahm. e eu só copio aquele código e tiro os comentários /*exemplo */ ?

[Thiago Retondar 18]

Sim. Só seguir os passos (steps) do link que você postou.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Meh 0]

Ah. Beleeza http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Vou tentar aqui, qualquer problema comunico. Obrigada! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Meh 0]

Moderadores, podem dar o tópico como resolvido. Não pude editá-lo, desculpem-me por isso http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Obrigado.

[Thiago Retondar 18]

Só moderadores podem colocar o tópico como [Resolvido]. Só você dar um "alerta" que agente coloca. ^_^

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Meh 0]

Sim, claro.. mas eu estava querendo dizer que não pude editar o 'Post', para dar como resolvido :)