Hola, he creado una web siguiento CCTW. Gracias por tan maravilloso trabajo!!!
Al hacer mis experimentos he querido poner 6 imagenes centradas en el cuerpo de la página, y acomodarlas de tal manera que alrededor tenga los mismos espacios, pero aunque ya experimenté e investigué muchísimo, no logro centrarlas en mi web, aunque he creado clases de estilo, no me responde (en Firefox es todo lo que necesito).
Finalmente, esa misma web en el Explorer me marca 2 problemas que no lo hace el Firefox:
1) coloca la caja flotante abajo y no al lado izquierdo.
2) Abajo del pie me aparece un trozo ¿del body o del contenido? color blanco, como una prolongacion, pero si le muevo al CSS me descuadra el Firefox.
Ojalá alguien me pudiara orientar.
Muchísimas Gracias......
CODIGO CSS:
* {text-indent:0px; margin:0px; padding:0px; border:0px;}
p {text-align:justify}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline;
text-align:center;padding-top:12px;padding-bottom:12px;}
h2 {font.size:1.1em; color:blue; font-weight:bold; text-decoration:none;
text-align:center;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#curva-superior {background-image:url(elementos-home/curva-superior.gif);
background-repeat:no-repeat;
width:800px;
height:12px;
overflow:hidden;}
#cabecera {background-color:white; border-left:black 1px solid;
border-right:black 1px solid; height:474px;}
#banner {width:796px; float:center; margin-bottom:4px;}
#navegacion {background-color:LightGreen; border:black 1px solid; height:85px;}
#navegacion li {float:left; list-style:none; margin:0px 20px 10px 20px;}
#navegacion ul {margin-left:60px;margin-top:12px;}
#contenido {background-color:white; border-left:black 1px solid;
border-right:black 1px solid;padding-bottom:25px;}
#contenido p {margin:15px 10px 15px 10px; text-indent:15px;}
#menu {width:150px; float:left;
text-align:left; margin:3px 10px 3px 3px;background-image: url(elementos-home/menu-parte-inferior.gif);background-position:bottom ; padding-bottom:5px;}
#menu li {list-style:none; margin:4px 8px 4px 6px;}
#menu h1 {text-decoration:none; font-size:12px;background-image: url(elementos-home/menu-parte-superior.gif);padding-top:12px;}
#pie {border-left:black 1px solid; border-right:black 1px solid;
border-top:black 1px solid; height:85px;float:center; width:798px;background-color: white; padding-top:12px;padding-bottom:45px;}
#pie li {list-style:none;font-size:12px; float: left;; width:255px; background-color: white;padding-top:12px;}
#curva-inferior {background-image:url(elementos-home/curva-inferior.gif);
background-repeat:no-repeat;
width:800px;
height:25px;
overflow:hidden;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {color:green;}
a:hover {color:blue; text-decoration:underline; background-color:}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block; }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white;}
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white; }
#logotipo a:active {}
#arriba {background-color: white; border-left:black 1px solid; border-right:black 1px solid; padding-top:2px; padding-bottom:12px;}
#caja_flotante{
position: fixed;
top:250px;
left: 10px;
border: 0px solid #CCC;
background-color:
width:100px;
}
$(document).ready(function() {
var posicion = $("#caja_flotante").offset();
var margenSuperior = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > posicion.top) {
$("#caja_flotante").stop().animate({
marginTop: $(window).scrollTop() - posicion.top + margenSuperior
});
} else {
$("#caja_flotante").stop().animate({
marginTop: 0
});
};
});
});
Al hacer mis experimentos he querido poner 6 imagenes centradas en el cuerpo de la página, y acomodarlas de tal manera que alrededor tenga los mismos espacios, pero aunque ya experimenté e investigué muchísimo, no logro centrarlas en mi web, aunque he creado clases de estilo, no me responde (en Firefox es todo lo que necesito).
Finalmente, esa misma web en el Explorer me marca 2 problemas que no lo hace el Firefox:
1) coloca la caja flotante abajo y no al lado izquierdo.
2) Abajo del pie me aparece un trozo ¿del body o del contenido? color blanco, como una prolongacion, pero si le muevo al CSS me descuadra el Firefox.
Ojalá alguien me pudiara orientar.
Muchísimas Gracias......
CODIGO CSS:
* {text-indent:0px; margin:0px; padding:0px; border:0px;}
p {text-align:justify}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline;
text-align:center;padding-top:12px;padding-bottom:12px;}
h2 {font.size:1.1em; color:blue; font-weight:bold; text-decoration:none;
text-align:center;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#curva-superior {background-image:url(elementos-home/curva-superior.gif);
background-repeat:no-repeat;
width:800px;
height:12px;
overflow:hidden;}
#cabecera {background-color:white; border-left:black 1px solid;
border-right:black 1px solid; height:474px;}
#banner {width:796px; float:center; margin-bottom:4px;}
#navegacion {background-color:LightGreen; border:black 1px solid; height:85px;}
#navegacion li {float:left; list-style:none; margin:0px 20px 10px 20px;}
#navegacion ul {margin-left:60px;margin-top:12px;}
#contenido {background-color:white; border-left:black 1px solid;
border-right:black 1px solid;padding-bottom:25px;}
#contenido p {margin:15px 10px 15px 10px; text-indent:15px;}
#menu {width:150px; float:left;
text-align:left; margin:3px 10px 3px 3px;background-image: url(elementos-home/menu-parte-inferior.gif);background-position:bottom ; padding-bottom:5px;}
#menu li {list-style:none; margin:4px 8px 4px 6px;}
#menu h1 {text-decoration:none; font-size:12px;background-image: url(elementos-home/menu-parte-superior.gif);padding-top:12px;}
#pie {border-left:black 1px solid; border-right:black 1px solid;
border-top:black 1px solid; height:85px;float:center; width:798px;background-color: white; padding-top:12px;padding-bottom:45px;}
#pie li {list-style:none;font-size:12px; float: left;; width:255px; background-color: white;padding-top:12px;}
#curva-inferior {background-image:url(elementos-home/curva-inferior.gif);
background-repeat:no-repeat;
width:800px;
height:25px;
overflow:hidden;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {color:green;}
a:hover {color:blue; text-decoration:underline; background-color:}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block; }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white;}
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white; }
#logotipo a:active {}
#arriba {background-color: white; border-left:black 1px solid; border-right:black 1px solid; padding-top:2px; padding-bottom:12px;}
#caja_flotante{
position: fixed;
top:250px;
left: 10px;
border: 0px solid #CCC;
background-color:
width:100px;
}
$(document).ready(function() {
var posicion = $("#caja_flotante").offset();
var margenSuperior = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > posicion.top) {
$("#caja_flotante").stop().animate({
marginTop: $(window).scrollTop() - posicion.top + margenSuperior
});
} else {
$("#caja_flotante").stop().animate({
marginTop: 0
});
};
});
});