[SOLUCIONADO] ¿Hacer un mosaico con article o con div?

[macaluan]

Hola

Quiero hacer una especie de mosaico en la pagina principal de la web, y aunque habia conseguido lo que queria a base de tablas, ahora quiero hacer lo mismo pero con CSS.

ahora mismo lo hice con este codigo, que es como se ve en la imagen

<div>
<p>
<a>

pero no me deja centar todo el <div> en la pagina, y cuando lo hace, me descoloca las filas horizontales (<p>)

alguna manera de hacerlo? acabo de ver que la mejor opcion de codigo seria;

<article>
<section>

[pzin]

Pon el código CSS que estés usando. El elemento que uses da un poco lo mismo en cuanto al CSS (diseño) en si.

[macaluan]

Te pongo un poco porque el CSS que estoy usando es bastante largo pero repetitivo.
Veras que tengo puesto que la imagen cambie al pasar el cursor por las fotos, en los botones con letras tambien cambia el fondo y ademas tiene hipervinculo y en las que no hay nada, las dejo vacias, solo pongo el alto y ancho.

Pongo solo de las dos primeras casillas, el resto es igual.

Código CSS:

#mosaico {
    float:left;
    margin: auto;
    margin-top: 50px;
    position: relative;
}
 
#mosaico a { 
     list-style-type: none;
}
 
#mosaico a.uno-uno {
    display:block;
    width: 200px;
    height: 133px;
}
#mosaico a.uno-dos {
    display:block;
    width: 200px;
    height: 133px;
    background: url(Miniaturas%20index/Desmarcadas/01-02.jpg);
    background-repeat: no-repeat;
    -webkit-transition-duration: 0.2s;
}
#mosaico a.uno-dos:hover {
    width: 200px;
    height: 133px;
    background: url(Miniaturas%20index/Marcadas/01-02.jpg);
    background-repeat: no-repeat;
 

[pzin]

Pues si quieres centrarlo, bastaría con dejar de flotar el elemento #mosaico.

Usa la opción highlight para cuando publiques código.

[macaluan]

Iniciado por pzin

Pues si quieres centrarlo, bastaría con dejar de flotar el elemento #mosaico.

Usa la opción highlight para cuando publiques código.

Gracias pzin.

Respecto a lo de quitar el float, no me funciona, porque se me alinean todas las columnas en el lado izquierdo

[pzin]

¿#mosaico no es el contenedor? No puedes usar un identificador en más de un elemento, debe ser único. Pon el código HTML a ver qué tienes ahí. Usa highlight.

[macaluan]

Iniciado por pzin

¿#mosaico no es el contenedor? No puedes usar un identificador en más de un elemento, debe ser único. Pon el código HTML a ver qué tienes ahí. Usa highlight.

lo mismo tengo un lio de narices

cada <p> es una columna vertical de 5 fotos cada una. Hay 6 columnas en total, te pongo el codigo de dos solo porque son todas iguales, solo cambia la clase de cada una de ellas.

Código HTML:

<div>
    <p id="mosaico">
      <a class="uno-uno">
      </a>
      <a class="dos-uno">
      </a>
      <a class="tres-uno">
      </a>
      <a class="cuatro-uno">
      </a>
      <a class="cinco-uno">
      </a>
    </p>
    <p id="mosaico">
      <a class="uno-dos">
      </a>
      <a class="dos-dos" href="">
      </a>
      <a class="tres-dos">
      </a>
      <a class="cuatro-dos">
      </a>
      <a class="cinco-dos">
      </a>
    </p>
 

[pzin]

Es una pequeña barbaridad lo que estás haciendo ahí. No tiene mucho sentido semántico y, como ya decía, no puedes hacer uso del mismo identificador más de una vez, porque debe de ser único.

Pero bueno, para centrarlo todo, tienes que hacer lo que ya te dije, centrar el contenedor, que viendo ahora el HTML, es esa división:

Código CSS:

div {
  width: 1200px; /* 6 elementos por 200 píxeles */
  margin: 0 auto;
}
 

Obviamente será mejor que le pongas un identificador o una clase al elemento.

[macaluan]

Iniciado por pzin

Es una pequeña barbaridad lo que estás haciendo ahí. No tiene mucho sentido semántico y, como ya decía, no puedes hacer uso del mismo identificador más de una vez, porque debe de ser único.

Pero bueno, para centrarlo todo, tienes que hacer lo que ya te dije, centrar el contenedor, que viendo ahora el HTML, es esa división:

Código CSS:

div {
  width: 1200px; /* 6 elementos por 200 píxeles */
  margin: 0 auto;
}
 

Obviamente será mejor que le pongas un identificador o una clase al elemento.

Gracias pzin nuevamente.

Imagino que habrá muchos fallos ahí metidos, pero no soy un experto en esto del html, voy "aprendiendo" conforme se me aparecen los problemas. Pero no encontré mejor manera de hacer ese mosaico y que cada foto cambiara individualmente al pasar el ratón por encima. Hay otra mas sencilla de hacerlo?.

Pensé que lo que no se podía repetir eran las clases, y si los identificadores....y resulta que es al revés, gracias nuevamente. Interpreto que no se pueden repetir siempre y cuando estén dentro de la misma clase? o no se pueden repetir en todo el CSS?.

Respecto a lo de centrar, finalmente conseguí hacerlo esta mañana, efectivamente, poniendo un identificador al elemento y dándole el ancho total con "margin: auto" se soluciono. Por cierto, lo del "0" que pones no lo entiendo, lo he puesto y no note diferencia a no tenerlo, es necesario?

Y por ultimo, y ya no molesto mas con mis dudas, hay alguna forma de unir dos <a>? es decir, dos de los cuadros del mosaico?. En las tablas se podía hacer con el colspan y rowspan, pero aquí no tengo ni idea. Si te fijas en la primera foto que subí, hay dos cuadros vacíos en el centro, y quiero poner un botón de 400px de largo que redireccione a otra pagina. hay manera de hacerlo?

Gracias de antemano, y mil perdones por este lió.

[pzin]

Iniciado por macaluan

Pensé que lo que no se podía repetir eran las clases, y si los identificadores....y resulta que es al revés, gracias nuevamente. Interpreto que no se pueden repetir siempre y cuando estén dentro de la misma clase? o no se pueden repetir en todo el CSS?.

Donde no se puede repetir es en el documento HTML. Acuérdate que un identificador identifica un elemento y las clases son para un tipo (o una clase) de elementos.

Iniciado por macaluan

Por cierto, lo del "0" que pones no lo entiendo, lo he puesto y no note diferencia a no tenerlo, es necesario?

Si hay un solo valor, se refiere a todos. Si hay dos valores, el primero se refiere para arriba y abajo y el segundo valor para izquierda y derecha. Si hay tres valores, el primero es arriba, el segundo para los laterales y el tercero para abajo. Si hay cuatro valores es, por orden, arriba, derecha, abajo e izquierda.

En este caso, al haber dos valores, significa que arriba y abajo el margen es cero y los laterales son automáticos.

Esta regla vale para varios atributos CSS.

Iniciado por macaluan

Y por ultimo, y ya no molesto mas con mis dudas, hay alguna forma de unir dos <a>? es decir, dos de los cuadros del mosaico?. En las tablas se podía hacer con el colspan y rowspan, pero aquí no tengo ni idea. Si te fijas en la primera foto que subí, hay dos cuadros vacíos en el centro, y quiero poner un botón de 400px de largo que redireccione a otra pagina. hay manera de hacerlo?

Las tablas son tablas. Tienes que irte olvidando de la forma de trabajar con tablas.

Si quieres hacer eso, simplemente ponle el doble de ancho.

[macaluan]

Iniciado por pzin

Donde no se puede repetir es en el documento HTML. Acuérdate que un identificador identifica un elemento y las clases son para un tipo (o una clase) de elementos.



Si hay un solo valor, se refiere a todos. Si hay dos valores, el primero se refiere para arriba y abajo y el segundo valor para izquierda y derecha. Si hay tres valores, el primero es arriba, el segundo para los laterales y el tercero para abajo. Si hay cuatro valores es, por orden, arriba, derecha, abajo e izquierda.

En este caso, al haber dos valores, significa que arriba y abajo el margen es cero y los laterales son automáticos.

Esta regla vale para varios atributos CSS.



Las tablas son tablas. Tienes que irte olvidando de la forma de trabajar con tablas.

Si quieres hacer eso, simplemente ponle el doble de ancho.

Gracias pzin,

ahora funciona perfectamente, ayer poniéndole el doble de ancho también no me funcionaba y me abría hueco con la siguiente columna, sera por todos los otros fallos que tenia.

Gracias nuevamente