Pesquisar na Comunidade

Boa tarde !! estou tentando colocar um banner nesse espaço branco que eu marquei mais não estou conseguindo pois tem que colocar pelo codigo css eu não estou conseguindo alguém pode me ajudar ? segue o codigo css logo abaixo da imagem Codigo é esse body { background:url(images/bg.gif) repeat-y center #FFFFFF; margin:auto; font-family: Arial, Verdana, Helvetica, sans-serif; font-size:11px; color:#333333; } h1{ font-size:15px; color:#6C0008; padding:5px; margin:3px; font-weight:normal; } h2{ font-size:13px; color:#666666; margin:0px; padding:3px; } h3{ font-size:14px; color:#666666; margin:0px; padding:3px; } h4{ font-size:12px; color: #CE6700; margin:0px; padding:3px; font-weight:normal; } .clear { clear:both; overflow:hidden; height:4px; } #main_content{ width:930px; height:auto; margin:auto; background-color:#FFFFFF; } #top_banner{ width:930px; height:150px; background:url(images/banner.jpg) no-repeat center; } #center_banner{ width:930px; height:200px; background:url(images/bannerinox.gif) no-repeat center; } #center_banner_content{ width:400px; height:auto; float:left; padding:55px 0 0 20px; } #learn_more{ width:400px; height:50px; clear:both; float:left; padding-top:10px; } #learn_more a{ padding:6px; margin:0 0 0 80px; text-decoration:none; color:#000000; font-size:12px; border:1px #CCCCCC solid; } #learn_more a:hover{ padding:6px; margin:0 0 0 80px; color: #666666; border:1px #999999 solid; } #page_content{ width:930px; height:auto; background-color:#FFFFFF; } /*------top menu---------*/ ul.menu { list-style-type:none; float:right; display:block; width:500px; height:18px; clear:both; margin-top:100px; padding:0;} ul.menu li { display:inline;} a.nav:link, a.nav:visited { display:block; float:left; padding:4px 11px 0 11px; margin:0;width: auto; height:18px; text-align:center; line-height:20px; font-weight:bold; font-size:12px; text-decoration:none; color:#562231;} a.nav:hover { display:block; float:left; padding:4px 11px 0 11px; margin:0;width: auto; height:18px; text-align:center; line-height:20px; text-decoration:none; color:#562231; border-bottom:1px #562231 dashed;} /*------left section-----*/ #left_section{ width:300px; float:left; padding:0 0 10px 30px; } .left_box_border{ width:250px; height:auto; border:1px #CCCCCC solid; padding:2px; margin-top:15px; } .left_box{ width:250px; height:auto; background:url(images/box.jpg) no-repeat top; padding-top:10px; } #login{ padding:10px; } .input{ width:140px; height:12px; font-size:10px; } .submit{ float:right; margin-right:30px; margin-top:5px; } img.pic{ float:left; padding:10px; } .title{ font-size:14px; font-weight:bold; color:#7B0E10; } .title a{ text-decoration:none; font-weight:bold; color:#7B0E10; } .content{ padding:5px; text-align:justify; } /*------right section-----*/ #right_section{ width:600px; height:auto; float:left; } .right_box{ margin:20px 10px 10px 0; } img.pic_border{ float:left; padding:2px; margin-right:15px; border:1px solid #CCCCCC; } .title_small{ font-size:12px; font-weight:bold; color: #000000; } #right_box_1{ width:250px; height:280px; float:left; margin:10px 1px 10px 10px; border-right:3px #B3B5B8 solid; } #right_box_2{ width:280px; height:280px; float:left; margin:10px 5px 10px 1px; padding-left:12px; border-left:1px #CCCCCC solid; } .news_box{ padding:10px 0 0 0; clear:both; } img.pic_news{ float:left; padding:0px 10px 10px 10px; } .news_submenu{ clear:both; float:left; padding-top:5px; margin-left:10px; border-bottom:1px #CCCCCC solid; } .news_link{ float:left; padding-right:30px; } .news_link a{ text-decoration:none; color:#999999; } .news_link a:hover{ text-decoration:none; color:#000; } /*---------services---------*/ ul.services { list-style-type:none; float:left; display:block; width:auto; height:20px; margin:0px; padding:10px 0 0 2px;} ul.services li { display:inline;} a.nav_services:link, a.nav_services:visited { display:block; padding:1px 0 0 14px; margin:2px;width: auto; height: auto; text-align:left; line-height:17px; text-decoration:none; background:url(images/bullet.png) no-repeat left; color:#000;} a.nav_services:hover { display:block; padding:1px 0 0 14px; margin:2px;width:auto; height:auto; text-align:left; line-height:17px; text-decoration:none; background:url(images/bullet_a.png) no-repeat left; color:#000000;} /*-------footer-----*/ #footer{ width:930px; height:70px; clear:both; background-color:#D7D8D2; } #copyrights{ width:350px; color: #666666; font-size:10px; float:left; padding:10px; } #madeby{ width:200px; height:60px; float:right; text-align:center; padding-top:10px; } #madeby a{ text-decoration:none; color:#666666; } /*---------footer menu---------*/ ul.footer_menu { list-style-type:none; float:left; display:block; width:auto; height: auto; margin:0px; padding:3px 0 0 10px;} ul.footer_menu li { display:inline;} a.nav2:link, a.nav2:visited { display:block; float:left; padding:4px 0 0 5px; margin:2px;width: auto; height:20px; text-align:center; line-height:16px; text-decoration:none; color: #999999;} a.nav2:hover { display:block; float:left; padding:4px 0 0 5px; margin:2px;width:auto; height:20px; text-align:center; line-height:16px; text-decoration:none;color:#000000;}#main_content #page_content #right_section .right_box .content h2 { color: #F00; }

pessoal me desculpem a ignorância não é bem minha área html e php mas entendo um pouco, como faço para inserir um banner no local em vermelho sem bagunça o template, simplesmente empurra o conteúdo para baixo e fica o banner em cima.

Olá pessoal, tudo bem? Estou com uma dúvida aqui, que está me travando a alguns dias, fiz pesquisas e mais pesquisas e ainda não consegui nada conclusivo... Estou programando um layout e vou usar algo simples, uma galeria de noticias em jcycle de uns 600px e que tenha 100% de width. Aí que é o meu problema...Quero saber se existe a possibilidade de eu definir o tamanho da miniatura para 100% do tamanho da tela e não 100% do tamanho da imagem em si, eu sei que é possivel fazer isso com os recursos do background-image e background-size, ja fiz e deu certo, e as imagens se ajustam corretamente nas resoluções. Mas como vou usar php para inserir as imagens, creio que não será viável, então minha busca é de usar uma forma sem ser o parâmetro background do css... Resumindo, quero que a miniatura preencha a tela toda com um height estabelecido, que diminua de acordo com o tamanho da janela do navegador. Não vou postar o código que eu tenho aqui pq acho, que não vai ajudar muito. (Obs. Não estou utilizando Bootstrap). Desde já agradeço a atenção de todos!

Boa tarde pessoal, Eu gostaria de fazer um banner que aparece na frente de várias páginas, mas não sei o nome para encontrar como faz. Se alguém souber o nome ou como é feito. O exemplo do banner é esse de cadastro que abre na hora que você abre esse site: https://englishlive.ef.com/pt-br/ Está em anexo a imagem para vocês verem. Desde já agradeço

Pessoal, eu não sei onde estou errando. Tou tentando adicionar uma imagem em meu site e ela não aparece de jeito nenhum. Eu não sei o que fazer, não consigo encontrar o error, podem me ajudar ? <div class="banner-top hidden-xs"> </div> .banner-top { width:100%; height:300px; background-image:url(../imagens/banner.jpg) } Eu coloco isso e não aparece de jeito nenhum.

Pessoal bom dia preciso criar banner animado em HTML 5 para UOL, assim que entra na home do UOL tem um banner gigante expansível, o designer me passou a sequência de movimentos em steps para criar esse tipo de banner, alguém já fez esse tipo de banner animado usando steps, não sei nem por onde começar, como eu faço.?

Não estou conseguindo colocar o banner no meu site,lá voce manda colocar as imagens em uma pasta e depois enviar,eu não sei como enviar as imagens e como faz para editar o html?

Prezados iMASTERS, Tentei inserir um banner flutuante em minhas páginas, através de um hiperlink. Obtive o código num fórum de que não consigo lembrar-me e o adaptei ao meu caso. No meu computador tudo funcionou perfeitamente, mas ao fazer o upload para o provedor não funcionou. Aguardo e agradeço qualquer ajuda. Usei o seguinte código: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery - Banner Flutuante</title> <script src="../../../../BannerFlutuante.js"></script> <script type="text/javascript"> $(function(){ var $conteudo = $('#conteudo').width(); // largura do div principal var $banner = $('#banner'); $banner.animate({ left: ($conteudo /4)}, 900).show(); // aplicando efeito de deslocamento // para ajustar o posicionamento do banner, basta aumentar o número da divisão // #conteudo tem 1000px dividido por 4 = 250 - então, left será 250 $(".fechar").click(function(event){ event.preventDefault(); // previne o evento clique $("#banner").hide(); // ocultando o banner }); }); </script> <style type="text/css"> body{ font-family:Arial, Helvetica, sans-serif } #conteudo{ margin:0 auto; width:1000px; height:800px; background-color:#DDD; } #banner{ position:absolute; top:50px; left:0; float:left; width:720px; /* largura */ height:150px; /* altura */ background-color:#0066CC; /* cor de fundo */ -webkit-border-radius: 8px; /* canto arredondado */ -moz-border-radius: 8px; /* canto arredondado */ border-radius: 8px; /* canto arredondado */ z-index:999999; /* posicionando sobre os demais */ display:none; color:#FFFFFF; } #banner a{ color:#FFFFFF;text-decoration:none } #banner p { padding: 5px 10px 0; } p.link{ text-align:center;clear:both } #fechar{ position:relative; float:right; width:60px; height:20px; background-color:#000000; color:#FFFFFF; text-align:center; } </style> </head> <body> <div id="conteudo"> <div id="banner"> <!-- <div id="fechar"><a href="#" title="Fechar" class="fechar">X</a></div>----> <p class="link"><a href="#">Gn 3, 16</a></p> <p>16. Disse também à mulher: Multiplicarei os sofrimentos de teu parto; darás à luz com dores, teus desejos te impelirão para o teu marido e tu estarás sob o seu domínio.”</br></br> <a href="amorislaetitia05umrastodesofrimentoesangue.php">Voltar</a> </p> </div> </div> </body> </html>

Gostaria que me ajudassem com meu código para a aula. Ao meu ver está tudo certo mas simplesmente não funciona <!doctype html> <html> <head> <meta charset="utf-8"> <title>Banner Rotativo</title> <script type="text/javascript"> //declaracao de variaveis var imagens = []; imagens[0] = "http://www.fundosanimais.com/Imagens/imagens-lobos.jpg"; imagens[1] = "http://www.fundosanimais.com/1920x1080/imagens-tigres.jpg"; imagens[2] = "http://www.siteevangelico.net/imagens/imagens-evangelicas-imagens-imagens-13.jpg"; var alternativo = ["texto 1","texto 2","texto 3"]; var titulo = ["parangaricotirimirruaro","titulo 2","algum title"]; var contador2 = 0; function Banner(){ document.images[0].src = imagens[contador2]; document.images[0].alt = alternativo[contador2]; document.images[0].title = titulo[contador2]; contador2++ if(contador2 == imagens.length){ contador2 = 0; } setTimeout("Banner()",4000) } </script> </head> <body onLoad="Banner()"> <div> Teste </div> <img/> </body> </html>

Como posso fazer este banner rotativo ,com controles, funcionar corretamente? Quando ativo um dos controles, ele buga. javascript <script type="text/javascript"> var tempo; function mouse(tipo) { document.getElementById('quadrado' + tipo).style.cursor = "pointer"; } function mouse2(tipo2) { document.getElementById('quadrado' + tipo2).style.cursor = "default"; } function slide1() { document.getElementById('banner').src = "../1.jpg"; tempo = setTimeout(slide2, 4000); document.getElementById('quadrado1').style.backgroundColor = "#3e4095"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide2() { document.getElementById('banner').src = "../2.jpg"; tempo = setTimeout(slide3, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#3e4095"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide3() { document.getElementById('banner').src = "../3.jpg"; tempo = setTimeout(slide1, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#3e4095"; } </script> CSS #quadrado1, #quadrado2, #quadrado3{ background-color: #ffffff; width: 30px; height: 30px; z-index: 9999; border-radius: 30px; top: 0px; } #bt{ position: absolute; top: 440px; height: 10px; width: 700px; z-index: 9999; left: 10px; } #quadrado1{ position: relative; left: 100px; top: 0px; } #quadrado2{ position: relative; left: 140px; top: -30px; } #quadrado3{ position: relative; left: 180px; top: -60px; } HTML <div id="bt"> <div id="quadrado1" onmouseout="mouse2(1)" onmouseover="mouse(1)" onclick="slide1()"></div> <div id="quadrado2" onmouseout="mouse2(2)" onmouseover="mouse(2)" onclick="slide2()"></div> <div id="quadrado3" onmouseout="mouse2(3)" onmouseover="mouse(3)" onclick="slide3()"></div> </div>

Como posso fazer este banner rotativo ,com controles, funcionar corretamente? Quando ativo um dos controles, ele buga. javascript <script type="text/javascript"> var tempo; function mouse(tipo) { document.getElementById('quadrado' + tipo).style.cursor = "pointer"; } function mouse2(tipo2) { document.getElementById('quadrado' + tipo2).style.cursor = "default"; } function slide1() { document.getElementById('banner').src = "../1.jpg"; tempo = setTimeout(slide2, 4000); document.getElementById('quadrado1').style.backgroundColor = "#3e4095"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide2() { document.getElementById('banner').src = "../2.jpg"; tempo = setTimeout(slide3, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#3e4095"; document.getElementById('quadrado3').style.backgroundColor = "#ffffff"; } function slide3() { document.getElementById('banner').src = "../3.jpg"; tempo = setTimeout(slide1, 4000); document.getElementById('quadrado1').style.backgroundColor = "#ffffff"; document.getElementById('quadrado2').style.backgroundColor = "#ffffff"; document.getElementById('quadrado3').style.backgroundColor = "#3e4095"; } </script> CSS #quadrado1, #quadrado2, #quadrado3{ background-color: #ffffff; width: 30px; height: 30px; z-index: 9999; border-radius: 30px; top: 0px; } #bt{ position: absolute; top: 440px; height: 10px; width: 700px; z-index: 9999; left: 10px; } #quadrado1{ position: relative; left: 100px; top: 0px; } #quadrado2{ position: relative; left: 140px; top: -30px; } #quadrado3{ position: relative; left: 180px; top: -60px; } HTML <div id="bt"> <div id="quadrado1" onmouseout="mouse2(1)" onmouseover="mouse(1)" onclick="slide1()"></div> <div id="quadrado2" onmouseout="mouse2(2)" onmouseover="mouse(2)" onclick="slide2()"></div> <div id="quadrado3" onmouseout="mouse2(3)" onmouseover="mouse(3)" onclick="slide3()"></div> </div>

Olá pessoal, Tenho um banner e quero disponibilizá-lo para que meus clientes ou visitantes adicionem em seus sites mas que sempre que um visitante clicar nele lá na página de meus clientes possa enviar pro meu banco de dados de onde veio esse clique. É o que acontece com aqueles sites de vendas que identifica o local de partiu o clique, para depois realizar o depósito da comissão após tantos cliques. Não sei que nome se dá a esse tipo de recurso, por isso não sei se me fiz entender. Mas, qualquer coisa tento ser mais claro. Grato, Ilano

Ola amigos. gostaria de pedir ajuda na configuração de um banner flutuante. Bom meu projeto é o seguinte: - O banner flutuante que feche ao passar o mouse em cima do X - Desenvolve o codigo, porem na hora de adicionar o mesmo no blogger ou wordpress ele acaba ficando atras dos textos. Alguém sabe informar o que poderia ser? Segue o código: <meta charset="UTF-8"> <script type="text/javascript"> function passar(valor){ document.getElementById("fechar").style.display = "none"; } </script> <style type="text/css"> #banner{ position:absolute; top:100px; left:500px; float:right; } #fechar p{ position:absolute; top:2px; left:-450px; float:right; } </style> <div id="conteudo"> <div id="banner"> <div id="fechar"><a href="#" title="Fechar" class="fechar" align="right" onMouseOver="passar();">X</a> <p class="link"><a href="#" ><img src="http://oi61.tinypic.com/2z730ae.jpg" ></a></p> </div> </div> </div> Já testei outros banner que fecha quando clica no X funciona perfeitamente, porem nesse caso eu preciso do banner que fecha ao passar o mouse em cima. Peço ajuda, pois acredito que essa postagem também seja útil para outras pessoas. Acho que falta alguma coisa para o banner ficar em cima do site e nao atras dos textos.