¿Cómo evitar que el contenido de mi web se desordene al hacer zoom y colocar AdSense?

Rafark · 13 Abr 2012

Otra vez soy yo solicitando ayuda, pido disculpas por ello.

El problema en que me encuentro, es que al momento de colocar adsense en mi web, no logro hacer que el anuncio se mantenga fijo en la pocision que le indico, sino que cada vez que hago un alejamiento ( zoom -) se desordena y se tira a la izquierda de mi web.
Ejemplo:

Aqui se encuentra en la posición estandar.

Cuando hago un alejamiento (Zoom out [-]), el cuadro de publicidad se desplaza la izquierda.

Aqui el codigo Header.php:

PHP:

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php 
wp_enqueue_script('jquery');
wp_enqueue_script('cufon', get_stylesheet_directory_uri() . '/js/cufon.js');
wp_enqueue_script('Myriad', get_stylesheet_directory_uri() . '/js/Myriad_Pro_700.font.js');
wp_enqueue_script('Effects', get_stylesheet_directory_uri() .'/js/effects.js');
wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
?>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
	if (!document.getElementsByTagName) return false;
	var sfEls1 = document.getElementById("catmenu").getElementsByTagName("li");
	for (var i=0; i<sfEls1.length; i++) {
		sfEls1[i].onmouseover=function() {
			this.className+=" sfhover1";
		}
		sfEls1[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
		}
	}
		var sfEls1 = document.getElementById("menu").getElementsByTagName("li");
	for (var i=0; i<sfEls1.length; i++) {
		sfEls1[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls1[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php 
if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
wp_head(); ?>

</head>
<body>

<div id="masthead"> 
<div id="top"> 

<div class="blogname">
	<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"><?php bloginfo('name');?></a></h1>
	<h2><?php bloginfo('description'); ?></h2>
</div>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<div id="adcuadrado" style=" position: absolute; top: 20px; left: 500px"> 
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9372921497145645";
/* ftuj */
google_ad_slot = "2948459462";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="foxmenucontainer">
		<?php wp_nav_menu( array( 'container_id' => 'menu', 'theme_location' => 'primary','fallback_cb'=> '' ) ); ?>	
</div>

</div>

<div id="wrapper">
<div id="casing">

Y aqui el codigo de Css

Insertar CODE, HTML o PHP:

/* The Header */
#masthead{
	background: url("http://img803.imageshack.us/img803/3215/fondodelgado.jpg") repeat scroll 0 0 transparent;
	height:275px;
}


#top {
	height:240px;
	margin:auto;
	width:1000px;
	position:relative;
	background:url("http://img844.imageshack.us/img844/2406/headerfinal2.jpg") repeat scroll 0 0 transparent;
	
	}
	
#adcuadrado {  overflow:hidden
               top:20px;
               left: 500px;
               position:relative;

}

.subcribe{
	position:absolute;
	right:40px;
	bottom:15px;
}

.subcribe a:link,.subcribe a:visited{
	color:#222;
}

.subcribe a:hover{
	color:#FFAB06;
}

.blogname {
	width:400px;
	margin:35px 0 0 0px;
	height:70px;
	text-align:left;
	float:left;


	}
.blogname h1  {
	font-size:0px;
	padding:0 0 0px 0;
	font-weight:normal;

	}
.blogname h1  a:link, .blogname h1  a:visited{ 
	color: [B]Enlace eliminado[/B] 
	display:block;
	margin:5px 0 0 0px;
	}
	
.blogname h1  a:hover { 
	color: [B]Enlace eliminado[/B] 
	}
.blogname h2 {
	margin:0px 0px 0px 0px;
	font-size:0px;
	font-weight:normal;
	color: [B]Enlace eliminado[/B] 
	text-shadow:1px 1px 0px [B]Enlace eliminado[/B]

	}

Ya he intentado mucho, pero siempre termina en fracaso.
Gracias de antemano.

Facundo · 13 Abr 2012

Creo que el problema está en que vos estás trabajando con valores absolutos en píxeles, en vez de con %

<div id="adcuadrado" style=" position: absolute; top: 20px; left: 500px">

LEft 500px, con lo cual si yo alejo la vista, el navegador siempre mostrará (Menos IE seguramente xD) el add de adsense a 500 píxeles del borde.

No uses una posición absoluta, si no relativa al contenedor donde se encuentra adsense.

Saludos

¿Cómo evitar que el contenido de mi web se desordene al hacer zoom y colocar AdSense?

Rafark

Facundo