Publicado em 1 Jun 2009 | 12,464 visualizações

Tableless - Box com cantos arredondados

Salve Amigos do Mxmasters, David CHC, em mais uma vídeo aula de Tableless. Nessa aula iremos aprender a fazer uma div com bordas arredondadas. É algo bem simples, mas é uma duvida bem recorrente no fórum.

Tenham uma boa vídeo aula!

Arquivos utilizados

Tags: Acessibilidade, Box com cantos arredondados, css, Padrões web, Tableless

Opinião do internauta - 64 Comentários

bemmer | Floresta | PE
Junho 1st, 2009 em 7:02 am
Era isso que eu tava precisando, bão dimais da conta sô… brigado!!!
Frederico
Junho 1st, 2009 em 10:04 am
Parabéns David CHC, você acertou em cheio cara já estava com essa duvida fazia tempos…
Obrigado pela vídeo aula solucionatica.
(rsrsrs)

Abraços.
kleber
Junho 1st, 2009 em 10:55 am
Opa boa aula
Alexandre
Junho 1st, 2009 em 12:05 pm
muito bom David…

tenho certeza que irá ajudar muita gente…

parabéns!
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum - ochii
Junho 1st, 2009 em 1:18 pm
Yahoooooooooo!
Mais uma de Tablelles eba.
Pena que tou saindo pra escola mais assim que chegar
assisto e se tiver alguma duvida posto no forum ou aqui ^^

flw

(@_+) - ochii
João Paulo de Vasconcelos Resende
Junho 1st, 2009 em 1:58 pm
Muito boa a aula, parabens david.
Leonardo Tavares
Junho 1st, 2009 em 5:17 pm
Tenho certeza que muitas pessoas do fórum vão adorar essa vídeo aula.
Parabéns David!
Rafael Avlis
Junho 1st, 2009 em 5:37 pm
como sempre uma otima video aula…

parabens!!!
Sergio Araujo - SP
Junho 1st, 2009 em 6:59 pm
Ola David blz…

parabens pela iniciativa, muito boa a video com esse tipo de informação,eu mesmo não imaginava que dava para fazer isso…

Parabens

Abraços
Victor
Junho 1st, 2009 em 7:10 pm
Muito massa David!
Pra quem tah aprendendo, é um bom tutorial, muito util!

Abraços.
Hugo Luiz
Junho 1st, 2009 em 7:12 pm
Ai David vlw mesmo! Muito boa essa aula, agradeço por compartilhar.
vlww
Willian Carvalho
Junho 1st, 2009 em 7:23 pm
Muito boa essa video aula. Parabéns \o/.
Rangel
Junho 2nd, 2009 em 1:45 am
Muito boa a video aula!
mais uma duvida persiste…

se eu usa um degradê dentro do box arredondado como eu devo proceder?
Felipe Cardozo
Junho 2nd, 2009 em 12:23 pm
Rangel, creio que você tenha que jogar o degradê na imagem de cima, na parte do meio fatiar ele na horizontal. Na imagem de baixo, você coloca com a cor do bg do bloco central.
rafael nascimento de souza
Junho 2nd, 2009 em 6:52 pm
Muito bom david você poderia fazer uma video aula de oucultar e exibir as divs neh? ;} . to precisando =/

muito boa video aula cara parabens e continue sempre assim!

vlw abraços
Flash
Junho 3rd, 2009 em 4:19 am
hmm..
vlw a resposta felipe!
MxMasters o melhor conteudo da web!
Luiz Gomes
Junho 4th, 2009 em 3:12 am
David, aula show, impressionante como você transforma estas dificuldades em soluções tão simples e objetivas.
Parabéns mesmo.
Leonam Dias
Junho 4th, 2009 em 6:06 pm
Olá pessoal, muito boa video aula! rs, dificil dizer que uma vídeo aula do MX não seja boa, mas enfim, quero parabenizar toda a equipe pelo ótimo trabalho.

Aproveitando a oportunidade:

Queria saber se é possível alterar a aparência da barra de rolagem dos boxes através de CSS. Isso é possível?

Abraços
Alexandre
Junho 25th, 2009 em 8:11 pm
hey muito show de bola david tinha a uns tempos atraz postado um topico no forum sobre div com canto arredondados vlw
Wilson
Julho 5th, 2009 em 12:36 pm
Muito boa essa video aula, consegui fazer certinho, mas quando colo o texto no conteudo do box, ele ultrapassa o mesmo, saido do box, porque isso acontece?
David CHC
Julho 5th, 2009 em 1:04 pm
@Wilson, provavelmente vc está definindo uma altura para ele.
Alan Pereira
Julho 6th, 2009 em 12:50 am
Amigos, ficou ótimo!

Do jeito que tem quer ser, simples e inteligente.

Valewwww
Rodrygo
Julho 8th, 2009 em 3:30 pm
Ótimo video, mas fiz e não consegui, acho que estou errando em alguma linha comando…
David CHC
Julho 8th, 2009 em 3:56 pm
@Rodrygo, na descrição da video aula, tem o link para script utilizado na video aula, está no forum do mxmasters, assim vc pode conferir o seu código
Melquisedeque Nascimento
Julho 13th, 2009 em 7:17 pm
Cara meus parabéns por essa vídeo aula, já tinha visto outras m eu n tava entendendo nada e essa sua aula foi bem explicativa e de fácil entendimento. Continue assim.

Vamos nessa q o Brasil é nosso!
Luiz
Julho 15th, 2009 em 1:57 am
Não é mais facil criar 3 divs (#topo #meio #base) colocando no css os 3 juntos com 200px geral e colocar as imagens para cada um, sendo que dentro da div #meio colocar definindo o padding do texto
Ricardo Politi
Julho 15th, 2009 em 7:09 am
David explica a logica das col_direita onde fica conteudo do mx masters com menu, estou tentando aqui e não consigo ja tentei de tudo obrigado pela video aula e que deus te ilumine mais.
David CHC
Julho 15th, 2009 em 9:14 am
@Luiz, na verdade tem q ter 4 elementos pq o efeito é para borda, se vc tiver apenas 3 como vc tá sugerindo, não terá o controle na hora de criar mais box’s
David CHC
Julho 15th, 2009 em 9:21 am
@Ricardo Politi, qual a duvida q vc tá tendo em relação a isso?
Ricardo Politi
Julho 15th, 2009 em 11:32 am
Na verdade minha dúvida é o seguinte:
Monto 2 div id ex

Quando vou adicionar listas no menu no sentido horizontal as divs entre topo e menu se separam me dando um espaço e eu quero colar e não consigo, é o que faz espaçar, agora na minha coluna fiz o topo o conteudo e quando adiciono a lista ul o mesmo efeito se separa.
Olha o exemplo site teste.
http://www.split.hpg.com.br/
David CHC
Julho 15th, 2009 em 11:40 am
@Ricardo Politi, todos os elementos tem um margin e padding por padrão, nesse caso é ul, por isso q vc não consegue “colocar as divs”

#menu ul{ margin:0; padding:0; }
Ricardo Politi
Julho 15th, 2009 em 11:56 am
Valeu David agradeço muito e que Deus continue te iluminando para as video aulas
http://www.split.hpg.com.br/
Daniel Ribeiro
Julho 27th, 2009 em 5:47 pm
nÃO TO CONSEGUINDO VER O VIDEO FAVOR ARRUMAR
David CHC
Julho 27th, 2009 em 6:17 pm
@Daniel Ribeiro, limpe o cache do seu navegador, e depois tente assistir a video aula
Romario
Julho 28th, 2009 em 5:06 pm
@Daniel Ribeiro
para assistir os videos é preciso ter um plugin “flash player” istalado em sua máquina, talvez seja isso. Instale o flash player e tente novamente. Também pode ser baixado clinado aqui -> http://www.adobe.com/go/getflash
RachaFloripa
Julho 30th, 2009 em 8:27 pm
po esse tutorial e muito bom resolveu muita coisa aqui nos website q faço….
Marcos
Julho 31st, 2009 em 2:11 pm
David

Valeu pelo video vai me ajudar muito
mais não to conseguindo é colocar um embaixo do
outro com espaço só fica colado um no outro
David CHC
Julho 31st, 2009 em 9:58 pm
@Marcos, como assim? tem como vc dá um print o q tá ocorrendo?
Ismael
Agosto 13th, 2009 em 11:46 am
Oi David, gostei da dica, fiquei super empolgado, mas esbarrei num problema que me parece meio grave (salvo se estou lendo informação atrasa nos sites). Como é que ALINHA VERTICALMENTE um texto numa DIV? Pelo que pude apurar nem mesmo o W3C conseguiu sanar esse bug.

Abraço!
David CHC
Agosto 13th, 2009 em 12:46 pm
@Ismael, dá uma olhada nesse artigo do Bruno Dulcetti q pode te ajudar: http://www.brunodulcetti.com/blog/2007/01/17/vertical-align-no-css-como-quando-e-por-que-usar.html
Anderson Alves de Souza
Agosto 16th, 2009 em 8:24 am
Show de bola hein, tava procurando isso mesmo.
Bruno tav
Agosto 16th, 2009 em 11:48 am
Felipe Cardoso se for pedir de mais pofavor avelei esse sites aki
http://www.tavdesign.com.br
Diego Gisbert
Agosto 18th, 2009 em 1:54 pm
Nossa, muito bom.
Fabricio
Agosto 19th, 2009 em 7:05 am
Muita Boa Campeãoo! abraços
Luis Armando
Setembro 2nd, 2009 em 5:45 pm
Sensacional a aula! estou tentando utilizar num layout, mas esta dando um problema com o Firefox que detona todo layout…são duas Div’s filha, uma topo e a outra o conteudo com esse box. No IE fica bom mas no Firefox some o topo do box, teria alguma dica? valeu! abraço
David CHC
Setembro 2nd, 2009 em 6:00 pm
@Luis Armando, especifique uma altura para essa div, caso o contrario não vai aparecer no firefox
Luis Armando
Setembro 3rd, 2009 em 6:46 pm
valeu a força! abraço
Matheus
Setembro 5th, 2009 em 8:24 pm
Cara Ja Aprendi muito com esse site Esse Site e 10!
PARABÉN’s PELO SITE Tomara Que Ele Creca Muito Muito Mais Vlw!
MSn: suporte@twister-downs.com !
Aprendizweb
Setembro 16th, 2009 em 8:04 am
Blz David..

Algumas dúvidas

Esta video-aula me ajudou a ter idéia de como criar um box, mas no final notei que o texto topo e rodapé não ficam próximos da linha.

01- Como fazer para que o texto fica próximo da lina ?

02 - Quero criar um box igual ao que tem na página inicial do MXmasters lá onde tem o nome Desenvolvimento e o link para esta video-aula.

Veja que o texto fica próximo da linha e é assim que quero fazer. E dentro do box tem linhas dividindo textos. No menu do Box tem Lá DESENVOLVIMENTO dai vem a linha e o conteúdo logo abaixo.. Show este Box.. gostaria de criar um assim.

Vc poderia ajudar a criar Box assim com uma nova video-aula ?
David CHC
Setembro 18th, 2009 em 12:38 pm
@Aprendizweb, vou tentar responder suas duvidas:

1 - lembre-se ali tem uma imagem, ele não vai fica colocado, vc pode diminuir o padding ou margin usados pra tentar diminuir, não ficará encontrado no topo por causa da imagem

2 - Sobre essa caixa, ela é apenas uma imagem unica, se estiver usando o firefox, clique nessa parte do topo do menu com o botão direito, e coloque em exibir imagem de fundo, vc vai ver q é uma imagem unica colocada em uma tag de titulo, veja o codigo fonte do site, vc vai perceber q é bem facil fazer.
David CHC
Setembro 18th, 2009 em 12:55 pm
Só uma aviso para que for Comentar.

No Mxmasters não está tendo atualização de video aulas, isso pq temos o Video Aulas Brasil onde as video aulas estão sendo publicadas, está tendo uma variedade enorme de temas no Video Aulas Brasil, q tenho certeza irá agradar a todos. Então, caso for perguntar alguma coisa sobre as video aulas, peço que façam no Video Aulas Brasil (http://www.videoaulasbrasil.com.br), pq o tempo de resposta será menor. Eu darei prioridade apenas os comentários do Video Aulas Brasil, pq vai fica mais fácil e rápido de responder.

Agradeço a Compreensão de Todos
David CHC - Administrador do Video Aulas Brasil
andre
Setembro 27th, 2009 em 12:19 am
no css da div produtos, o que significa center center???
David CHC
Outubro 3rd, 2009 em 10:59 am
@andre, esse center é o posicionamento. Pq o background é uma sintase de varios comandos:

background-color - define a cor
background-image - define a imagem
background-repeat - se tiver imagem, definir se vai repeti-la, e para q orientação
background-attachment - se será fixa na tela ou em scroll
background-position: a posição da imagem (é nessa q colocaria center center, q é na horizontal center, e vertical center)

Todas essas propriedades pode ser definida apenas com background, isso diminui a quantidade de linhas digitadas
evandro
Outubro 4th, 2009 em 8:36 pm
pocha as de vcs são otimas,mas vcs deveriam liberar pra downloard.
ok
evandro
Outubro 4th, 2009 em 8:37 pm
pocha as video aulas de vcs são otimas,mas vcs deveriam liberar pra downloard.
desculpe está escrevendo denovo foi que da outra vez eu escreve errado foi mal.
eduardo
Outubro 5th, 2009 em 12:50 am
Meu amigo, muito show a video aula! após ter assistido, tentei fazer fazer, só que no código css tentei fazer da minha meneira. dentro da div principal ficou a div_cima div_meio e div_baixo, quando acabei ficou um espaço entre cada div.
teria como me ajudar a tirar essa dúvida, desde já agradeço! eduardo.
David CHC
Outubro 5th, 2009 em 8:19 am
@evandro, um dos motivos por não liberar para download, é q estavam vendendo as vídeo aulas do mxmasters
David CHC
Outubro 5th, 2009 em 8:21 am
@eduardo, vc pode colocar um overflow:hidden, nas div_cima e div_baixo, e remover a margin e padding dos elementos
Daniel Lima de Souza
Outubro 13th, 2009 em 9:13 pm
Eu gostei muito da video aula, me ajudou muito. Agora eu tenho uma duvida, que é como colocar mais submenus nos menus. Ex: home - empresa - negócios. Me ajude por favor, to precisando urgente.
David CHC
Outubro 13th, 2009 em 9:36 pm
@Daniel , vc tem certeza q comentou na vídeo aula certa? Mas vou postar um link com exemplo q fiz, para vc ter uma idéia como pode ser feito.

http://pastebin.com/f411e2642
paulo
Outubro 22nd, 2009 em 11:05 am
isso aí é massa só que se fosse o felipe cardozo ensinando era bem melhor!
essa cara complica muito!
David CHC
Outubro 22nd, 2009 em 11:21 am
@paulo, não posso agradar a todos, mas as minhas video aulas só servirão se a pessoa tiver um conhecimento prévio, caso não tenha, não vai conseguir aproveitar mesmo.
saulo
Novembro 9th, 2009 em 1:27 pm
bom galera adorei o tuto, mais tenho dúvida, não consegui fazer funcionar isso no firefox ele fica fora, no ie fica certin

alguem teve esse problema?
se si conseguiu resolver? como?

abrax
David CHC
Novembro 9th, 2009 em 2:15 pm
@saulo, veja no Forum do Mxmasters o código que disponibilizei, ai você pode comprar , se tiver a mesma coisa, poste o css aqui pra eu dá uma olhada.