botões das midias não obedecem regra css

jnejunior · Janeiro 11, 2012

e ai pessoal...

tenho aqueles botões do Facebook, twitter e google+ no site que estou desenvolvendo, mas um deles acho que o do facebook, quando clico para curtir a janelinha que se abre fica por traz do video que carrega ao lado, e o mesmo botão não deixa um outro link que tenho próximo a ele ser clicado...

já usei o z-index mas não obtive sucesso...

alguem pode me ajudar?

esse é o CSS

<style type="text/css">
#unico-video-aula {margin: 0 auto; width: 980px;}
#midias-sociais {float: left; margin: 0 20px 0 0;}
#midias-sociais li {background: #f4f4f4; border: 1px solid #999; margin: 10px 0; padding: 5px 5px 5px 4px; text-align: center; width: 60px;}
#dados-va {border-bottom: 1px solid #f4f4f4; border-top: 1px solid #f4f4f4; color: #666; float: right; font: bold 12px Arial; margin: 10px 0; width: 870px; z-index: 10;}
#dados-va li {list-style: outside url(imagens/marcador-dados-va.gif); float: left; margin: 10px 20px;}
#dados-va li a {color: #666; float: right; font: bold 12px Arial;}
#dados-va li a:hover {text-decoration: none;}
#resumo-va {float: right; width: 870px;}
#resumo-va p {color: #666; font: 14px Arial; line-height: 1.5em;}
</style>

esse é o html

<div id="unico-video-aula">
<ul id="dados-va">
	<li>
		<?php
			if (empty($unicoDados->site)) {
				echo $unicoDados->autor;
			} else {
				echo '<a href="'.$unicoDados->site.'" title="'.$unicoDados->site.'">'.$unicoDados->autor.'</a>';
			}
		?>
	</li>
	<li><?php echo strftime('%a, %d de %b de %Y', strtotime($unicoDados->data_hora)); ?></li>
	<li>
		<?php
			if ($unicoDados->visitas == 0) {
				echo 'nunhuma visita!';
			} elseif ($unicoDados->visitas == 1) {
				echo '1 visita';
			} else {
				echo $unicoDados->visitas, ' visitas';
			}
		?>
	</li>
	<li>15 comentários</li>
</ul>
<!--<ul id="midias-sociais">
	<li style="margin: 0;">		
		<script type="text/javascript">(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id)) return;
			js = d.createElement(s); js.id = id;
			js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
			fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
		</script>
		<div style="margin-left: 3px;" class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
	</li>
	<li>
		<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.junioreberhardt.com.br" data-count="vertical" data-via="JRe DPTM" data-text="Aqui vem o texto a ser twitado" data-related="dataRelated" data-lang="en">Tweet</a>
		<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	</li>
	<li>
		<script type="text/javascript">
			window.___gcfg = {lang: 'pt-BR'};
			(function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
			})();
		</script>					
		<div class="g-plusone" data-size="tall">Junior</div>
	</li>
</ul>-->

<iframe style="float: right;" width="870" height="540" src="http://www.youtube.com/embed/<?php echo $unicoDados->embed; ?>?rel=0&hd=1" frameborder="0" allowfullscreen>
</iframe>
<div id="resumo-va">
	<h1><?php echo $unicoDados->titulo; ?></h1>
	<p><?php echo $unicoDados->descricao; ?></p>
</div><!-- /resumo-va -->
</div><!-- /unico-video-aula -->

William Bruno · Janeiro 11, 2012

valide seu html gerado no w3c, pela descrição do erro, parece ser problema com sintaxe das tags.

jnejunior · Janeiro 11, 2012

William, terminei de validar e arrumar umas coisas aqui, mas o problema do link por traz do botão do facebook e da janelinha do mesmo continua a mesma coisa, só não validou o menu que eu estou usando, mas logo estarei mudando para outro...

William Bruno · Janeiro 11, 2012

poste um link para o site.

ainda tenho quase certeza de que é problema na marcação html.

jnejunior · Janeiro 11, 2012

William meu site ta off ainda, estou trabalhando localmente...

porque você diz que é marcação?

você viu meu código, o que pode estar errado...

quando tiro os botões das midias sociais, o link volta a funcionar normalmente....

William Bruno · Janeiro 11, 2012

eu digo q é marcação por causa desse trecho da sua descrição:

o mesmo botão não deixa um outro link que tenho próximo a ele ser clicado...

poste então o HTML gerado aqui, e o css minimo necessário para rodarmos.

(muito mais fácil, se você puder hospedar e linkar)

jnejunior · Janeiro 11, 2012

xhtml


<!DOCTYPE html>

<html lang="pt-br">

<head>

	<meta charset="utf-8">

	<title>JRe</title>

	<!-- CSS -->

<link rel="stylesheet" type="text/css" href="scripts/estilos.css" />

<link rel="stylesheet" type="text/css" href="scripts/chromestyle.css" />



<!-- JAVASCRIPTS -->

<script src="scripts/chrome.js"></script>



<!-- PHP -->

	<style type="text/css">

	/*#midias iframe {float: left; height: 21px !important; width: 115px !important;}*/



	</style>

</head>

<body>

	<div id="topo">

		<div id="topo-centro">

			<div id="logo">

				<h1>JR.e design, programaÃ§Ã£o e tudo mais</h1>

			</div><!-- /logo -->

			<div id="midias">

				aqui virão as midias sociais

			</div><!-- /midias -->

			<div id="form-procura">

				<form method="post" action="a.php">

					<input type="text" name="procura_site" value="digite aqui o que deseja pesquisar!" />

					<button name="btn_proc_site">ok</button>

				</form>

			</div><!-- /form-procura -->

		</div><!-- /topo-centro -->

	</div><!-- /topo -->

	<div class="chromestyle" id="chromemenu">

		<ul>

			<li><a href="index.php?pg=paginas/inicio" title="página inicial">início</a></li>

			<li><a href="#" title="" rel="dropmenu1">vídeo aulas</a></li>

			<li><a href="#" title="" rel="dropmenu2">diversos</a></li>

			<li><a href="#" title="" rel="dropmenu3">especiais</a></li>

			<li><a href="index.php?pg=paginas/noticias" title="confira as notícias">notícias</a></li>

			<li><a href="index.php?pg=paginas/envie-seu-video" title="participe">envie seu vídeo</a></li>

			<li><a href="index.php?pg=paginas/contato" title="fale comigo">contato</a></li>

		</ul>

	</div><!-- /menu -->



	<!-- inicio do menu drop down -->

	<!-- 1Â° drop down menu -->                                                   

	<div id="dropmenu1" class="dropmenudiv">

		<ul>

			<li><a href="http://www.dynamicdrive.com/">CSS</a></li>

			<li><a href="http://www.cssdrive.com">PHP</a></li>

			<li><a href="http://www.javascriptkit.com">JavaScript</a></li>

			<li><a href="http://www.codingforums.com">JQUERY</a></li>

			<li><a href="http://www.javascriptkit.com/jsref/">Phothoshop</a></li>

		</ul>

	</div>



	<!--2Â° drop down menu -->                                                

	<div id="dropmenu2" class="dropmenudiv">

		<ul>

			<li><a href="http://www.cnn.com/">CNN</a></li>

			<li><a href="http://www.msnbc.com">MSNBC</a></li>

			<li><a href="http://news.bbc.co.uk">BBC News</a></li>

		</ul>

	</div>



	<!--3Â° drop down menu -->                                                   

	<div id="dropmenu3" class="dropmenudiv">

		<ul>

			<li><a href="http://www.google.com/">Google</a></li>

			<li><a href="http://www.yahoo.com">Yahoo</a></li>

			<li><a href="http://www.msn.com">MSN</a></li>

		</ul>

	</div>

	<script type="text/javascript">

		cssdropdown.startchrome("chromemenu")

	</script>

	<!-- /fim do menu drop down -->

<div id="unico-video-aula">

<ul id="dados-va">

	<li>

		<a href="http://www.junioreberhardt.com" title="http://www.junioreberhardt.com">Junior Eberhardt</a>		</li>

	<li>qui, 12 de jan de 2012</li>

	<li>

		34 visitas		</li>

	<li>15 comentários</li>

</ul>

<ul id="midias-sociais">

	<li style="margin: 0;">		

		<script type="text/javascript">(function(d, s, id) {

			var js, fjs = d.getElementsByTagName(s)[0];

			if (d.getElementById(id)) return;

			js = d.createElement(s); js.id = id;

			js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";

			fjs.parentNode.insertBefore(js, fjs);

			}(document, 'script', 'facebook-jssdk'));

		</script>

		<div style="margin-left: 3px;" class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>

	</li>

	<li>

		<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.junioreberhardt.com.br" data-count="vertical" data-via="JRe DPTM" data-text="Aqui vem o texto a ser twitado" data-related="dataRelated" data-lang="en">Tweet</a>

		<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

	</li>

	<li>

		<script type="text/javascript">

			window.___gcfg = {lang: 'pt-BR'};

			(function() {

			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

			po.src = 'https://apis.google.com/js/plusone.js';

			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

			})();

		</script>					

		<div class="g-plusone" data-size="tall">Junior</div>

	</li>

</ul>



<iframe style="float: right;" width="870" height="540" src="http://www.youtube.com/embed/GchctYX9i2o?rel=0&hd=1">

</iframe>

<div id="resumo-va">

	<h1>Caixa de emails parte5 final</h1>

	<p>O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...O YouTube NextUp está chegando no Brasil e o Denis Lee explica quais são as regras do programa. Não se esqueça de ler todo o regulamento antes de enviar seu ...</p>

</div><!-- /resumo-va -->

</div><!-- /unico-video-aula -->

       <footer id="rodape">

               <div id="rodape-centro">

                   <div class="bloco-rodape" id="ult-va">

                       <h6>últimas vídeo aulas</h6>

                       <ul>                                            

                               <li>

       <a title="meu novissimo post eh este agora galera 01" href="">meu novissimo post eh este agora galera...</a>

   </li>

   <li>

       <a title="meu novo post" href="">meu novo post</a>

   </li>

   <li>

       <a title="esta eh a video aula mais recente, adicionada por mim" href="">esta eh a video aula mais recente,...</a>

   </li>

   <li>

       <a title="Neste Natal, v�rios sites, tem renovado seus layouts ou feito alguma pequena mud" href="">Neste Natal, v�rios sites, tem renovado...</a>

   </li>

   <li>

       <a title="6" href="">6</a>

   </li>

   <li>

       <a title="5" href="">5</a>

   </li>

   <li>

       <a title="mais visitado mais visitado mais visitado mais visitado mais visitado mais visit" href="">mais visitado mais visitado mais...</a>

   </li>

   <li>

       <a title="Denis Lee apresenta: regras do YouTube NextUp" href="">Denis Lee apresenta: regras do YouTube...</a>

   </li>

   <li>

       <a title="4" href="">4</a>

   </li>

   <li>

       <a title="3" href="">3</a>

   </li>

                       </ul>

                   </div><!-- /ult-va -->

                   <div class="bloco-rodape" id="mais-vistos">

                       <h6>mais vistos</h6>

                       <ul>

                               <li>

       <a title="mais visitado mais visitado mais visitado mais visitado mais visitado mais visit" href="">mais visitado mais visitado mais...</a>

   </li>

   <li>

       <a title="1" href="">1</a>

   </li>

   <li>

       <a title="2" href="">2</a>

   </li>

   <li>

       <a title="3" href="">3</a>

   </li>

   <li>

       <a title="4" href="">4</a>

   </li>

   <li>

       <a title="5" href="">5</a>

   </li>

   <li>

       <a title="Neste Natal, v�rios sites, tem renovado seus layouts ou feito alguma pequena mud" href="">Neste Natal, v�rios sites, tem renovado...</a>

   </li>

   <li>

       <a title="esta eh a video aula mais recente, adicionada por mim" href="">esta eh a video aula mais recente,...</a>

   </li>

   <li>

       <a title="meu novo post" href="">meu novo post</a>

   </li>

   <li>

       <a title="meu novissimo post eh este agora galera 01" href="">meu novissimo post eh este agora galera...</a>

   </li>

                       </ul>

                   </div><!-- /mais-vistos -->

                   <div class="bloco-rodape" id="mais-comentados" style="margin: 0;">

                       <h6>mais comentatos</h6>

                       <ol>

                                                   </ol>

                   </div><!-- /mais-comentados -->

               </div><!-- /rodape-centro -->

           <div id="copy">

               <p>© 2012 JRe</p>

               <p>Todos os direitos reservados.</p>

               <p>É proibida a reprodução de vídeo aulas sem a prévia autorização de JRe.</p>

           </div><!-- /copy -->

</footer><!-- /rodape -->

   </body>

</html>

meu css

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
border: 0;
font-family: inherit;
font-style: inherit;
font-size: 100%;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

:focus {outline: 0;}
body {background: #fff; color: #000; line-height: 1;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {font-weight: normal; text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

#geral, #rodape {margin: 0 auto; width: 980px;}

#topo {background: url('../imagens/bg-topo.png') repeat-x; float: left; height: 200px; width: 100%;}

#topo-centro {margin: 0 auto; width: 980px;}

#logo {float: left; height: 280px; width: 300px;}
#logo h1 {background: url('../imagens/logoJR.png') no-repeat; border: none; height: 200px; margin: 2px 0 0 -10px;
text-indent: -9999px;}

#midias {float: right; margin: 48px 0 35px 0; width: 456px;}

#form-procura {float: right; width: 456px;}
#form-procura  input {border: none; color: #666; font: 16px Arial; padding: 10px 5px; width: 400px; border-radius: 8px;}
#form-procura button {background: #fc0; border: none; cursor: pointer; height: 42px; width: 42px; border-radius: 8px;}

h1 {border-bottom: 1px solid #218eaf; color: #218eaf; font: bold 20px Arial; margin: 15px 0;
letter-spacing: 0.1em; text-transform: uppercase;
text-shadow: 0 0 1px #218eaf;}
h2, h2 a {color: #666; font: 18px Arial; margin: 5px 0; text-decoration: none;}
h2 a {font-size: 16px; text-transform: lowercase;}
h2 a:hover {text-decoration: underline;}
h3 a {color: #333; float: left; font: bold 14px Arial; margin: 10px 0; text-decoration: none; width: 300px;}
h3 a:hover {color: #218eaf; text-decoration: underline;}
h6 {border-bottom: 1px solid #e89d28; color: #e89d28; font: 16px Arial; margin: 15px 0;}
p {font: 12px Arial;}

#video-aulas, #ult-noticias {float: left; width: 980px;}
#va-destaque {float: left; margin: 0 35px 0 0; width: 300px;}
#video-aulas ul {float: left; width: 645px;}
#video-aulas li {float: left; height: 120px; margin-right: 35px; width: 305px;}
#video-aulas li a, #ult-noticias p a {color: #333; float: right; font: 14px Arial; text-decoration: none; width: 150px;}
#video-aulas li a:hover, #ult-noticias p a:hover {color: #666;}

#ult-noticias li {float: left; margin-right: 17px; width: 232px;}
#ult-noticias .borda-img {border: 1px solid #ccc; height: 130px;  width: 232px; -moz-border-radius:7px;
-webkit-border-radius:7px; border-radius:7px;}
#ult-noticias img {margin: 5px 0 0 6px;}
#ult-noticias p a {float: left; margin: 10px 0; width: 222px;}

#rodape {background: #222; clear: both; float: left; font: 14px Arial; margin-top: 50px; width: 100%;}
#rodape-centro {margin: 20px auto; width: 980px;}
#rodape .bloco-rodape {float: left; margin-right: 40px; width: 300px;}

#ult-va li, #mais-vistos li, #mais-comentados li {color: #888; list-style-type: square; margin: 0 0 0 20px;}
#ult-va a, #mais-vistos a, #mais-comentados a {border-bottom: 1px dotted #888; color: #888; font: 14px Arial;
line-height: 2em; text-decoration: none;}
#ult-va a:hover, #mais-vistos a:hover, #mais-comentados a:hover {border-bottom: 1px dotted #999; color: #999;}

#mais-vistos li, #mais-comentados li {list-style-type: decimal;}

#copy {border-top: 1px solid #888; color: #888; float: left; margin: 30px auto; padding: 15px 0;
text-align: center; width: 100%;
box-shadow:0 0 11px #000;}

.autor {color: #fc0; font: 12px Arial;}

/* paginas */
#unico-video-aula {margin: 0 auto; width: 980px;}
#midias-sociais {float: left; margin: 12px 20px 0 0; width: 75px;}
#midias-sociais li {background: #f4f4f4; border: 1px solid #999; margin: 10px 0; padding: 5px 5px 5px 4px;
text-align: center; width: 60px;}
#dados-va {border-bottom: 1px solid #f4f4f4; border-top: 1px solid #f4f4f4; color: #666; float: right;
font: bold 12px Arial; margin: 10px 0; width: 870px; z-index: 10;}
#dados-va li {list-style: outside url(../imagens/marcador-dados-va.gif); float: left; margin: 10px 20px;}
#dados-va li a {color: #666; float: right; font: bold 12px Arial;}
#dados-va li a:hover {text-decoration: none;}
#resumo-va {float: right; width: 870px;}
#resumo-va p {color: #666; font: 14px Arial; line-height: 1.5em;}

Entrar

Arquivado

botões das midias não obedecem regra css

Recommended Posts

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não atualizar a div dentro de um setInterval

Setar cookie para subdominio

Evitar que o input file seja limpado ao cancelar a seleção

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante