Scribd Logo
Upload

Welcome to Scribd!

  • Centrar El Contenido de Una Página

    Uploaded by

    MeganLand
    19 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views4 pages

    Centrar El Contenido de Una Página

    Uploaded by

    MeganLand

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Centrar el contenido de una pgina en la pantalla es fcil de hacer

    utilizando tablas, pero sin ellas, es decir, usando CSS , la cosa es un poco
    misteriosa, sin embargo esta ultima opcion es la ms elegante. El cdigo es
    el siguiente.
    < HTML >
    <head>
    <style type="text/css">
    body{
    text-align:center;
    margin:0 auto;
    }
    contenedor{
    margin: 0 auto;
    text-align:le!t;
    "idth:#0$;
    }
    </style>
    </head>
    <body>
    <di% id="contenedor">
    el contenido de tu p&gina ac&
    </di%>
    </body>
    </'()*>
    El DIV contenedor es necesario para alinear el texto nueamente a la
    iz!uierda, "a !ue en por la regla !ue dimos al bod", el texto !ueda
    centrado.
    Creamos un div que englobar a todos los elementos de la pgina y le damos un tamao,
    hasta aqui todo bien, pero ahora viene la mgia.
    En el CSS debemos darle las siguiente propiedades al body y al contenedor.
    body{text-align:center}
    #cont{width:790px;margin-left:auto;margin-right:auto;text-align:left}}
    Siendo #cont el contenedor de todo y pones el text-alignle!t para que el contendor no
    herede el text-aligncenter del body.
    Crear pgina centrada sin usar tablas con CSS
    La actual direccin del desarrollo web, es dejar de usar las tablas para crear la
    estructura de la pgina. Las tablas son tediosas, "difciles" de usar, es complicado dejar
    cada cosa en su lugar, muy complicado de mantenerlas, se va creando un cori!o de
    tablas, tablas una de otras dentro de otras y dentro de otras, nos acen recordar a toda
    la familia "#... en $n...
    #as pginas ahora se ma!uetan con dis, listas " principalmente con CSS, es ms, "a ha"
    pro"ectos !ue ma!uetan todo el sitio solamente con listas " CSS.
    Claro !ue esto llea a !ue uno aprenda a programar con ho$as de estilo, pero realmente ale la
    pena hacerlo. #os sitios !uedan ms claros, fciles de mantener, se indexan me$or a los
    buscadores %m&" util si !ueremos posicionarnos en 'oogle(.
    )ara empezar amos a er cmo crear una pagina *clsica*, o sea, !ue contenga una cabecera, un
    men&, el contenido " un pie, " a la ez !ue !uede centrada " sea compatible con IE " +irefox.
    )rimero debemos crear nuestra estructura html de la siguiente manera,
    -.D/C01)E 203# )45#IC *67789C77D0D 203# :.;< 0ransitional77E=*>
    -html>
    -head>
    -title>)rueba-7title>
    -7head>
    -bod">
    -di id?*content*>
    -di id?*cabecera*>-7di>
    -di id?*menu*>-7di>
    -di id?*contenido*>-7di>
    -di id?*pie*>-7di>
    -7di>
    -7bod">
    -7html>
    Como emos en el cdigo de arriba, tenemos una capa *content* !ue a a contener toda la
    informacin. Dentro de ella se encuentran otras capas *cabecera*, *menu*, *contenido, *pie*. Cada
    una de estas capas las iremos posicionando dentro de *content* para lograr nuestra meta. Como
    dentro *content* est *todo*, con solo centrar esta capa, se centrar toda la informacin de
    nuestro sitio.
    El CSS !ue logra hacer esto es el siguiente,
    -st"le>
    bod" @
    margin,;A
    padding,;A
    text6align,centerA
    B
    Ccontent @
    text6align,leftA
    margin,autoA
    bacDground6color,CE;A
    Fidth,G;;pxA
    height,G;;pxA
    B
    Ccabecera @
    Fidth, G;;pxA
    height,<;;pxA
    bacDground6color,Cf;;A
    B
    Cmenu @
    Fidth,<H;pxA
    height,IH;pxA
    Joat,leftA
    bacDground6color,CGGGA
    B
    Ccontenido @
    Fidth,IH;pxA
    height,IH;pxA
    Joat,leftA
    bacDground6color,CcccA
    B
    Cpie @
    clear,bothA
    Fidth,G;;pxA
    height,H;pxA
    bacDground6color,C;f;A
    B
    -7st"le>
    1 listo, !ued la estructura de nuestro sitio armada.
    Tutorial CSS: Centrar una capa en la ventana
    Uno de los problemas ms frecuentes a la hora de disear una pgina web con estndares
    vlidos es el centrado de capas. Algunos utilizan una tabla (con una sola celda) que ocupa el
    ancho y el alto total de la pgina y adems tiene el alineado al centro tanto vertical como
    horizontal (en la misma celda)!
    <table border="0" cellspacing="0" cellpadding="0" "idth="+00$"
    height="+00$"><tr>
    <td %align="middle"
    align="center">,-ontenido.</td>
    </tr></table>
    "sto funciona en la mayor#a de navegadores dependiendo del tipo de documento utilizado
    pero no es un estndar vlido. "n la versi$n %&'() *.+ estricta (,-./0'12" html 2U3)40
    567789077.'. %&'() *.+ :trict77";5 5http!77www.w9.org7'<7=++=7<"06>html*6
    =++=+?+*7.'.7>html*6strict.dtd5@) a parte de no ser vlido no funciona lo que frusta a los
    que intentamos disear web vlidas de forma estricta.
    2uAs bien hay una soluci$n a este problema salvable mediante hoBas de estilo en cascada
    (0:: 0ascade :tyle :heet). :implemente necesitamos una capa (div) con medidas ancho y
    alto par (puesto que despuAs necesitaremos dividirla a la mitad y si es impar puede que no
    quede centrada de forma absoluta) y el siguiente c$digo en la hoBa de estilos!
    /capa-centrada {
    position: absolute;
    width: 000px; /* ancho de la capa a centrar */
    height: 100px; /* alto de la capa a centrar */
    top: 20$;
    left: 20$;
    margin-left: -100px; /* mitad del ancho de la capa a centrar */
    margin-top: -+00px; /* mitad del alto de la capa a centrar */
    }
    Una vez resuelto esto s$lo quedar centrar la capa simplemente agregndole el estilo que
    hemos creado. "sto lo haremos por eBemplo as#!
    <di% class="capa-centrada">,-ontenido.</di%>
    As# esta capa quedar centrada de forma absoluta en la ventana.
    :aludos

    You might also like