Sin espacios sin separación en HTML

https://stackoverflow.com/questions/93171

01-07-2019
|

Pregunta

Tengo una aplicación web de bolos que permite la entrada de información bastante detallada, cuadro por cuadro.Una cosa que permite es rastrear qué bolos se derribaron en cada bola.Para mostrar esta información, hago que parezca una estantería de alfileres:

o o o o
 o o o
  o o
   o

Se utilizan imágenes para representar los pines.Entonces, para la última fila, tengo 4 etiquetas img y luego una etiqueta br.Funciona genial...principalmente.El problema está en los navegadores pequeños, como IEMobile.En este caso, donde hay 10 u 11 columnas en una tabla, y puede haber una serie de pines en cada columna, IE intentará reducir el tamaño de la columna para que quepa en la pantalla, y termino con algo como esto :

o o o
  o
o o o
 o o
  o

o o
o o
o o
 o
o o
 o

La estructura es:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

No hay espacios en blanco dentro del div interno.Si miras esta página en un navegador normal, debería mostrarse bien.Si lo miras en IEMobile, no es así.

¿Alguna pista o sugerencia?Tal vez algún tipo de¿Eso en realidad no agrega un espacio?

Seguimiento/Resumen

He recibido y probado varias buenas sugerencias, que incluyen:

Genere dinámicamente la imagen completa en el servidor.Buena solución, pero realmente no se ajusta a mis necesidades (alojada en GAE) y un poco más de código del que me gustaría escribir.Estas imágenes también podrían almacenarse en caché después de la primera generación.
Utilice la declaración de espacios en blanco CSS.Buena solución basada en estándares, falla estrepitosamente en la vista de IEMobile.

Lo que terminé haciendo

agacha la cabeza y murmura algo

Sí, así es, un gif transparente en la parte superior del div, con el tamaño que necesito.El código final (simplificado) se ve así:

<table class="game">
    <tr class="analysis leave">
        <!-- ... -->
        <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
        <!-- ... -->
    </tr>
</table>

Y CSS:

div.smallpins {
    background: url(/img/lane.gif) repeat;
    text-align: center;
    padding:0;
    white-space: nowrap;
}
div.smallpins img {
    width:1em;
    height:1em;
}
div.smallpins img.spacer {
    width:4.5em;
    height:0px;
}
table.game tr.leave td{
    padding:0;
    margin:0;
}
table.game tr.leave .smallpins {
    min-width:4em;
    white-space: nowrap;
    background: none;
}

PD.No, no vincularé el punto claro de otra persona en mi solución final :)

Solución

Puedes probar la opción CSS "nowrap" en el div que lo contiene.

{white-space: nowrap;}

No estoy seguro de qué tan ampliamente se apoya esto.

Otros consejos

Solucioné este tipo de problema en el pasado creando dinámicamente la imagen completa (con la disposición de pines adecuada) como una sola imagen.Si está utilizando ASP.NET, esto es bastante fácil de hacer con llamadas GDI.Simplemente crea dinámicamente la imagen con la colocación de pines y luego la muestra en la página como una sola imagen.Elimina todos los problemas de alineación de la imagen (juego de palabras).

¿Por qué no tener una imagen de todos los resultados posibles de los pines?No jugar con los diseños de los navegadores: una imagen es una imagen

Generarlos sobre la marcha almacenando en caché las imágenes creadas para su reutilización.

Lo que tendría más sentido es cambiar qué imagen se muestra sobre la marcha:

<div id="pin-images">
    <img src="fivepins.jpg" />
    <img src="fourpins.jpg" />
    <img src="threepins.jpg" />
    <img src="twopins.jpg" />
    <img src="onepin.jpg" />
</div>

Dado que de todos modos estás usando imágenes, ¿por qué no generar una imagen que represente todo el diseño sobre la marcha?Puedes usar algo como Dios o ImagenMagia para hacer el truco.

Añade un "nowrap" en tu etiqueta td...

Dado que busca la máxima compatibilidad, ¿ha considerado generar una única imagen que represente el marco?

Si está usando PHP, puede usar GD para crear dinámicamente imágenes que representen los marcos basándose en la misma entrada que usaría para crear el HTML en su pregunta.La mayor ventaja de hacer esto es que cualquier navegador que pueda mostrar un PNG o GIF podrá mostrar su marco.

Esto ha estado aquí por un tiempo, pero estaba revisando esto y encontré esta publicación.No importa lo que hice, no pude lograr que las imágenes aparecieran seguidas.Pase lo que pase, terminarían.Lo intenté todo.

Luego descubrí que hay una configuración en el cliente donde pueden seleccionar la vista como 1) Columna única, 2) Vista de escritorio y 3) Ajustar ventana.Según MSDN, se supone que el valor predeterminado es ajustarse a la ventana.Pero el teléfono móvil IE de mi esposa tenía por defecto una sola columna.ASÍ QUE NO IMPORTA QUÉ, envolvería todo en una sola columna.Si cambié a cualquiera de las otras 2 opciones, se veía bien.

Bueno, puedes configurar esto con una metaetiqueta:

<meta name="MobileOptimized" content="320">

establecerá el ancho de la página en 320px.No sé cómo hacer que pase a modo automático. Si alguien lo sabe, publíquelo.

Esto NO funciona en dispositivos Blackberry anteriores a v4.6: quedará atrapado con una sola columna a menos que el usuario cambie manualmente a la vista de escritorio.Con 4.6 o posterior, se supone que funciona lo siguiente, pero no lo he probado:

<meta name="viewport" content="width=320">

Es posible que necesites un espacio real inmediatamente después del punto y coma en

Pruébalo con el <div> etiqueta en la misma línea que <td>...</td>

Puede que haya entendido mal lo que buscas, pero creo que puedes hacer lo que yo he hecho. para logotipos en un mapa.

Se dibuja el mosaico de fondo del mapa, luego se le dice a cada imagen que flote hacia la izquierda y se le dan algunos márgenes interesantes para que se coloquen como quiero (ver fuente para ver cómo se hace).

Utilice el carácter de unión de palabras, U+2060 (es decir, ⁠)

Quizás este sea sólo un caso en el que se podrían utilizar tablas para aplicar el diseño.No es óptimo y sé que se supone que no debes usar tablas para cosas que no son tabulares, pero podrías hacer algo como esto.

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

¿Has intentado definir un ancho para la columna?Como <td width="123px"> o <td style="width:123px">.¿Y tal vez también para el div?

Ahí está el nobr etiqueta html;Sin embargo, no estoy seguro de qué tan bien respaldado esté esto.
Podrías usar CSS desbordamiento:visible y espacios sin separación entre sus elementos (imágenes), pero ningún otro espacio en blanco en el html para esas líneas.

Tenga imágenes separadas para cada arreglo posible. de cada fila.

Eso solo requeriría 30 imágenes (16+8+4+2)

Puedes reemplazar img con span y usar una imagen de fondo con cada span, dependiendo de una clase CSS:

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

(personalmente creo que es mejor tener 4 líneas con una etiqueta p en lugar de un solo div con br)

En CSS puedes tener algo como esto:

p.smallpins {
    margin: 0;
    padding: 0;
    height: 11px;
    font-size: 1px;
}
p.smallpins span {
    width: 11px;
    background-image: url(nopinsmall.gif);
    background-repeat: ...
    background-position: ...
}
p.smallpins span.pin {
    background-image: url(pinsmall.gif);
}

¿No sería más fácil si lo hicieras así?

<div id="container">
  <div id="row1">
    <img/><img/><img/><img/>
  </div>
  <div id="row2">
    <img/><img/><img/>
  </div>
  <div id="row3">
    <img/><img/>
  </div>
  <div id="row4">
    <img/>
  </div>
</div>

¿Por qué su CSS manejaría la alineación?

.container div{
  text-align:center;
}

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow