Como centrar pagina verticalmente

Tema en 'Programación y Diseño Web' iniciado por rojitas, 27 Nov 2007.

  1. rojitas

    rojitas Nuevo usuario

    Hola amigos tengo otro par de preguntas, como hago para centrar mi pagina para distintas resoluciones de pantallas, sobre todo verticalmente es el problema, tengo toda mi pagina en un Div, con un alto y ancho definido y con margenes automaticas,pero siempre deja un pequeño margen arriba y abajo mas aun.Tambien lei por aqui envolverlo todo en un Div con align:center, pero igual......Ayuda plish!
  2. opinguino

    opinguino Espécimen en peligro de extinción

    align: center no es una etiqueta hoy en día aprobada en los standars, se tiende a eliminar la etiqueta center para centrar objetos...menos text-align: center
  3. rojitas

    rojitas Nuevo usuario

    Hola opinguino, tienes razon solo lo estaba probando para ver si solucionaba el problema,pero igual no se centra verticalmente, sabes de algo para esto?.
    Y sabes como centrar una página emergente? pero no que abra un html, si no solo de frente la imagen.....Es que son un monton y no quiero hacer un html para cada uno?
  4. opinguino

    opinguino Espécimen en peligro de extinción

    has probado alguna vez en hojas de estilo vertical-align¿? con eso puedes centrar verticalmente

    para lo segundo que admite el servidor donde la vas a colgar php o asp, deberias empezar por ahi, lo logico seria usar un script que te lo haga, en php hay varios que se añaden.

    aunque, personalmente, viendo lo que buscas, yo me decantaria por usar AJAX en concreto el popular lightbox, que hace justamente eso con imagenes

    aqui puedes verlo funcionando y descargarlo: <a href="http://www.huddletogether.com/projects/lightbox/" target="_blank">http://www.huddletogether.com/projects/lightbox/</a>
  5. elQuique

    elQuique Usuario activo

    Hay una forma valida de hacerlo, justo hace un rato estaba con esto :), vamos por paso:

    1) Tu web debe estar contenido en un DIV general de medidas fijas, ejemplo:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <div id="general">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toda tu web aca
    </div>
    <!--c2--></div><!--ec2-->

    2) El posicionamiento de este DIV via CSS debe ser abosoluto, por tanto el CSS de este div quedaría así:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    #general {
    &nbsp;&nbsp;width: 800px;
    &nbsp;&nbsp;height: 500px;
    &nbsp;&nbsp;position: absolute; // esto debe ser absoluto
    &nbsp;&nbsp;top: 50%;&nbsp;&nbsp;// se posiciona al 50% del alto total
    &nbsp;&nbsp;margin-top: -250px; // pero bueno el margen superior sera negativo y el valor sera la altura dividido 2 (500 / 2 = 250px)
    &nbsp;&nbsp;left: 50%;&nbsp;&nbsp;// como la posición es absoluta no sirve el margin left y right auto, debes usar la misma regla, por tanto se posiciona al 50% del ancho
    &nbsp;&nbsp;margin-left: - 400px; // y también el margen debe ser la mitad del ancho
    }
    <!--c2--></div><!--ec2-->

    Listo ahí queda centrada, horizontal y verticalmente y VALIDO !!!

    Sobre ligthbox esta buena, y si solo quieres centrar una web la veo excesiva jeje AJAX es moda pero tampoco para meterlo en todos lados jaja

    Te dejo el link a la versión 2 de Ligthbox

    <a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank">http://www.huddletogether.com/projects/lightbox2/</a>
  6. rojitas

    rojitas Nuevo usuario

    Vamos probando......
  7. elQuique

    elQuique Usuario activo

    Acá me funca de lujo <a href="http://www.creativaint.com" target="_blank">http://www.creativaint.com</a>
  8. rojitas

    rojitas Nuevo usuario

    :arriba: Excelente, gracias por su ayuda...el centrado funciona ok y al final no utilicé el lightbox, pero me parece muy interesante para usarlo en futuros proyectos....Gracias!!! :aplausos: :aplausos:
  9. elQuique

    elQuique Usuario activo

    Sip, yo no digo que no sea interesante pero como que para esto, puntualmente no necesitabas meter AJAX en el asunto. El AJAX no se debe abusar, tal como se abuso de Flash, se debe usar si es necesario :p
  10. Samus_

    Samus_ Guest

    <!--quoteo(post=266275:date=Nov 27 2007, 12:25 AM:name=rojitas)--><div class='quotetop'>QUOTE(rojitas @ Nov 27 2007, 12:25 AM) [snapback]266275[/snapback]</div><div class='quotemain'><!--quotec-->
    Hola amigos tengo otro par de preguntas, como hago para centrar mi pagina para distintas resoluciones de pantallas, sobre todo verticalmente es el problema, tengo toda mi pagina en un Div, con un alto y ancho definido y con margenes automaticas,<b>pero siempre deja un pequeño margen arriba y abajo</b> mas aun.Tambien lei por aqui envolverlo todo en un Div con align:center, pero igual......Ayuda plish!
    <!--QuoteEnd--></div><!--QuoteEEnd-->
    me alegro que ya hayan solucionado, quisiera aportar que ese margen si no me equivoco es el margin del tag body y se elimina con: <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->body { margin: 0px; }<!--c2--></div><!--ec2-->


    [offtopic]
    <!--quoteo(post=266726:date=Nov 28 2007, 08:11 PM:name=elQuique)--><div class='quotetop'>QUOTE(elQuique @ Nov 28 2007, 08:11 PM) [snapback]266726[/snapback]</div><div class='quotemain'><!--quotec-->
    <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->
    #general {
    &nbsp;&nbsp;width: 800px;
    &nbsp;&nbsp;height: 500px;
    &nbsp;&nbsp;position: absolute; // esto debe ser absoluto
    &nbsp;&nbsp;top: 50%;&nbsp;&nbsp;// se posiciona al 50% del alto total
    &nbsp;&nbsp;margin-top: -250px; // pero bueno el margen superior sera negativo y el valor sera la altura dividido 2 (500 / 2 = 250px)
    &nbsp;&nbsp;left: 50%;&nbsp;&nbsp;// como la posición es absoluta no sirve el margin left y right auto, debes usar la misma regla, por tanto se posiciona al 50% del ancho
    &nbsp;&nbsp;margin-left: - 400px; // y también el margen debe ser la mitad del ancho
    }
    <!--c2--></div><!--ec2-->

    Listo ahí queda centrada, horizontal y verticalmente y VALIDO !!!
    <!--QuoteEnd--></div><!--QuoteEEnd-->
    :unsure:

    ta bien, pasa los checks de validación pero este tipo de css-hacks como meter valores negativos y ese tipo de cosas siempre me deja la sensación de parche más que de solución real, no es que sea culpa del diseñador uno usa lo que le funciona y más aún lucha por tener código válido pero de todas formas me choca bastante que tengamos que recurrir a este tipo de técnicas, es decir ¿por qué rayos <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->div { height: 100%; }<!--c2--></div><!--ec2--> no funciona?
    ¿y por qué <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->div { vertical-align: middle; }<!--c2--></div><!--ec2--> tampoco eh?
    Dios debe odiar a los diseñadores web... :
    [/offtopic]
  11. rojitas

    rojitas Nuevo usuario

    Hola otra vez, tengo ahora otra duda, quisiera saber porque google cuando me pongo a buscar por el nombre completo de mi pagina ej: arte kids peru. Cuando da los resultados no sale la descripción que le he puesto en los "meta", si no me sale la antigua información. Esta es la dirección: www.artekidsperu.com.
  12. elQuique

    elQuique Usuario activo

    Los meta no se toman mas en cuenta salvo el <title> que no es meta, el resto de la información lo toma del contenido de la pagina, por eso es mejor realizarlas con CSS y dándole la correspondiente importancia con los tags de HTML a cada información.

    En tu caso, el sitio es casi nulo, y la información no existe para google ya que es un sitio casi todo en flash e imágenes en lugar de texto (gran error si querías figurar en buscadores), va a tardar más de lo normal.

    Sobre lo de la actualización de google, pues bueno eso depende de que tan seguido google visite tu sitio, a algunos lo hace a diario y a otros lo hace 1 vez por año.

    También al ser un sitio Flash, y no tener contenido que cambie seguido, sera de los que mas demore. Igualmente es un sitio nuevo, aun no tiene PR ni Alexa.

    La ultima vez que actualizo fue el 4 de diciembre, mínimo tardara 10 a 20 días, y ayuda mucho si cambia la info y si tienes un sitemap.
  13. rojitas

    rojitas Nuevo usuario

    Hola elQuique, tienes razón, porque la pagina es casi todo imagen, pense disfrazarlo un poco con los h1,h2..... Que me aconsejas. Que quieres decir con que no tiene PR ni Alexa y como hago un sitemap?..gracias






Sitios amigos: GuiaHosting · Unidominios · Interalta · Forocreativo