Cintia_Ribeiro 0 Denunciar post Postado Outubro 25, 2013 Galera é o seguinte, quero que a borda do contant tenha a impressão q ela está contornando o meu. vai o cod <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Montaga' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/cycle.js"></script> <script type="text/javascript" src"js/slide.js"></script> <!--<script type="text/javascript" src="js/lightbox.min.js"></script>--> <!--<script src="script.js"></script>--> <script type="text/javascript"> $(function(){ $('.slide').cycle({ fx:"fade" }); }); </script> </head> <body> <div class="slide"> <img src="img/tempero1.jpg"> <img src="img/tempero2.jpg"> <img src="img/tempero3.jpg"> <img src="img/tempero4.jpg"> </div><!--fim slide--> <div id="logo"> <a href="index.html"><img src="img/logo-(1).jpg"></a> </div> <div id="menu"> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="contato.html">Contato</a></li> </ul> </div><!--fim menu--> <!-- <div style="clear: both;"></div> --> <div id="contant"> <div id="conteudo"> <h1>Sobre</h1><br> <img src="img/tempero1.jpg"> <p>blablablablablablablablablablablablablablablablablablablablablablalabla<br>bblablablablablablablablablablablablablablablablablablablablablablab</p> <p>blablablablablablablablablablablablablablablablablablablablablablalabla<br>bblablablablablablablablablablablablablablablablablablablablablablab</p> <div style="clear: both;"></div> </div><!--fim conteudo--> </div><!-- fim content--> <footer> <div id="rodape"> blablablablablablablablablablablablablablablabl </div> </footer> </body> </html> /*reset*/ *{margin: 0; padding: 0;} ul{list-style: none;} a{text-decoration: none;} p{ text-align: justify; } body{ background-color: #f7dbbe; color:#333; } .clear{ clear: both; } /*topo*/ .slide{ border-button: 1px solid red; width: 100%; height: 330px; background: #fff; position: absolute; opacity: .8; } .slide img{ width: 100%; height: 330px; } #logo{ position: relative; margin: 0 auto; width: 350px; z-index: 999; } /*#menu { display: table; }*/ #menu ul{ width: 328px; position: relative; display: table; margin-top:28px; left: 40%; margin: 0:; /*border-right: 1px solid red; border-left:1px solid red; border-top: 1px solid red; border-top-right-radius: 5px; border-top-left-radius: 5px; background: #FF0000;*/ } #menu ul li{ float: left; background: #FF0000; } #menu ul li a{ top:30px; display: block; padding: 15px 25px; font-size: 14px; display: block; color:#fff; font-size: 20px; } #menu ul li a:hover{ background: #b30000; } #menu ul li a.active{ background: #b30000; } /*content*/ #contant{ position:relative; width: 900px; height: 300px; border: 2px solid red; margin: 0 auto 60px auto; background: #fff; padding: 15px; border-radius: 4px; z-index: 1; } #conteudo img{ float: right; width: 470px; height: 250px; } #rodape{ position: relative; height: 40px; border: 1px solid red; background: red; text-align: center; color:#fff; } Compartilhar este post Link para o post Compartilhar em outros sites
andersonseifert 10 Denunciar post Postado Outubro 29, 2013 Boa tarde, ja tentou usar isso na div ? border-style:solid; border-color:#ff0000 #0000ff; Compartilhar este post Link para o post Compartilhar em outros sites
Dian Carlos 29 Denunciar post Postado Outubro 29, 2013 Acho que entendi o que você quis dizer. Bem, tente usar um box-shadow para isso. box-shadow: 0 0 0 10px #F00; Isso vai dar a impressão de que a borda é por fora da div. Compartilhar este post Link para o post Compartilhar em outros sites