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

25 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.
Andrés: Hola JMiur, tengo un menú en el blog, pero se decentra en un monitor de 17 pulgadas, en el de 19 pulgadas no hay problema, no puedo centrarlo para que se vea bien en cualquier tamaño de monitor, podrías ayudarme, te lo agradeceria muchisimo, ya que estoy lidiando con esto mucho tiempo, un cordial saludo.
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.
Andrés: JMiur, no entiendo mucho de códigos, podrías indicarme que codigos tengo que borrar y que aumentar, el blog que uso es el primero el segundo es el borrador, te mando un saludo cordial.
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.
Andrés: Hola JMiur, ya efectué los cambios pero aun continua descentrandose todo, hasta el menú se pone en dos niveles, es decir como si le hubiese dado enter y continuara a la siguiente linea, parece que hay algun conflicto con el codigo de la plantilla, crees que haya alguna solución, te agradesco de antemano, saludos.
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;
}
Andrés: JHiur, te envio la imagen que se ve en la opcion diseño para que lo veas mejor, si te das cuenta la barra de blogger esta a la derecha y al parecer esa es la causa del desorden, ¿como podria hacer para que la barra de blogger que está oculta, se centre y quizas asi el menu no quede en 2 lineas en un monitor de 17 pulgadas?. Te agradesco de antemano.
http://i866.photobucket.com/albums/ab223/selectprint_/diseo.jpg
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;}
Andrés: Hola JMiur, ya coloqué los códigos...¡¡¡, ahora si se centran bien, pero si te darás cuenta le aparecen unos puntitos rojos que salen al costado de en cada palabra del menú, como puedo hacer para que se eliminen estos puntos y si se puede dejar la barra de canto a canto pues tiene mejor vista ( http://i866.photobucket.com/albums/ab223/selectprint_/asi_estaba.jpg ), ese es el unico detalle, espero resolverlo pronto, muchas gracias de antemano.
Andrés: Una observación, en Internet explorer no se ven las casillas del menú.
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.
Andrés: No lo puedo creer...¡¡¡
Pensé que era imposible...¡¡¡
Te estoy realmente muy agradecido...¡¡¡
No sabes como he sufrido con esto...¡¡¡
Muchisimas Gracias, que Gusto me da que seas Argentino...¡¡¡
Te mando un abrazo enorme de todo Corazón.
Exitos para ti en TODOS tus proyectos... y que Dios te permita Conocerle... eres un ser muy valioso.
MUCHAS GRACIAS...¡¡¡
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

25 comentarios:

¿Quiere dejar un comentario?

entradas relacionadas

la puerta abierta

las etiquetas

Páginas