Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 2 de 2

Tema: Necesito centrar imágenes en el body, de 2 en 2

  1. #1
    Recien Llegado! Habitual
    Fecha de Ingreso
    05 dic, 12
    Mensajes
    11
    Poder de Reputación
    11

    Necesito centrar imágenes en el body, de 2 en 2

    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
    });
    };
    });
    });
    Última edición por EAT; 11/12/2012 a las 04:58

  2. #2
    Recien Llegado! Habitual
    Fecha de Ingreso
    05 dic, 12
    Mensajes
    11
    Poder de Reputación
    11
    Ya he resuelto lo de las imágenes centradas con este código: <center> <table width="100%" height="50%"> <tr> <th> <a href="url.html"><img src="rutadelaimagen.extension" width="380px" align="left&quot;" height="439px" alt="texto alternativo" title="opcional"/></a> </th> <th> <a href="url.html"><img src="rutadelaimagen.extension" width="380px" align="center&quot;" height="439px" alt="texto alternativo" title="opcional"/></a> </th> </tr> </table></center>

    Sólo necesito ayuda para fijar en Explorer la caja flotante a la izquierda, como en Firefox.

Temas Similares

  1. Cambio de imagenes de mi body con jquery
    Por saul123 en el foro Tutoriales Varios
    Respuestas: 5
    Último Mensaje: 12/12/2011, 21:18
  2. Necesito ayuda con centrar mi pagina web
    Por segundos en el foro Foro General
    Respuestas: 1
    Último Mensaje: 29/04/2011, 17:46
  3. Necesito ayuda para centrar mi web sin perder compatibilidad
    Por AndresD en el foro Todo sobre Estilos CSS
    Respuestas: 2
    Último Mensaje: 26/09/2010, 05:45
  4. tengo problemas con centrar el body
    Por Jonatan Garcia G. en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 18/02/2010, 01:17

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •