Resulta que sigo haciendo mi web a punta de CSS, ya había colocado un post anterior y gracias a la ayuda de drarock, todo había quedado bien.
Primer problema
Pero resulta que a medida que el diseño se ha implementado, también el descuadre, y este ha sido el resultado:
http://www.skpepublicidad.com/v7/, como podrán ver el descuadre ha sito total, para ambos navegadores. Tengo que aclarar que no he aplicado los cambios que me indico drarock para IE.
Segundo problema
La seccion de "Noticias desde el blog" use el tutorial de Lector de feeds RSS en AJAX y debo decir que se ajusta a lo que nesesito, pero como podran ver no tiene la imagen de fondo que se invoca desde el css.
Tercer problema
También me gustaria saber como centro, verticalmente, los textos que se encuentran dentro de un div. Es decir, que se vean centrados proporcionalmente, yo use el padding (tanto top, left y right) y en FireFox se ve bien pero en IE lo descuadra.
Adjunto los còidgos:
EL HTML
Código :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="estilos_skpe.css" type="text/css" media="all" />
<link rel="stylesheet" href="estilos_internos.css" type="text/css" media="all" />
<!--Aqui se cargan el javascript del RSS -->
<script language="JavaScript" type="text/javascript" src="Scripts/rss_reader.js"></script>
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="all" />
<![endif]-->
<style type="text/css">
<!--
body {
background-image: url(images/fondo_pagina.jpg); background-attachment:fixed;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div class="fondonegro"></div>
<div class="fondonegrocuerpo">
<div class="header"></div>
<div class="menu"></div>
<div class="flashrotator">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','760','height','167','src','editables/rotor_flash','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','editables/rotor_flash' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="760" height="167">
<param name="movie" value="editables/rotor_flash.swf" />
<param name="quality" value="high" />
<embed src="editables/rotor_flash.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="760" height="167"></embed>
</object>
</noscript>
</div>
<div class="btn_descargas">
<div class="boton_descargas"><img src="images/btn_descargas.jpg" width="185" height="130" border="0" /></div>
<div class="texto_descargas">Descargue mi hoja de vida y otras cosas</div>
</div>
<div class="clear"></div>
<div class="feed_rss">
<div class="titulo_rss"></div>
<div id="rss"><load>Cargando contenido ...</load></div>
<div class="footer_rss">Suscribirse a este RSS<img src="images/icono_rss.png" width="33" height="27" /></div>
</div>
</div>
<div class="varios">
<div class="titulo_banner"></div>
<div class="flash_banner">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','182','height','256','src','editables/banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','editables/banner' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="182" height="256">
<param name="movie" value="editables/banner.swf" />
<param name="quality" value="high" />
<embed src="editables/banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="182" height="256"></embed>
</object></noscript>
</div>
</div>
<div class="tabs"></div>
<div class="youtube">
<div class="boton_youtube"><img src="images/btn_youtube.jpg" width="185" height="130" border="0" /></div>
<div class="texto_youtube">Disfrute de los mejores comerciales en Internet.</div>
</div>
<div class="noticias">
<div class="boton_noticias"><img src="images/btn_noticias.jpg" width="377" height="130" /></div>
<div class="texto_noticias">Enterese de las ùltimas noticias y todo lo que acontece en este sitio</div>
</div>
<div class="ecologia">
<div class="boton_ecologia_titulo"></div>
<div class="boton_ecologia_flash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','185','height','103','src','editables/mundo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','editables/mundo' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="185" height="103">
<param name="movie" value="editables/mundo.swf" />
<param name="quality" value="high" />
<embed src="editables/mundo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="185" height="103"></embed>
</object></noscript>
<div class="texto_ecologia">Un mundo, un planeta...un hogar</div>
</div>
</div>
<div class="contacto">
<div class="boton_contacto"><img src="images/btn_contacto.jpg" width="184" height="130" /></div>
<div class="texto_contacto">Pongase en contácto con SKPE</div>
</div>
<div class="footer">
<div class="pie">Más informacion:[email protected] - Copyright 2009</div>
</div>
</div> <!--Cierra el div de fondonegrocuepo (contenidos)-->
</div>
<div class="fondonegrofooter"></div>
</body>
</html>
EL CSS
Código :
/*Ninguna margen para centrar todo ----------------------------------------------------------------------------------------------------------------------*/
*{margin: 0; padding: 0;}
/*Centrado de los DIVS ---------------------------------------------------------------------------------------------------------------------------------*/
body {text-align:center;}
/*Fondo del negro de atras ------------------------------------------------------------------------------------------------------------------------------*/
.fondonegro {margin: 0 auto 0 auto; width:1080px; height:53px; background-image:url(images/top_fondonegro.png); background-repeat:no-repeat;}
.fondonegrocuerpo {margin: 0 auto 0 auto; width:1080px; height:786px; background-image:url(images/cuerpo_fondonegro.png); background-repeat:repeat-y;}
.fondonegrofooter {margin: 0 auto 0 auto; width:1080px; height:54px; background-image:url(images/footer_fondonegro.png); background-repeat:no-repeat;}
/*header -------------------------------------------------------------------------------------------------------------------------------------------------*/
.header {margin-top:auto; margin-bottom:8px; margin-left:auto; margin-right:auto; width:953px; height:89px; background-image:url(images/header.jpg); background-repeat:no-repeat;}
/*menu -------------------------------------------------------------------------------------------------------------------------------------------------*/
.menu {margin-left:auto; margin-right:auto; margin-bottom:8px; width:953px; height:40px; background-color:black; clear:both;}
/*flash rotator-------------------------------------------------------------------------------------------------------------------------------------------*/
.flashrotator {margin-left:63px; margin-right:8px; width:760px; height:167px; float:left;}
/*btn_descargas-------------------------------------------------------------------------------------------------------------------------------------------*/
.btn_descargas {margin-right:64px; width:185px; height:167px; background-color:#006666; float:right;}
.clear {clear: both; background-color:#FFFF00;}
/*btn_rss-------------------------------------------------------------------------------------------------------------------------------------------*/
.feed_rss {margin-left:63px; margin-top:8px; margin-right:8px; width:377px; height:283px; float:left; background-image:url(images/fondo_rss.jpg);}
/*banner-------------------------------------------------------------------------------------------------------------------------------------------*/
.varios {margin-right:8px; margin-top:8px; width:182px; height:283px; float:left; display:inline;}
/*pestañas -------------------------------------------------------------------------------------------------------------------------------------------*/
.tabs {margin-right:64px; margin-top:8px; width:376px; height:283px; background-color:#CC3333; float:right;}
/*btn_youtube -------------------------------------------------------------------------------------------------------------------------------------------*/
.youtube {margin-left:63px; margin-right:8px; margin-top:8px; width:185px; height:178px; float:right; display:inline;}
/*btn_noticias -------------------------------------------------------------------------------------------------------------------------------------------*/
.noticias {margin-right:8px; margin-top:8px; width:377px; height:178px; float:left;}
/*btn_ecologia -------------------------------------------------------------------------------------------------------------------------------------------*/
.ecologia {margin-right:8px; margin-top:8px; width:185px; height:178px; background-color:#CCCC33; float:left;}
/*btn_contacto-------------------------------------------------------------------------------------------------------------------------------------------*/
.contacto {margin-right:8px; width:184px; height:178px; float:left;}
/*footer -------------------------------------------------------------------------------------------------------------------------------------------*/
.footer {margin-top:8px; margin-left:63px; margin-right:64px; width:953px; height:31px; float:left;}
OTRO CSS
Código :
/*btn_descargas -----------------------------------------------------------------------------------------------*/
.boton_descargas {width:185px; height:130px;}
.texto_descargas {width:185px; height:37px; background-image:url(images/btn_descargas2.jpg); background-repeat:no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; text-align:center; border:none; padding:3px;}
/*btn_youtube -----------------------------------------------------------------------------------------------*/
.boton_youtube {width:185px; height:130px;}
.texto_youtube {width:185px; height:37px; background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; text-align:center; border:none;}
/*btn_noticias -----------------------------------------------------------------------------------------------*/
.boton_noticias {width:377px; height:130px;}
.texto_noticias {width:377px; height:37px; background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; text-align:center;}
/*btn_ecologia -----------------------------------------------------------------------------------------------*/
.boton_ecologia_titulo {width:185px; height:27px; background-image:url(images/btn_ecologia.jpg);}
.boton_ecologia_flash {width:185px; height:103px;}
.texto_ecologia {width:185px; height:37px; background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; text-align:center; border:none;}
/*btn_contacto -----------------------------------------------------------------------------------------------*/
.boton_contacto {margin-right:8px; margin-top:8px; width:184px; height:130px;}
.texto_contacto {width:184px; height:37px; background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; text-align:center; border:none;}
/*footer -----------------------------------------------------------------------------------------------*/
.pie {border-top:#000000 solid; text-align:right; font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#000000;}
/*banner_flash -----------------------------------------------------------------------------------------------*/
.titulo_banner {width:183px; height:27px; background-image:url(images/titulo_banner.jpg);}
.flash_banner {width:183px; height:256px;}
/*RSS -----------------------------------------------------------------------------------------------*/
.titulo_rss {width:377px; height:27px; background-image:url(images/titulo_rss.jpg);}
.footer_rss {width:377px; height:27px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:red; background-color:#0099FF; text-align:right;}
#rss { width:377px;
height:245px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
}
titulo {font-weight:bold; color:#FF0000;}
descripcion {color:#000000;}
fecha {color:#999999;}
enlace a {color:#003399; margin-left:180px;}
next a {color:#006699; margin-left:180px; text-decoration:none;}
load {color:#003366;}MUCHAS GRACIAS
