Menu horizontal con css

[nobo]

Hola me gustaria crear algo asi:




Pero no se como hacer que coincida la talla con la talla del producto etc... Ni darle un padding al texto, solo para desplazar el texto a la derecha, pero manteniendo el Producto a la izquierda. No se si me explico.... Manteniendo el " Producto: "
tal y como se ve en la imagen. Pero dando espacio entre la "talla : " "unidad : " etc... E intentar que cuadre con el texto de abajo... No se como explicarlo.

Codigo CSS:

Código CSS:

.listacarrito ul li {
    display: inline;
    list-style-type: none;
}
 
.carritosimple ul li {
    display: inline;
    list-style-type: none;
    
    }
 

Codigo PHP:

Código PHP:

<div class="carritosimple">
          <ul>
          <li>Producto:</li>
          <li>Talla:</li>
          <li>Cantidad:</li>
          <li>Precio total:</li>
          </ul>
          </div>
          <?php do { ?>
          <div class="listacarrito">
          <ul>
          <li><?php  echo ObtenerNombreProducto($row_DatosCarrito['idProducto']); ?></li>
          <li>(<?php echo $row_DatosCarrito['strTalla']; ?>)</li> 
          <li><?php echo "x". $row_DatosCarrito['intCantidad']; ?></li>
          </ul>
          </div>
 

Gracias de antemano !

[C2am]

Hola
Consulta, ¿por qué no lo dispones dentro de una tabla?

[nobo]

Porque quiero aprender hacerlo con css :(

[C2am]

Buena respuesta.
Pero mi pregunta va dirigida a que lo que pretendes se logra con una tabla, o emulando una tabla.
Es decir anchos iguales para cada celda de cada "columna".
Ejemplo

saludos

[nobo]

Ajam! Si!!! Algo asi...


Peeeeeeeeeeeeeero !!! Los productos y las tallas lo cojo de una consulta a la bd... Asi que igual una vez tiene 3 filas otra tiene 2 ...

Es decir la primera tabla de producto, talla y eso si sera fija. Pero la que contiene los productos no...

Se puede hacer igual?

[C2am]

Primero lo primero, será la primera "fila" la que siempre estará, lo cual es lógico ya que es el encabezado.
Luego , sino entendí mal, algunos de los datos puede faltar: Ejemplo

Simplemente lo dejas vacío.
Saludos

[emprear]

Iniciado por nobo

Porque quiero aprender hacerlo con css :(

amigo @nobo, me parece muy bien que quieras aprender css, pero primero tenés que aclarar "Que es lo que queres hacer"... esto ya dejo de ser un menu horizontal, es una tabla en html generada con datos de extraidos de una bd via php.

Te sugiero que dejes el aprendizaje de css xhtml para el futuro y nos aboquemos ahora ala solución puntual de tu problema

Para mostrar esos datos usas una tabla, como ya te lo indico @C2am, sencillamente porque "PARA ESO SE HICIERON LAS TABLAS EN HTML", mostrar datos tabulados, incluso imágenes...

Código PHP:

<table>
<tr><th>Producto</th><th>Talla</th><th>Cantidad</th><th>Precio</th></tr>
<?php
#aqui el bucle para imprimir las filas, y por cada fila imprimis
echo "<tr><td>$producto</td><td>$talla</td><td>$cantidad</td><td>$precio</td></tr>";
?>
</table>
 

No me queda muy claro si precio total es una columna o si es precio(unitario) y precio(total), bueno pero es apenas un detalle que tendrás que resolver.
Si queres podes darle clss a las celdas y tabla y estilizarla con css
En conclusión, usa una tabla que esta "Perfecto !!!!"
Si alguno de los valores te devuelve un valor vacio podés hacer esto
echo "<tr><td>$producto<!--fix --></td><td>$talla<!--fix --></td><td>$cantidad<!--fix --></td><td>$precio<!--fix --></td></tr>";
Para que la tabla se renderice correctamente
Saludos

[nobo]

no no no!! Perdona igual no me exprese bien ;)

Digo que igual en lugar de haber 3 productos puede haber 5 o 2....
No se si estara bien, lo puse con un do while para que lo repita...

Pero se me descuadra, no se si sera porque el nombre del producto es muy largo...

Lo que he hecho ha sido darle un width mas grande...

[nobo]

Asi lo hice:

Código PHP:

<?php
           if ( isset($_SESSION["radio"])) { ?>
          <div class="tabla">
          <div class="col1">Productos</div>
          <div class="col2">Talla</div>
          <div class="col3">Cantidad</div>
          <div class="col4">Precio</div>
          <?php do { ?>
          <div class="col1"><?php  echo ObtenerNombreProducto($row_DatosCarrito['idProducto']); ?></div>
          <div class="col2">(<?php echo $row_DatosCarrito['strTalla']; ?>)</div> 
          <div class="col3"><?php echo "x". $row_DatosCarrito['intCantidad']; ?></div>
          <div class="col4"><?php echo ObtenerPrecio($row_DatosCarrito['idProducto']) ?>&euro;</div>
          
          <?php } while ($row_DatosCarrito = mysql_fetch_assoc($DatosCarrito)); ?>
                </div>
 

[webosiris]

nobo, lo que tu quieres mostrar son datos tabulares, y para eso se usa... UNA TABLA!

las tablas están mal usarlas cuando solo se usan para posicionar elementos (menú, sidebar, etc) de una página, pero son totalmente apropiadas PARA MARCAR DATOS TABULARES (de hecho, SON LA ÚNICA FORMA correcta de hacerlo)