Quiero dejar de usar tablas y de a poco acostumbrarme a capas y listas.
Arme una lista de articulos con sus logos, pero cada logo, al ser mas alto que el texto, « empuja » los logos inferiores hacia un costado.
El esqueleto del Dist tiene un estilo
height: auto!important; /* para los browsers buenos */
height: 100px; /* para IE5+ */
min-height: 100px; /* para los browsers buenos */
}
Con esto ya se ve bien, el height y el min-height es por si el texto no da el alto del logo, todo siga como si nada... y el logo sea el que determine la composición de la pagina
MetroDel escribió:
Hola:
Quiero dejar de usar tablas y de a poco acostumbrarme a capas y listas.
Arme una lista de articulos con sus logos, pero cada logo, al ser mas alto que el texto, "empuja" los logos inferiores hacia un costado.
El esqueleto del Dist tiene un estilo <li class="hentry"> que no pude encontrar
Use este estilo:
<style type="text/css">
.lista1 {
border-bottom: 1px solid gray;
padding: 1px 2px 2px 2px;
}
</style>
y este codigo para el bucle:
<ul>
<div style="text-align: left">
<B_articulos10> [(#ANCRE_PAGINATION)] <BOUCLE_articulos10(ARTICLES) {par date}{inverse} {pagination 10} {id_rubrique!=24}>
</BOUCLE_articulos10>
[<p class="pagination">(#PAGINATION)</p>]
</B_articulos10>
</div>
El resultado fallido puede verse en: http://www.sindicatodelsubte.com.ar/spip.php?page=prueba
En donde me equivoco?
Saludos y gracias!
Quique
------------------------------------------------------------------------
Primero que todo un gran saludo y mis felicitaciones por entrar en el web del siglo XXI, recuerdo que a mi me costó mucho trabajo dejar las tablas como herramienta para maquetar sitios.
Una sugerencia general, no intentes adaptas los esqueletos dist, mientras no estés muy familiarizado con CSS y con criterios como la herencia y la cascada que cuestan bastante, básicamente son los criterios que determinan que reglas se usan para maquetar cuando hay mucho código y sitios complejos como cualquier sitio con esqueletos SPIP.
Lo que yo hice por años fue hacer mis propios esqueletos desde cero con cosas básicas en CSS que poco a poco fui haciendo más complejas, en la medida en que fui aprendiendo más trucos de CSS y la forma en que puedo aprovechar mejor el HTML correctamente estructurado, además -por supuesto- de bucles y balizas cada vez más complejos.
Sin más preámbulo vamos sobre tu esqueleto. Excelente idea esa de ir haciendo pruebas con los bucles en páginas aparte. Observaciones puntuales:
NO metas código CSS en el cuerpo (ya lo habrás notado) es mejor que se quede en la sección dentro de la cabeza (head)
No creas que los browser no tienen una hoja de estilo, esa hoja de estilo determina mucho del comportamiento, así por ejemplo las listas
se supone que siempre tendrán que tener una viñeta, hay algunos trucos para resetear la hoja de estilos por omisión, peor úsalos con cuidado a veces no salen muy bien.
Específicamente lo que uno hace para quitarle las viñetas a las listas es algo como:
ul{
list-style: none;
padding: 0;
margin: 0;
}
Otro tema es el tema de las imágenes, las imágenes por omisión flotan, para que no se generen huecos, pero en casos como este donde tienes el logo del artículo uno debajo del otro el hecho que flotan lo hace ver terrible. Considera dos técnicas, por una parte has que los logos de las secciones se publiquen más pequeños y por otro lado define que cada li corte, es decir no permita que las imágenes (ni ningún otro elemento) floten sobre él, eso se hace aplicando las
En el adjunto puedes ver un ejemplo de la aplicación de estos criterios en tu esqueleto, no lo probé así que puede tener algún defecto.
Quiero dejar de usar tablas y de a poco acostumbrarme a capas y listas.
Arme una lista de articulos con sus logos, pero cada logo, al ser mas alto que el texto, « empuja » los logos inferiores hacia un costado.
El esqueleto del Dist tiene un estilo