Publicidade

Clauido José

Members
  • Total de itens

    680
  • Registro em

  • Última visita

Reputação

3 Comum

2 Seguidores

Sobre Clauido José

Informações Pessoais

  • Sexo
    Masculino
  • Interesses
    Programação desenvolvimento e trabalho freelance
  1. Bom dia galera, Estou personalizando um navbar e tem dois dropdown que quero que seja de tamanhos diferentes e o posicionamento tambêm, já consegui fazer ele sumir via css mais não consigo fazer ele aparecer olha como esta meu código: <!-- Navegação --> <!--Inicio Nav--> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-home" style="padding: 0px 5px"></span>Home</a></li> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-info-sign" style="padding: 0px 5px"></span>A Empresa</a></li> <li id="persianas"> <a href="#"> <span class="glyphicon glyphicon glyphicon-th" style="padding: 0px 5px"></span> Persianas <span class="caret"></span></a> <ul> <asp:DataList ID="itemPersianas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li> <a href="#"><span class="glyphicon glyphicon-th-large" style="padding: 0px 5px"></span> Cortinas <span class="caret"></span></a> <ul id="cortinas"> <asp:DataList ID="itemCortinas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-globe" style="padding: 0px 5px"></span>Parceiros</a></li> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-envelope" style="padding: 0px 5px"></span>Contato</a></li> </ul> <form class="navbar-form navbar-right" runat="server" role="search" action="#" method="get" id="BuscaForm"> <div class="input-group" id="pesquisa"> <asp:TextBox ID="BuscaTextBox" runat="server" class="form-control" placeholder="Pesquisar produtos" name="BuscaTextBox" style="padding:6px 6px;"></asp:TextBox> <div class="input-group-btn"> <button class="btn btn-default" id="PesquisaButton" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </nav> <!-- Fim Navegação --> /* navbar /* barra de menu principal */ .navbar-default { background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #CCC 80%,#fefefd 100%); /* W3C */ border-color: #E7E7E7; height:55px; font-size:18px } .navbar-default a{ color: #fff; padding:10px; display:block; text-decoration:none; text-align:center; background-color: #ccc; height:45px; } .navbar-default a:hover{ background-color:#FFF; color:#000 } .navbar-default ul{ list-style-type:none; position:relative; } .navbar-default ul li{ width:150px; float:left; } /*primeiro dropdown*/ .navbar-default #persiana:hover ul { visibility:visible; } .navbar-default #persianas li{ width:250px; font-size:16px; margin:-10px -50px; border-radius: 10px; box-shadow: 5px 5px black; visibility:hidden; } .navbar-default #persiana a:hover ul { visibility:visible; } /*segundo dropdown*/ .navbar-default #cortinas{ position:absolute; visibility:hidden } /*Fim navbar*/
  2. Puts cara valeu mano matei dois coelhos numa cajadada só rs
  3. Boa noite galera, Estou precisando de uma ajuda quero um exemplo de form de busca que ele apareça somente quando clicar na lupa e que fique no tamanho que sobra no navbar olha meu html. <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul id="menu-main-menu" class="nav navbar-nav"> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-home" style="padding: 0px 5px"></span>Home</a></li> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-info-sign" style="padding: 0px 5px"></span>A Empresa</a></li> <li class="nav-itemd dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"> <span class="glyphicon glyphicon glyphicon-th" style="padding: 0px 5px"></span> Persianas <span class="caret"></span></a> <ul class="dropdown-menu" id="persinas"> <asp:DataList ID="itemPersianas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li class="nav-item dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-th-large" style="padding: 0px 5px"></span> Cortinas <span class="caret"></span></a> <ul class="dropdown-menu" id="cortinas"> <asp:DataList ID="itemCortinas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-globe" style="padding: 0px 5px"></span>Parceiros</a></li> <li class="nav-item"><a href="#"><span class="glyphicon glyphicon-envelope" style="padding: 0px 5px"></span>Contato</a></li> </ul> <form class="navbar-form navbar-right" runat="server" role="search" action="#" method="get" id="BuscaForm"> <div class="input-group"> <asp:TextBox ID="BuscaTextBox" runat="server" class="form-control" placeholder="Pesquisar produtos" name="BuscaTextBox" style="padding:6px 6px;"></asp:TextBox> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </nav>
  4. resolvi o problema era a estrutura do meu css estou ralando nos estudo no front end rs
  5. Bom dia galera estou com um problema no meu .navbar-collapse quando o clico para aparecer ele esta ficando abaixo no banner principal e não pega a pagina toda não consigo acertar ele olha meu código: <!--Inicio Nav--> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="col-sm-12"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-home" style="padding: 0px 10px"></span>Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-info-sign" style="padding: 0px 10px"></span>A Empresa</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"> <span class="glyphicon glyphicon glyphicon-th" style="padding: 0px 10px"></span> Persianas <span class="caret"></span></a> <ul class="dropdown-menu" id="persinas"> <asp:DataList ID="itemPersianas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-th-large" style="padding: 0px 10px"></span> Cortinas <span class="caret"></span></a> <ul class="dropdown-menu" id="cortinas"> <asp:DataList ID="itemCortinas" RepeatColumns="1" runat="server"> <itemtemplate> <li><span style="padding-left:15px;"></span><a href="produtos.aspx?ProdutosId=<%# Eval("MenuId")%>"> <%# Eval("Titulo") %> </a></li> </itemtemplate> </asp:DataList> </ul> </li> <li><a href="#"><span class="glyphicon glyphicon-globe" style="padding: 0px 10px"></span>Parceiros</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope" style="padding: 0px 10px"></span>Contato</a></li> </ul> <form class="navbar-form navbar-right" runat="server" role="search" action="#" method="get" id="BuscaForm"> <div class="input-group"> <asp:TextBox ID="BuscaTextBox" runat="server" class="form-control" placeholder="Pesquisar produtos" name="BuscaTextBox" style="padding:6px 6px;"></asp:TextBox> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </div> </nav> <!--Fim nav--> meu css: /* navbar /* barra de menu principal */ .navbar a{ color: #fff; } .navbar a:hover{ color: #333; } .navbar-default{ background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */ border-radius:0px; height:30px } .navbar-default .navbar-nav > li > a{ color:#fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color:#333; color:#fff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ background-color:#333; color:#fff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ background-color:#333; color:#fff; } #cortinas{ width: 70px; margin-left:-10px; border-radius: 10px; box-shadow: 5px 5px black; } #cortinas li { width: 100%; padding-bottom:05px; } #persinas{ width: 230px; margin-left:-30px; border-radius: 10px; box-shadow: 5px 5px black; } #persinas li{ padding-bottom:10px; } .navbar-nav > li > .dropdown-menu{ background: -webkit-linear-gradient(top, #CCC 95%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ color:#000; font-size: 12px; } /* mobile version */ .navbar .navbar-collapse { background: -webkit-linear-gradient(top, #CCC 95%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ } .navbar.navbar-default .nav-collapse { background: -webkit-linear-gradient(top, #CCC 95%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ } .btn.btn-circle { border-radius: 50px; } .btn.btn-outline { background-color: transparent; }
  6. nossa cara valeu bem legal o ultimo da para pegar uma noção sobre layout reponsive
  7. Boa noite glaera, Preciso de uma ajuda com layout desse site no topo eu tenho o logo e o com telefone eu quero que ele seja responsive e que quando for diminuindo a resolução da tela o telefone fique em cima do logo olha meu código: <header> <div class="container-fluid"> <div class="row"> <div id="logo" class="col-md-9"> <a href="default.aspx"><img src="images/logo.png" /></a> </div> <div class="col-md-3" id="telsHead" style="padding:0px 10px"> <strong><span class="glyphicon glyphicon glyphicon-phone-alt"></span>:</strong>(011) 39316081 / 39318241 </div> </div> </div> </header> meu css: #logo{ padding: 10px 50px; height:100px; width:200px; float:left } #telsHead{ background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #CCC 80%,#fefefd 100%); /* W3C */ border-radius:0 0 5px 5px; box-shadow:0 1px 1px #000; height: 30px; padding: 0 5px; list-style:none; font-size:150%; font-weight:bold; text-align: center; width: 400px; float:right; left: -100px }
  8. Resolvi essa o problema era na classe na tabela eu tinha um campo usuário que o entiti mudou o nome porque a tabela chama Usuario ai ele não encontrava a atributo.
  9. Boa noite galera estou caindo nos estudos aqui e estou fazendo uma aplicação simples em mvc no visual studio 2013 bom fiz tudo como mando no tutorial do marcoratti mas quando vou criar a view e escolho > Create > Selecione Model class > Data Context Class aparece a seguinte mensagem: E não gera o view
  10. Até conheço sou programador asp classico e nunca tive problema igual esse .
  11. também estou achando sou novo com bootstrap preciso estudar mais por isso peguei esse site que esta feito em asp classico e passando ele para web form asp.net c#
  12. Então faço isso mais por exemplo quando se eu coloco class em vez de id aparece a lista das classe que eu tenho no arquivo css já no id isso não acontece isso normal?
  13. Desculpa vou mostrar na pratica o que estou fazendo Meu arquivo .css /* CONTEUDO */ section { padding:10px 10px; display:block; } #artigo { padding: 15px 10px; border-top: 1px solid #ddd; } #artigo p{ padding: 0 0 0px 0; font-size: 16px } #parceiros{ padding: 15px 10px; border-top: 1px solid #ddd; } #parceiros > img{ width:100%; height:200px } footer a, footer a:hover { color: #000; text-decoration: underline; } footer { width: 100%; font: normal 100% arial, sans-serif; height: 60px; padding: 10px 0 5px 0; text-align: center; color: #000; background: -moz-linear-gradient(top, #CCC 80%, #fefefd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #CCC 80%,#fefefd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #CCC 80%,#fefefd 100%); /* IE10+ */ background: linear-gradient(to bottom, #CCC 80%,#fefefd 100%); /* W3C */ } footer a:hover { color: #000; text-decoration: none; } .copyright { padding: 5px 0; background-color: #666; color: #fff; } .copyright p { margin: 0; } Por exemplo no arquivo estilos.css coloquei um atributo #artigo correto quando vou vou chamar esse atributo na div ele não aparece no id muito estranho.
  14. Galera bom dia Estou com um problema minha no meu site que estou fazendo no vs2013 bom é assim criei algum div com propriedades do css mas quando cloco na por exemplo <div id=""> não aparece o nome da propriedade que eu criei no arquivo css só aparece class será que é porque estou usando bootstrap?
  15. Boa noite galera estou com problema num slider show que estou fazendo com plugin ideal-image-slider.js bom consegui adaptar legal na minha pagina aspx mas quando roda o efeito javascript ele esta aumentando o height a imagem consegui deixar em 350px agora não no efeito esta aumentando findo o fundo branco maior que imagem olha css: /* * Ideal Image Slider v1.5.1 * * By Gilbert Pellegrom * http://gilbert.pellegrom.me * * Copyright (C) 2014 Dev7studios * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE */ .ideal-image-slider { position: relative; overflow: hidden; height:400px } .iis-slide { display: block; bottom: 0; text-decoration: none; position: absolute; top: 0; left: 0; width: 100%; height: 400px; background-repeat: no-repeat; background-position: 30% 30%; background-size: cover; text-indent: -9999px; } /* Slide effect */ .iis-effect-slide .iis-slide { opacity: 0; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .iis-effect-slide .iis-current-slide { opacity: 1; z-index: 1; } .iis-effect-slide .iis-previous-slide { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .iis-effect-slide .iis-next-slide { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .iis-effect-slide.iis-direction-next .iis-previous-slide, .iis-effect-slide.iis-direction-previous .iis-next-slide { opacity: 1; } /* Touch styles */ .iis-touch-enabled .iis-slide { z-index: 1; } .iis-touch-enabled .iis-current-slide { z-index: 2; } .iis-touch-enabled.iis-is-touching .iis-previous-slide, .iis-touch-enabled.iis-is-touching .iis-next-slide { opacity: 1; } /* Fade effect */ .iis-effect-fade .iis-slide { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } .iis-effect-fade .iis-current-slide { opacity: 1; z-index: 1; } /* * Ideal Image Slider Default Theme * Version: 1.2.0 */ .ideal-image-slider { background-color: #fff; background-image: url("data:image/gif;base64,R0lGODlhIAAgAPMAAP///wAAAMbGxoSEhLa2tpqamjY2NlZWVtjY2OTk5Ly8vB4eHgQEBAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQACgABACwAAAAAIAAgAAAE6hDISWlZ---p1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQACgACACwAAAAAIAAgAAAE7hDISSkx---5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkEAAoAAwAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkEAAoABAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAAKAAUALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAAKAAYALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQACgAHACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAAKAAgALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAAKAAkALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQACgAKACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkEAAoACwAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA=="); background-repeat: no-repeat; background-position: 20% 20%; background-size: 32px 32px; } /* Navigation */ .iis-previous-nav, .iis-next-nav { position: absolute; top: 50%; z-index: 20; display: block; width: 60px; height: 60px; text-indent: -9999px; background-repeat: no-repeat; background-color: rgba(0,0,0,0.5); border-radius: 50px; background-size: 48px 48px; cursor: pointer; opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .iis-previous-nav { left: 5%; background-position: 35% 50%; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBvbHlnb24gZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBwb2ludHM9IjM1MiwxMTUuNCAzMzEuMyw5NiAxNjAsMjU2IDMzMS4zLDQxNiAzNTIsMzk2LjcgMjAxLjUsMjU2ICIvPgogPC9nPgo8L3N2Zz4="); } .iis-next-nav { right: 5%; background-position: 65% 50%; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBvbHlnb24gZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBwb2ludHM9IjE2MCwxMTUuNCAxODAuNyw5NiAzNTIsMjU2IDE4MC43LDQxNiAxNjAsMzk2LjcgMzEwLjUsMjU2ICIvPgogPC9nPgo8L3N2Zz4="); } .ideal-image-slider:hover .iis-previous-nav, .ideal-image-slider:hover .iis-next-nav { opacity: 0.5; } .ideal-image-slider:hover .iis-previous-nav:hover, .ideal-image-slider:hover .iis-next-nav:hover { opacity: 1.0; } /* Bullet Navigation */ .iis-bullet-nav { position: absolute; bottom: 5%; right: 5%; z-index: 15; width: 90%; text-align: right; opacity: 0.4; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .iis-has-captions .iis-bullet-nav { max-width: 42%; } .iis-bullet-nav a { display: inline-block; width: 10px; height: 10px; background: transparent; text-indent: 9999px; margin: 0 5px; border: 3px solid rgba(0,0,0,0.5); border-radius: 10px; cursor: pointer; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .iis-bullet-nav a.iis-bullet-active, .iis-bullet-nav a:hover { background: #fff; } .ideal-image-slider:hover .iis-bullet-nav { opacity: 0.7; } .ideal-image-slider:hover .iis-bullet-nav:hover { opacity: 1.0; } /* Captions */ .iis-has-captions .iis-slide { text-indent: 0; } .iis-caption { position: absolute; left: 5%; bottom: 5%; max-width: 50%; z-index: 10; background: #000; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 10px; font: 14px/1.6em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .iis-has-bullet-nav .iis-caption { max-width: 42%; } .iis-caption .iis-caption-title { font-weight: bold; } .iis-caption .iis-caption-content { font-size: 13px; color: #eee; } .iis-caption .iis-caption-content a, .iis-caption .iis-caption-content a:visited { color: #eee; text-decoration: underline; border: 0; } .iis-caption .iis-caption-content a:hover, .iis-caption .iis-caption-content a:active { color: #fff; } a pagina aspx: <div class="col-xs-12 col-sm-9"> <div id="css-script-menu"> <div id="slider"> <asp:Repeater ID="bannerRepeater" runat="server"> <itemtemplate> <a href="#" target="_blank"><img src='<%=Eval("foto") %>'></a> </itemtemplate> </asp:Repeater> </div> </div> <div class="panel panel-default" style="margin:10px"> <div class="panel-heading"> Something </div> <div class="panel-body"> This layout uses tabs to demonstrate what you could do with it. It probably makes more sense to use individual pages/templates in a production app. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> </div>