Centrar las cosas en una página web

JMiur [E]

A la pregunta de ¿cómo centrar algo? uno debería repreguntar: ¿qué queremos centrar? ¿el contenedor o el contenido? Y esta pregunta debería resultar bastante sencilla de responder si entendemos sus diferencias.

leer artículo actualizado

18 comentarios:

Gem@: Algo muy básico e importante :)
JMiur: Saludos, Gem@. Sí; es básico :D
Claudio - Poca Tinta: Buenas recomendaciones, voy a ser un poco mas ordenado.

Slds
Anónimo: Jejeje , muy bueno. Siempre uso <center><center/>. Lo voy a tener en cuenta :)
Anónimo: Perdon </center>
Adrián: esta interesante
Anónimo: básico pero muy bien explicado. y no está mal recordarlo y tenerlo a mano
JMiur: Saludos, Sandra. Gracias por el comentario.
JMiur: Tal como está ahora, lo mejor es que uses las propiedades de este blog:
http://selectprint.blogspot.com/
en este otro:
http://polopublicitario.blogspot.com/
ya que allí se ve centrado (es por display: table;)

Otra posibilidad es colocar el menú dentro de un DIV y que este tenga la imagen de fondo y margin:0 auto; dimensionado UL con width.

Usar padding para posiiconar UL no es buena idea y es lo que hace que se ubique a cierta distancia que no se verá igual en todas las resoluciones.
JMiur: Lo que parece funcionar bien entonces, es el blog de prubas así que busca esta parte:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_four */
.preload4 { ................
.menu4 { ................
.menu4 li {................
.menu4 li a {................
.menu4 li.current a {................
.menu4 li.current a b {................
.menu4 li a:hover {................
.menu4 li a:hover {................
.menu4 li.current a:hover {................
.menu4 li.current a:hover b {................

Cípiala y busca la misma parte en el original, cambias una por otra y así ambos quedan iguales.
JMiur: Ahora ambos se ven descentrados así que, es probable, es que hayas copiado al revés.

Lo más sencillo es volver al principio y colocar un DIV que contenga el menú, agregando <div id="menu"> antes de ul y cerrándolo al final, que quede de este modo:

<div id="menu">
<ul id="top" class="menu4">
<li> .............
......................
</ul>
</div>

Luego una definción neuva y un cambio en el CSS:

#menu {background:transparent url(http://i645.photobucket.com/albums/uu175/andres201070/profour0tc2.gif) repeat 0 0;width:100%;height:35px;}

.menu4 {
list-style-tipe:none;
margin:0 auto;
padding:0;
width:770px;
}
JMiur: No veo que hayas agregado lo que te dije. Todo sigue igual.

Lo que ves en diseño nada tiene que ver con la forma en que se ve el blog. La NavBar está oculta y por lo tanto, no afecta al blog en si mismo.

Lo que se ve en diseño es sólo una representación aproximada de la distribución de las diferentes secciones y su únic utilidad es editar los diferentes elementos.

Es probable que la Navbar se muestre en una segunda línea de esa ventana de diseño si agregas algo así:

#navbar {clear:both;}
JMiur: Cambia las propiedades. que queden exactamente así:

#menu {
background:url("http://i645.photobucket.com/albums/uu175/andres201070/profour0tc2.gif") repeat scroll 0 0 transparent;
height:35px;
width:100%;
}

.menu4 { margin:0 auto; padding:0; width:770px; }

.menu4 li { list-style-type:none; }
JMiur: Primero, cambia lo que te dije.

Segundo, las casillas se ven lo que no se ve es el fondo porque hay un error de sintaxis, te falta separar el paréntesis de cierre de la imagen de la palabra repeat con un espacio.
JMiur: Me alegro que se haya arreglado :-)
JMiur: No sé cuál es tu blog así que no sé cuales son los nombres de los distintos IDs o clase. Por defecto, el rectángulo que contiene las entradas tiene laclase post-body así que la regla sería:

.post-body {text-align:center;}

Pero, dependerá también de qué tipo de cosas agregues en las enradas.
JMiur: No y si, depende del tipo de video o mejor dicho, tal como lo comentaba antes, depende del tipo de contenido que agreguea a las entradas,.

Un video de YouTube colocado pomo en el Segundo post se centrará, un DIV con un estilo aprticular como el de las pestañas que se ve en el Quinto post requiere otro tipo de solución lo mismo que el video del Tercer post.

No existe ninguna forma de establecer propiedades genéricas absolutas para todo tipo de contenido y siempre será necesario agregarlas en el mismo post a menos que lo que se publique sea algo estandarizado.
JMiur: Sí, no hay más remedio.

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

Suscribirse a los comentarios

CERRAR

Vagabundia

Centrar las cosas en una página web

18 comentarios:

¿Quiere dejar un comentario?

entradas relacionadas

la puerta abierta

las etiquetas

Páginas