- Código: Selecionar tudo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.produtos{
width:200px;
background:url(images/bdr_centro.jpg) repeat-y center center;
}
.produtos span.bdr-topo, .produtos span.bdr-base{
display:block;
height:12px;
}
.produtos span.bdr-topo{
background:url(images/bdr_topo.jpg) no-repeat center top;
}
.produtos span.bdr-base{
background:url(images/bdr_base.jpg) no-repeat center bottom;
}
.produtos .cont-produtos p{
font:12px Verdana, Geneva, sans-serif;
color:#777;
padding:5px;
}
</style>
<body>
<div class="produtos">
<span class="bdr-topo"></span>
<div class="cont-produtos">
<p>Quisque eu quam sed nulla malesuada condimentum. Praesent vitae nisl et massa varius viverra. Aliquam tincidunt urna mollis dui mattis nec pulvinar odio convallis.
Quisque eu quam sed nulla malesuada condimentum. Praesent vitae nisl et massa varius viverra. Aliquam tincidunt urna mollis dui mattis nec pulvinar odio convallis.
</p>
</div>
<span class="bdr-base"></span>
</div>
</body>
</html>
[Script] Video aula Box com cantos arredondados
9 Mensagens • Página 1 de 1
[Script] Video aula Box com cantos arredondados
por davidchc » Sáb Mai 30, 2009 7:17 pm
O script da video aula Criando Bordas Arredondadas. Não postei as imagens, pq as imagens foram ensinadas a fazer na video aulas, é bem simples.
-
davidchc - Veterano
- Mensagens: 3135
- Data de registro: Qua Ago 06, 2008 2:11 pm
Re: [Script] Video aula Box com cantos arredondados
por ericowebdesigner » Ter Set 22, 2009 10:14 am
segui sua video aula e não consegui que o box aparecessem com este efeito , criei as imagens e não funciona
confira como ficou o código que usei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.produtos{
width:550px;
background:url(images/bdr_centro.gif) repeat-y center center;
}
.produtos span.bdr-topo, .produtos span.bdr-base{
display:block;
height:12px;
}
.produtos span.bdr-topo{
background:url(images/bdr_topo.gif) no-repeat center top;
}
.produtos span.bdr-base{
background:url(images/bdr_base.gif) no-repeat center bottom;
}
.produtos .cont-produtos p{
font:12px Verdana, Geneva, sans-serif;
color:#777;
padding:5px;
}
</style>
<body>
<div class="produtos">
<span class="bdr-topo"></span>
<div class="cont-produtos">
<p>Quisque eu quam sed nulla malesuada condimentum. Praesent vitae nisl et massa varius viverra. Aliquam tincidunt urna mollis dui mattis nec pulvinar odio convallis.
Quisque eu quam sed nulla malesuada condimentum. Praesent vitae nisl et massa varius viverra. Aliquam tincidunt urna mollis dui mattis nec pulvinar odio convallis.
</p>
</div>
<span class="bdr-base"></span>
</div>
</body>
</html>
há algo errado com o código ? ou pode ser alguma configuração no micro ?
confira como ficou o código que usei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.produtos{
width:550px;
background:url(images/bdr_centro.gif) repeat-y center center;
}
.produtos span.bdr-topo, .produtos span.bdr-base{
display:block;
height:12px;
}
.produtos span.bdr-topo{
background:url(images/bdr_topo.gif) no-repeat center top;
}
.produtos span.bdr-base{
background:url(images/bdr_base.gif) no-repeat center bottom;
}
.produtos .cont-produtos p{
font:12px Verdana, Geneva, sans-serif;
color:#777;
padding:5px;
}
</style>
<body>
<div class="produtos">
<span class="bdr-topo"></span>
<div class="cont-produtos">
<p>Quisque eu quam sed nulla malesuada condimentum. Praesent vitae nisl et massa varius viverra. Aliquam tincidunt urna mollis dui mattis nec pulvinar odio convallis.
Quisque eu quam sed nulla malesuada condimentum. Praesent vitae nisl et massa varius viverra. Aliquam tincidunt urna mollis dui mattis nec pulvinar odio convallis.
</p>
</div>
<span class="bdr-base"></span>
</div>
</body>
</html>
há algo errado com o código ? ou pode ser alguma configuração no micro ?
- ericowebdesigner
- Novo membro
- Mensagens: 3
- Data de registro: Dom Set 20, 2009 11:21 pm
Re: [Script] Video aula Box com cantos arredondados
por Roberto.gf » Ter Set 22, 2009 1:55 pm
Se você salvou um gif com transparência não vai dar certo, a menos que ao invéz de span você use div para fazer o topo e a base da caixa!
Espero ter ajudado
Espero ter ajudado
Frequentem o máximo que puderem o fórum, aí você aprende e aumenta o ego ensinando 
[Tutorial] - Vetorização Básica I
[Tutorial] - Vetorização Básica I
-
Roberto.gf - Membro avançado
- Mensagens: 263
- Data de registro: Sáb Ago 08, 2009 12:53 am
Re: [Script] Video aula Box com cantos arredondados
por ericowebdesigner » Ter Set 22, 2009 10:00 pm
obrigado pela dica consegui resolver
- ericowebdesigner
- Novo membro
- Mensagens: 3
- Data de registro: Dom Set 20, 2009 11:21 pm
Re: [Script] Video aula Box com cantos arredondados
por Roberto.gf » Ter Set 22, 2009 10:56 pm
De nada e se precisar é só falar!
Até a próxima!
Até a próxima!
Frequentem o máximo que puderem o fórum, aí você aprende e aumenta o ego ensinando
[Tutorial] - Vetorização Básica I
[Tutorial] - Vetorização Básica I
-
Roberto.gf - Membro avançado
- Mensagens: 263
- Data de registro: Sáb Ago 08, 2009 12:53 am
Re: [Script] Video aula Box com cantos arredondados
por ericowebdesigner » Sex Set 25, 2009 11:47 am
Estou precisando colocar dentro deste boxe
um menu e ao lado deste um catalogo de produtos
como faço para posicionar usando css
coloquei um float left porém o catalógo e o menu não ficaram
dentro do box
código html
div class="produtos">
<span class="bdr-topo"></span>
<div id="cont-produtos">
<div id="produto_especifico">
<p id=menu>BAIXE CATALOGO<br />
VEJA PREÇOS<br />
FUNCIONAIS<br />
ATENDIMENTO </p>
<div id="catalogo">
<ul>
<li>
<img src="imgs/produto1.jpg" />
<h1><a href="">Produto1</a> </h1>
<p>codigo 001</p>
</li>
<li>
<img src="imgs/produto2.jpg" />
<h1><a href="#">Produto2</a> </h1>
<p>codigo 002</p>
</li>
<li>
<img src="imgs/produto3.jpg" />
<h1><a href="#">Produto3</a> </h1>
<p>codigo 003</p>
</li>
<br />
<li>
<img src="imgs/produto4.jpg" />
<h1><a href="#">Produto4</a> </h1>
<p>codigo 004</p>
</li>
</ul>
</div>
</div>
</div>
<span class="bdr-base"></span>
</div>
código css
#menu{float:left;}
#catalogo {
weight:600px;
height:0 auto;
text-align:center;
margin:0 auto;
float:left;
}
#catalogo h1{font:16px arial;
font-weight:bold;
color:#0066998;
}
#catalogo p{font:10px arial;
font-weight:bold;
color:red;
}
#catalogo ul{
margin:0;
padding:30px;
overflow:auto;
}
#catalogo ul li{
list-style:none;
display:inline;
float:left;
background:#fff;
margin:0 10px 0 0;
text-align:center;
}
#catalogo ul li a {
text-decoration:none;
color:#999999;
}
#catalogo ul li a:hover{
text-decoration:underline;
color:#006699;
}
um menu e ao lado deste um catalogo de produtos
como faço para posicionar usando css
coloquei um float left porém o catalógo e o menu não ficaram
dentro do box
código html
div class="produtos">
<span class="bdr-topo"></span>
<div id="cont-produtos">
<div id="produto_especifico">
<p id=menu>BAIXE CATALOGO<br />
VEJA PREÇOS<br />
FUNCIONAIS<br />
ATENDIMENTO </p>
<div id="catalogo">
<ul>
<li>
<img src="imgs/produto1.jpg" />
<h1><a href="">Produto1</a> </h1>
<p>codigo 001</p>
</li>
<li>
<img src="imgs/produto2.jpg" />
<h1><a href="#">Produto2</a> </h1>
<p>codigo 002</p>
</li>
<li>
<img src="imgs/produto3.jpg" />
<h1><a href="#">Produto3</a> </h1>
<p>codigo 003</p>
</li>
<br />
<li>
<img src="imgs/produto4.jpg" />
<h1><a href="#">Produto4</a> </h1>
<p>codigo 004</p>
</li>
</ul>
</div>
</div>
</div>
<span class="bdr-base"></span>
</div>
código css
#menu{float:left;}
#catalogo {
weight:600px;
height:0 auto;
text-align:center;
margin:0 auto;
float:left;
}
#catalogo h1{font:16px arial;
font-weight:bold;
color:#0066998;
}
#catalogo p{font:10px arial;
font-weight:bold;
color:red;
}
#catalogo ul{
margin:0;
padding:30px;
overflow:auto;
}
#catalogo ul li{
list-style:none;
display:inline;
float:left;
background:#fff;
margin:0 10px 0 0;
text-align:center;
}
#catalogo ul li a {
text-decoration:none;
color:#999999;
}
#catalogo ul li a:hover{
text-decoration:underline;
color:#006699;
}
- ericowebdesigner
- Novo membro
- Mensagens: 3
- Data de registro: Dom Set 20, 2009 11:21 pm
Re: [Script] Video aula Box com cantos arredondados
por davidchc » Sáb Out 17, 2009 10:29 am
O menu ficará dentro do box arrendodando, e o catalogo vai ficar fora do box? Ou vai ficar tudo no box arrendondado e os produtos vão ficar lado a lado? Se for assim vc vai ter q usar float, e verificar se largura de cada item do catalogo não for maior q a dimensão do box, se for vc não vai conseguir colocar lado a lado
-
davidchc - Veterano
- Mensagens: 3135
- Data de registro: Qua Ago 06, 2008 2:11 pm
Re: [Script] Video aula Box com cantos arredondados
por William Pereira » Qua Mar 03, 2010 11:42 am
Olá David,
Velho usei sua dica da video aula para inserir uma imagem como borda para uma div usando a tag <span>. pois dessa forma, não teria a necessidade de inserir uma imagem inteira na largura da div e sim, apenas um "filete" como diz o Felipe Cardoso.
porém me deparei com o seguinte problema, pelo menos comigo, o arquivo ficou 100% certo nos navegadores, FF, Opera, Chrome... porém, no IE 6, 7 e 8 a borda não aparece.
Como faço para solucionar isso?
tentei aqui, e não estou conseguindo, caso não encontre uma solução vou ter que fazer de outro modo inserindo uma div com o background da imagem na largura da mesma.
Valew
Velho usei sua dica da video aula para inserir uma imagem como borda para uma div usando a tag <span>. pois dessa forma, não teria a necessidade de inserir uma imagem inteira na largura da div e sim, apenas um "filete" como diz o Felipe Cardoso.
porém me deparei com o seguinte problema, pelo menos comigo, o arquivo ficou 100% certo nos navegadores, FF, Opera, Chrome... porém, no IE 6, 7 e 8 a borda não aparece.
Como faço para solucionar isso?
tentei aqui, e não estou conseguindo, caso não encontre uma solução vou ter que fazer de outro modo inserindo uma div com o background da imagem na largura da mesma.
Valew
-
William Pereira - Novo membro
- Mensagens: 4
- Data de registro: Sáb Fev 06, 2010 6:50 pm
- Localização: São Paulo - SP
Re: [Script] Video aula Box com cantos arredondados
por davidchc » Qua Mar 03, 2010 12:52 pm
O script q utilizei na video aula funciona normalmente IE6, IE7, IE8. Compare os codigos q vc fez com os q eu disponibilizei na video aula q estão aqui no post, vai te ajudar.
-
davidchc - Veterano
- Mensagens: 3135
- Data de registro: Qua Ago 06, 2008 2:11 pm
9 Mensagens • Página 1 de 1
Retornar para Banco de Scripts(tableless)
Quem está online
Usuários vendo este fórum: Nenhum usuário registrado online e 1 visitante