Creative Commons 3.0 RSS CSS 2.1 XHTML 1.0
Login  
Registro
 
Escrito por Yosi_ el sábado, 16 de febrero de 2008

En esta ocasión voy a plantear lo que podríamos llamar el esqueleto de una página web, mostrando varias opciones a partir de las cuales se puede construir prácticamente cualquier otra estructura. Por supuesto voy a dar los métodos que a mi juicio son los mejores siempre teniendo en cuenta por encima de todo la compatibilidad con cualquier navegador (lo cual para nuestra desgracia incluye a IE6), aunque hay que dejar claro que el hecho de que muestre una forma no implica que no haya otras muchas de obtener un resultado similar, ni que sea la mejor. Sencillamente es a lo que yo he llegado a base de experimentar tratando de hacer las cosas lo mejor posible.

1º Estructura: titulo, bloque central y menú a la derecha



Es la estructura más característica de los blogs, y no resulta especialmente complicada. El código HTML y CSS (cada uno en su hoja correspondiente) asociado a ella sería:

 // HTML 

<div id='center'>    
    <div id='title'>
        Titulo            
    </div>
    <div id='menu'>
        Contenido del menu derecho
    </div>
    <div id='main'>
        Contenido principal
    </div>
    <div id='footer'>

        Firma
    </div>
</div>



// CSS

#center {
    width:900px; 
    margin:0 auto 0 auto;
}

#title {
    margin:0 0 20px 0;
}

#menu {
    float:right;
    width:230px;
}

#main {
    margin:0 250px 20px 0;
}

#footer{
    margin:0 0 0 250px;
}


En este primer caso seria interesante en primer lugar resaltar la sintaxis de la propiedad "margin", que define los margenes exteriores de un bloque siguiendo el orden "margin: arriba derecha abajo izquierda". A partir de esto podemos empezar a analizar lo expuesto anteriormente con el elemento "center". En este caso se le ha asignado una anchura (width) de 900px, que determinará el ancho total de la página, al estar todos los demás bloques contenidos dentro de él. Se han establecido los márgenes izquierdo y derecho como "auto", lo cual se emplea como método bastante eficaz para centrar un elemento, aunque cabe señalar que solamente funciona con los bloques no flotantes para los que no se ha establecido ningun tipo de posicionamiento absoluto.

En el caso del bloque "title" no hay nada que destacar, sencillamente se ha colocado en el interior de "center" siguiendo el flujo normal de la página, por lo que se extenderá hasta ocupar la anchura total de éste, y su altura vendrá determinada por su contenido. El margen establecido en este caso afectará a la parte inferior, de forma que los siguientes bloques deberán guardar una distancia definida en 20px con respecto al título.

Siguiendo con "menu", este será el contenedor que haga las veces de menú situándose a la derecha de los que se definan posteriormente. Para eso la se ha especificado el atributo "float:right" y un ancho de 250px.

El siguiente según el orden del HTML es "main", el bloque central. De no haber definido ningún atributo, este "div" se ubicaría ocupando el ancho total del bloque "center", mientras que "menu" flotaría a la derecha pero superponiéndose a él. Como queremos que se vean como contenedores independientes, en ningún caso solapados, deberemos definir un margen derecho, en este caso de 250px, que asegure que "main" nunca va a ocupar el espacio de "right" (que corresponde a 230px) y además respete un margen visual entre ambos bloques de 20px, tal y como está representado en el esquema superior.

Por último "footer" es el bloque que contiene la firma, y es definido exactamente igual que main, ya que debe cumplir las mismas condiciones frente al menú derecho. Es posible que en la mayoría de los casos el contenido del bloque central exceda con mucho el del menú, y por ello la firma no se vea afectada por éste último, pero aún así deberemos respetar el espacio que ocuparía si llegara a alcanzarlo. Recordemos que estamos tratando de elaborar una estructura válida para un contenido potencialmente dinámico que no podremos prever con exactitud en ningún momento, así que hay que ceñirse siempre al peor caso.

2º Estructura: titulo, bloque central y menú a la izquierda


Es bastante evidente que el cambio respecto al caso anterior es insignificante, pero que merece la pena comentarlo por un par de cuestiones que en su día personalmente me dieron algún que otro problema. El código HTML será exactamente igual al caso anterior (una clara muestra de la flexibilidad que permiten las hojas de estilos), asi que sería absurdo volver a reproducirlo. En el caso del CSS la variación sería pequeña, tal y como sigue:

// CSS

#center {
    width:900px; 
    margin:0 auto 0 auto;
}

#title {
    margin:0 0 20px 0;
}

#menu {
    float:left;
    width:230px;
}

#main {
    margin:0 0 20px 250px;
}

#footer{
    clear:left;
}


Fundamentalmente podemos destacar los cambios en "menu", cuyo atributo float está definido en este caso como "float:left", el ajuste del margen del lado derecho al lado izquierdo (recordemos la definición antes mencionada), como corresponte al cambio de posición del menú, y una cuestión importante: si prestamos atención al dibujo de arriba veremos que a diferencia del anterior, el segundo caso se ha planteado con una firma que se sitúe por debajo de todos los elementos que la preceden ocupando el ancho total de la página. Para conseguir que un elemento flotanto deje de afectar a otro definido posteriormente, este último debe contener el atributo "clear" definido como left (para los elementos flotantes a la izquierda), right (a la derecha), o "both" (ambos). De este modo se establece una linea divisoria imaginaria y el flujo de la web continúa normalmente, como si todo lo que hubiera por encima fuese un bloque homogéneo con la altura del mayor de sus componentes.

3º Estructura: titulo, bloque central y menú a la derecha


En este caso la variación respecto al caso anterior consiste en añadir un elemento HTML y hacer una pequeña variación en el CSS para ajustar los cambios:

// HTML 

<div id='center'>    
    <div id='title'>
        Titulo            
    </div>
    <div id='menu'>

        Contenido del menu derecho
    </div>
    <div id='menu2'>
        Contenido del menu izquierdo
    </div>
    <div id='main'>
        Contenido principal
    </div>
    <div id='footer'>
        Firma
    </div>

</div>



// CSS

#center {
    width:900px; 
    margin:0 auto 0 auto;
}

#title {
    margin:0 0 20px 0;
}

#menu {
    float:right;
    width:200px;
}

#menu2 {
    float:left;
    width:200px;
}

#main {
    margin:0 220px 20px 220px;
}

#footer{
    clear:both;
}


Como se puede ver, se ha añadido el div "menu2" como menu flotante a la izquierda, se ha ajustado el tamaño a 200px cada menu para dejar un poco de espacio en el centro, y se han cambiado los margenes de "main" para que respete ambos lados. Ademas se ha introducido un atributo "clear:both" en la firma para asegurarnos de que se va a colocar bajo cualquiera de los tres bloques que la preceden.

Y creo que esto es todo respecto a este tema. Espero y deseo que resulte de utilidad, porque creo que a mi en su día, cuando todo eran dudas, sí que me habría ayudado bastante encontrar un resumen de este tipo. Se que podría ser más completo, pero no he querido recargarlo demasiado con cuestiones subyacentes teniendo en cuenta a quienes afrontan esto por primera vez, ya que entiendo que puede parecer algo apabullante. Con esta base, si bien muchas cuestiones quedan en el aire (es inevitable), creo que se puede disponer de algo sobre lo que probar y obtener resultados rápidamente evitando situaciones excesivamente frustrantes. No obstante para cualquier duda al respecto, no teneis mas que preguntar y se intentará resolver lo mejor posible dentro de mis posibilidades.
8 Comentarios Temas relacionados: Programación  CSS 

Enviado por JIAYU G4 el viernes, 25 de enero de 2013

its a lovely web site ,i would like it , I am glad that you simply shared this helpful information with us. iwill be back soon.
Enviado por ladies handbag el martes, 21 de mayo de 2013

Shopping for 2013 New ladies handbag - PandaHope.com
Enviado por ladies handbag onlin el martes, 21 de mayo de 2013

Shopping for 2013 New ladies handbag online - PandaHope.com
Enviado por ladies handbags el martes, 21 de mayo de 2013

Shopping for 2013 New ladies handbags - PandaHope.com
Enviado por Replica Watches el viernes, 18 de octubre de 2013

Replica Rolex Watches Discount Sale With AAA+ Swiss Replica Watches, Cheap Breitling Replica Online Shop, We offer amounts of best swiss Cartier replica watches. Grasp this chance to buy top quality Cartier Calibre, Hublot Replica, Santos 100, Tank replica watches here!
Enviado por guoguo el miércoles, 3 de septiembre de 2014

Coach Outlet Online For Mr. Obama, the trip is a chance to show Europeans that heCoach Outlet is dedicated to NATO at a time when Russia is challengingCoach Factory Outlet the postwar European order, built on theCoach Outlet Online principle of no border changes by force.Coach Factory Outlet The tension you’re seeing between Russia and the WestCoach Outlet Store Online is going to be put on display in Wales, and the presidentCoach Outlet Store Online is going to be leading that effort,” said Ivo H. DaalderCoach Factory Outlet the previous American ambassador to NATO and now head of theCoach Outlet Chicago Council on Global Affairs. Mr. Obama, he saidCoach Handbags Outlet wants to reaffirm the unity and strength of the alliance.Coach Outlet NATO leaders are trying this week to reassure allies that theCoach Outlet commitment to collective defense, in NATO’s Article 5, is solid.Chanel Outlet Online The alliance wants to show that it means what it says and will haveLouis Vuitton the capability to defend its most vulnerable members against RussianLouis Vuitton Outlet aggression, whether overt or more covert, or a hybrid, of the two, as in Ukraine.Gucci Belts The really ironic aspect here is that a re-energizedGucci Belt restrengthened NATO is Vladimir Putin’s worst nightmareCoach Outlet Online and yet it’s his tactical actions that have done just thatCoach Outlet said James G. Stavridis, who was NATO’s commander from 2009Coach Factory Outlet to 2013 and is dean of the Fletcher School at TuftsCoach Outlet Online University, referring to Russia’s president.Coach Outlet Store It is also an opportunity for Mr. Obama, buffeted by a cascadeCoach Outlet Store Online of international crises, to rally Europeans into whatCoach Outlet Secretary of State John Kerry has called a “global coalitionCoach Factory Online to confront an increased terrorist threat from the IslamicCoach Factory Outlet State in Iraq and Syria and other radical Islamist groups in Africa.Coach Factory Outlet Though ISIS is not on the formal agenda for the summit meetingCoach Outlet Mr. Kerry and Defense Secretary Chuck Hagel will meet EuropeanCoach Outlet Store Online counterparts to develop a strategy to counter ISIS.Chanel Outlet Online But the emphasis will be on Russia. As both American and EuropeanLouis Vuitton Outlet leaders weigh additional sanctions against Moscow,Louis Vuitton Handbags Anders Fogh Rasmussen, the NATO secretary general, said MondayGucci Belt in Brussels that the new rapid reaction force “willGucci Belts ensure that we have the right forces and the rightLouis Vuitton Outlet Online equipment in the right place, at the right time.Oakley Sunglasses Outlet Numerous leaders of NATO countries have said that any hopeLouis Vuitton Outlet Online of achieving the “strategic partnership” with Russia envisionedOakley Sunglasses Outlet as long ago as the 1990 NATO summit was finished because of RussiaCheap Oakley Sunglasses s annexation of Crimea and invasion of eastern Ukraine.Oakley Sunglasses Nevertheless, NATO is being careful not to violate the NATO-Russia

Escribe tu comentario:

Nombre:
Web personal (opcional):