Lista con varios elementos, <br>s, etc...

[Irreo]

Buenas,

Antes de nada indicar que este post está relacionado con la misma Web y revisión que la mencionada en mi post titulado "Imágenes con elementos estructurales" (no puedo poner link, lo siento...), pero para no salirme del tema he pensado mejor crear otro hilo. Si lo consideráis oportuno podéis fusionarlo con el otro.

Estaba escribiendo el mail de "todo OK" a la empresa revisora, pero dándole un último repaso al tema, me ha quedado la duda de los botones, que supuestamente no estaban bien estructurados.

(La hoja en cuestión se puede encontrar buscando "beatriz cortinas" en Google, y una vez en la web entrar en "Tiendas").


Para los "botones" grises de la visita virtual ANTES tenía esto:

Código HTML:

<div class="span-12 last tpano">
	<div class="tpano-enlace tpano-enlace-primero">
		<ul>
			<li><a href="panorama.php?f=pano_donostia_a_1.xml&amp;p=1" target="_blank">ver foto 360º planta superior San Mart&iacute;n 10&nbsp;<img src="images/ico_nuevaventana.gif" alt="(se abre en ventana nueva)" /></a></li>
			<li>(<a href="panorama_alt.php?p=1">ver alternativa sin flash San Mart&iacute;n 10, superior</a>)</li>
		</ul>
	</div>
	<div class="tpano-enlace">
		<ul>
			<li><a href="panorama.php?f=pano_donostia_a_2.xml&amp;p=2" target="_blank">ver foto 360º planta inferior San Mart&iacute;n 10&nbsp;<img src="images/ico_nuevaventana.gif" alt="(se abre en ventana nueva)" /></a></li>
			<li>(<a href="panorama_alt.php?p=2">ver alternativa sin flash San Mart&iacute;n 10, inferior</a>)</li>
		</ul>
	</div>
</div> 

No estaba del todo satisfecho ya que pensé que cada botón debería ser un elemento de la lista, pero no sabía qué hacer exactamente con los enlaces de dentro del botón (uno para la visita Flash y otro para la alternativa). No podía crear una sublista ya que el elemento superior NO iba a tener título.

Primero lo que he hecho ha sido lo siguiente:

Código HTML:

<ul>
	<li>
		<div class="tpano-enlace tpano-enlace-primero">
			<a href="panorama.php?f=pano_donostia_a_1.xml&amp;p=1" target="_blank">ver foto 360º planta superior San Mart&iacute;n 10&nbsp;<img src="images/ico_nuevaventana.gif" alt="(se abre en ventana nueva)" /></a><br />
			(<a href="panorama_alt.php?p=1">ver alternativa sin flash San Mart&iacute;n 10, superior</a>)
		</div>
	</li>
	<li>
		<div class="tpano-enlace">
			<a href="panorama.php?f=pano_donostia_a_2.xml&amp;p=2" target="_blank">ver foto 360º planta inferior San Mart&iacute;n 10&nbsp;<img src="images/ico_nuevaventana.gif" alt="(se abre en ventana nueva)" /></a><br />
			(<a href="panorama_alt.php?p=2">ver alternativa sin flash San Mart&iacute;n 10, inferior</a>)
		</div>
	</li>
</ul> 

PERO esto no me gusta por el <br /> para separar un elemento de la lista, más que nada porque no sé si es del todo "legal" y no me la voy a jugar en esta última oportunidad.



Así que he pensado hacer esto:

Código HTML:

<div class="span-12 last tpano">
	<ul>
		<li>
			<div class="tpano-enlace tpano-enlace-primero">
				<a href="panorama.php?f=pano_tolosa_1.xml&amp;p=4" target="_blank">ver foto 360º planta inferior Rondilla 11&nbsp;<img src="images/ico_nuevaventana.gif" alt="(se abre en ventana nueva)" /></a>&nbsp;o bien&nbsp;<a href="panorama_alt.php?p=4">ver alternativa sin flash Rondilla 11, inferior</a>
			</div>
		</li>
		<li>
			<div class="tpano-enlace">
				<a href="panorama.php?f=pano_tolosa_2.xml&amp;p=5" target="_blank">ver foto 360º planta superior Rondilla 11&nbsp;<img src="images/ico_nuevaventana.gif" alt="(se abre en ventana nueva)" /></a>&nbsp;o bien&nbsp;<a href="panorama_alt.php?p=5">ver alternativa sin flash Rondilla 11, superior</a>
			</div>
		</li>
	</ul>
</div> 

En la página actual se puede apreciar que el último botón (abajo del todo) tiene esta última propuesta mia, mientras que el resto tienen el <br /> dentro de la lista...

Me gustaría oir vuestra opinión respecto a esto... he intentado hacer que el elemento de la lista aparente ser una única línea con dos enlaces, y creo que está bien, pero antes de enviar el mail del OK me gustaría saber si tenéis alguna otra idea.

Gracias!

[PatomaS]

Hola

Bueno, el tema es un poco relativo; dependiente de opiniones, diría yo.

Sobre el br, en realidad no está mal, semánticamente lo estás usando para lo que es, aunque si no quieres usarlo y esa estructura es la qu ete gusta, siempre puedes usar CSS para generar dicho salto, por ejemplo, envolviendo la parte de antes o de después del salto y dándole display: block; o si usas floats, un clear:both.

Sobre el tener sublistas sin título antes, no hay problema con eso, solo deben ser lógicas, en el caso de que consideres los vínculos de los botones una gran lista de vínculos, las subdivisiones por área o cateogría, tienen sentido y por lo tanto son perféctamente válidos.

Por otro lado, la última opción que muestras, también es adecuada.

Si yo tuviera que elegir, de lo que nos muestras, me quedaría con algo como:

Código:

<div> --> contenedor del área (puede ser otro)
	<ul>	--> lista de cosas (vínculos)
		<li></li>	--> un bloque de vínculos en su propio ul
		<li></li>	--> otro bloque de vínculos en su propio ul
	</ul>
</div>

Que es parecido algo entre la primera y la segunda opción y algo que mencionabas. Luego las separaciones visuales, las haría con css y trataría de evitar divs en la lista a menos que fuera totalmente inevitable.

Felicidad