1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Centrar imagen dentro de pagina

Tema en 'Programación y Diseño Web' iniciado por jmge, 17 Ene 2006.

  1. jmge

    jmge Nuevo usuario

    Hola, espero me puedan resolver el inconveniente, sere explicito con lo que necesito:

    Tengo una imagen que mide 400px X 400px, la quiero para la portada de la web, quiero que al abrir mi pagina web, esta imagen quede centrada si la abro en un monitor de 800 x 600 o en uno de 1024 x 768, por favor sean explicitos en sus respuestas, porque estoy empezando con esto y lo que necesito es urgente muchas gracias.
     
    jmge, 17 Ene 2006
    #1
  2. Anunciante

    Anunciante

     
  3. kitsch

    kitsch Nuevo usuario

    Simple:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

    <div align="center"><img src="http://img283.imageshack.us/img283/727/top7fa.png" border="0" width="300" alt="K I T S C H ART /></div><!--c2--></div><!--ec2-->

    Y replaza la direccion de la imagen por la tuya :D
     
    kitsch, 18 Ene 2006
    #2
  4. jmge

    jmge Nuevo usuario

    Hola Kitsch, gracias por la ayuda, tengo un problema, cuando paso mi imagen al Dream, me salen varias etiquetas menos la etiqueta "div" :( , poria decirme los paso desde el momento en que paso mi imagen al DW, muchas gracias, saludos
     
    jmge, 18 Ene 2006
    #3
  5. adi

    adi Zen Moderator

    Pero cómo es que lo estás haciendo? desde photoshop?
    Exportas la imagen como html?

    Si es así, la imagen te quedará en una tabla, para centar ésta lo más práctico y fácil es poner esta tabla dentro de otra, que tenga una sola fila y una columna, y a ésta tabla darle un tamaño de 100% de ancho y 100% de alto, luego la tabla de la imagen la seleccionas y le pones que vaya centrada a lo alto y ancho.

    Espero hayas entendido, sino, sólo avisa ;)
     
    adi, 18 Ene 2006
    #4
  6. jmge

    jmge Nuevo usuario

    A ver voy a probar, gracias Adi por tu ayuda a Kitsch tambien.. (Y)
    Les aviso cualquier cosa, saludos
     
    jmge, 18 Ene 2006
    #5
  7. jmge

    jmge Nuevo usuario

    hey hey... me salio con tu metodo adi.. cool, muchas gracias a ambos. pero me gustaria de todas maneras que Kitchs me explicar un poquito mejor su sistema, gracias
     
    jmge, 18 Ene 2006
    #6
  8. adi

    adi Zen Moderator

    Si, de esa forma es mejor, es la que prefiero, pero hay que ponerle algo más de CSS porque con el <div align="center"> sólo te lo centra horizontalmente (si no me equivoco).

    Si sabes algo de html, vete a la opción de sólo código y copia y pega lo que te puso kitsch, y en el <img src=""> pones la dirección de tu imagen, y cambia el alt="" también, lo puedes dejar sin nada.

    A ver si luego pongo como centrarla verticalmente también, que no recuerdo como es :mrgreen:
     
    adi, 18 Ene 2006
    #7
  9. adi

    adi Zen Moderator

    Aquí te dejo cómo centrar una DIV horizontal y verticalmente con algo de CSS:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><head>

    <style type="text/css" media="screen"><!--

    body {

    margin: 0px;

    }



    #primera {

    text-align: center;

    position: absolute;

    top: 50%;

    left: 0px;

    width: 100%;

    height: 1px;

    overflow: visible;

    visibility: visible;

    display: block

    }



    #segunda {

    margin-left: -125px; /* cambiar por la mitad del ancho */

    position: absolute;

    top: -35px; /* cambiar por la mitad del alto */

    left: 50%;

    width: 250px; /* cambiar por el ancho */

    height: 70px; /* cambiar por el alto */

    visibility: visible

    }



    --></style>

    </head>

    <body>

    &nbsp;&nbsp;&nbsp;&nbsp;<div id="primera">

    &nbsp;<div id="segunda">

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/imagen.gif" width="250" height="70" />&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;</div>

    &nbsp;&nbsp;&nbsp;&nbsp;</div>

    </body>

    <!--c2--></div><!--ec2-->
    Sólo cambia lo que dice que le cambies por el tamaño de tu imagen, también funciona con tablas, puedes poner dentro de <div id="segunda"></div> tu tabla, y le pones el tamaño que tenga.

    Pruébalo y me dices si te funcionó.
     
    adi, 18 Ene 2006
    #8
  10. elQuique

    elQuique Usuario activo

    Buen dato ya que el centrado vertical es algo que muchos buscan pero que no se usa tanto por carecer de este tipo de info
     
    elQuique, 19 Ene 2006
    #9
  11. Faraon

    Faraon Supremo Egipcio

    Bueno tan solo es una imagen, lo que se debe de hacer es crear la tabla en Dw, en propiedades se centra la tabla, y por ultimo exportas la imagen a la tabla y lo que queda es hacer que la tabla sea W 100 % a H 100 % la foto quedara a la izquierda asi que seleccionas la imagen, y en propiedades, haz click en texto centro, y tienes la imagen al centro. Al hacer esto aparece en el codigo automaticamente el DIV

    Abrazos
     
    Faraon, 19 Ene 2006
    #10
  12. elQuique

    elQuique Usuario activo

    A mi el alto 100% no me funciona siempre incluso el xhtml me lo rechaza como no compatible
     
    elQuique, 19 Ene 2006
    #11
  13. Faraon

    Faraon Supremo Egipcio

    Si es una presentacion para entrar a la total web, no es necesario poner la validacion de xhtml.

    ahora si lo desea que sea compatible con el Xhtml debes de hacerlo con el CSS y darle los parametros.

    Abrazos
     
    Faraon, 19 Ene 2006
    #12


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·