Autor
Tengo un problema. Es lo siguiente:
Estoy desarrollando un website en PHP, aunque no lleva mucho de php.
Hize un menú y una barra de pie de página con ayuda de hojas de estilo. En Firefox 3.0.5 se ve perfectamente el menú y la barra, excepto cuando redusco la pantalla como a 100 px de ancho por 700 px de alto. Es cuando el menú se ensima y la barra pie de página reduce su ancho. El otro problema es que en Internet Explorer 8.0.6001 se ve fatal tanto el menú como la barra pie de página.
Entonces quiero saber que tengo que modificar para solucionar el problema.
El código es el siguiente: index.php
Código:
<HTML>
<HEAD>
<TITLE> GRUPO TEC COMPUTADORAS S.A DE C.V. </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<LINK REL=StyleSheet HREF="Styles/Menu.css" TYPE="text/css" MEDIA=SCREEN>
<LINK REL=StyleSheet HREF="Styles/Textos.css" TYPE="text/css" MEDIA=SCREEN>
<link REL=StyleSheet HREF="Styles/taskbar.css" TYPE="text/css" MEDIA=SCREEN>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<?php include("libpagina.php") ?>
<?php CabeceraPagina(); ?>
<!-- Todo el cuerpo de la página... -->
<!-- Menu -->
<ul class="cssMenu cssMenum0"> <!--#######Principal-->
<li class=" cssMenui0"><a class=" cssMenui0" href="#"><span>Productos</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum"> <!--#####Fin Principal-->
<li class=" cssMenui"><a class=" cssMenui" href="#">Pc's</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Laptops</a></li>
<li class=" cssMenui"><a class=" cssMenuo" href="#"><span>Impresoras</span><![if gt IE6]></a><![endif]><!--]if lte IE6]><table><tr><td><![endif]-->
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="#">Inyección</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Laser</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Matriz de punto</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Multifuncional</a></li>
</ul>
<li class=" cssMenui"><a class=" cssMenui" href="#">Copiadoras</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Faxes</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Monitores</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Scanners</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Cámaras digitales</a></li>
<li class=" cssMenum"><a class=" cssMenui" href="#">Otros</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul> <!--#####Principal-->
<li class=" cssMenui0"><a class=" cssMenui0" href="#"><span>Consumibles</span><![if gt IE6]></a><![endif]><!--[if lte IE6]><table><tr><td><![endif]-->
<ul class=" cssMenum"> <!--####Fin principal-->
<li class=" cssMenui"><a class=" cssMenui" href="papel.php">Papel</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Cartuchos</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Toners</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <!--#####Principal-->
<li class=" cssMenui0"><a class=" cssMenui0" href="#"><span>Servicios</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class=" cssMenum"> <!--#####Fin principal-->
<li class=" cssMenui"><a class=" cssMenui" href="#">Prestamos</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Mantenimiento preventivo</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <!--####Principal-->
<li class=" cssMenui0"><a class=" cssMenui0" href="#"><span>Contáctanos</span><![if gt IE6]></a><![end if]><!--[if lte IE6]><table><tr><td><![endif]-->
<ul class=" cssMenum"> <!--####Fin Principal-->
<li class=" cssMenui"><a class=" cssMenui" href="#">Ubicanos</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="#">Por correo electrónico</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="formulario.php">Comentarios</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!-- FIN MENU -->
Ruta de navegación. Dónde estoy?
<!-- Promos ...-->
<BR> <BR> <BR>
<CENTER>
<TABLE WIDTH="90%" HEIGHT="55%" BORDER="1" SUMMARY="PROMOCIONES!">
<TR>
<TD>
<IMG SRC="images/HP2.GIF" ALT="HP">
<IMG SRC="images/LEXMARK1.GIF" ALT="LEXMARK">
<IMG SRC="images/COMPAQ1.JPG" ALT="COMPAQ">
<IMG SRC="images/TEXA1.GIF" ALT="TEXA">
<IMG SRC="images/EPSON1.GIF" ALT="EPSON">
<IMG SRC="images/canon-logo.jpg" ALT="CANON" width="150">
<IMG SRC="images/brother-logo.jpg" ALT="BROTHER" width="150">
<IMG SRC="images/samsung-logo.jpg" ALT="SAMSUNG" width="150">
</TD>
</TR>
</TABLE>
</CENTER>
<!-- FIN PROMOS ...-->
textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto
textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto
textotextotextotextotextotextotextotextotextotextotextotextotexto
<!--Fin cuerpo página... -->
.............
.............
<BR> <BR>
<center>
<?php PiePagina(); ?>
</center>
</BODY>
</HTML>
La hoja de estilo del menú es la siguiente:
Menu.css en la carpeta "Styles"
Código:
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:100%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#fff;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.cssMenu ul{
width:194.25px;
}
ul.cssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#FFFFFF;
border-width:1px;
border-color:#fff;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:15px Tahoma;
color: #000;
text-decoration:none;
cursor:default;
}
ul.cssMenu span{
overflow:hidden;
}
ul.cssMenu li {
float:left;
}
ul.cssMenu ul li {
float:none;
}
ul.cssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.cssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.cssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.cssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.cssMenu li:hover{
position:relative;
}
ul.cssMenu li:hover>a{
background-color:#DBF0F9;
border-color:#45ADE4;
border-style:solid;
font:15px Tahoma;
color: #444;
text-decoration:none;
}
ul.cssMenu li a:hover{
position:relative;
background-color:#DBF0F9;
border-color:#45ADE4;
border-style:solid;
font:15px Tahoma;
color: #444;
text-decoration:none;
}
ul.cssMenu li.dis a {
color: #557D4F !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.cssMenu ul img {width:16px;
height:16px;
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul{display:none}
ul.cssMenu span{
display:block;
background-image:url(../images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.cssMenu ul span{background-image:url(../images/arr_black.gif)}
ul.cssMenu ul li:hover > a span{ background-image:url(../images/arr_white.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span{background-image:url(../images/arr_white.gif)}
ul.cssMenu table a:hover table span{background-image:url(../images/arr_black.gif)}
ul.cssMenu li.cssMenui0 {
width:110px;
height:23px;
}
ul.cssMenu li a.cssMenui0{
height:100%;
background-image:url(../images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.cssMenu li a.cssMenui0:hover{
background-image:url(../images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.cssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.cssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.cssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.cssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.cssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.cssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.cssMenum0 li li {
margin:2px 0px 0px 2px;
}El código de la barra es el siguiente: taskbar.css
Código:
/* CSS Documento */
body{
text-align:center;
}
#taskbar{
height:35px;
width:100%;
margin:auto;
position: absolute;
bottom: auto;
z-index: 99;
}
#taskbar #container{
background-color:#0080FF; /*Color de fondo en la barra*/
border:1px solid #B5B5B5; /*Color del borde*/
display:block;
margin-left:1px;
margin-right:15px;
height:55px; /*Alto de la barra*/
}
Y el contenido de libpagina.php
Código:
<?php
function CabeceraPagina()
{
print('<CENTER> <A HREF="index.php"><IMG SRC="images/logo02.bmp"
BORDER="0" VSPACE=0 HSPACE=0 WIDTH="990" HEIGHT="100" ALT="LOGO ENCABEZADO"> </CENTER></A>');
}
?>
<?php
function PiePagina()
{
print('<div id="taskbar">');
print('<div id="container">');
print("TEXTO 13456799TXTO");
print("</div>");
print("</div>");
}
?>
Se que hasta les a de dar weba leer todo el código, pero si no lo leen aunque sea diganme que sitio leer para entender esto de la incompatibilidad con estupido internet explorer de *****.
Un gran saludo y gracias por tomarte la molestia de analizar el código.
Saludos!
En línea
