Foros del Web » Creando para Internet » CSS »

Menu horizontal con css

Estas en el tema de Menu horizontal con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/03/2012, 13:23
 
Fecha de Ingreso: diciembre-2011
Mensajes: 151
Antigüedad: 10 años
Puntos: 1
Menu horizontal con css

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:
Ver original
  1. .listacarrito ul li {
  2.     display: inline;
  3.     list-style-type: none;
  4. }
  5.  
  6. .carritosimple ul li {
  7.     display: inline;
  8.     list-style-type: none;
  9.    
  10.     }

Codigo PHP:
Código PHP:
Ver original
  1. <div class="carritosimple">
  2.           <ul>
  3.           <li>Producto:</li>
  4.           <li>Talla:</li>
  5.           <li>Cantidad:</li>
  6.           <li>Precio total:</li>
  7.           </ul>
  8.           </div>
  9.           <?php do { ?>
  10.           <div class="listacarrito">
  11.           <ul>
  12.           <li><?php  echo ObtenerNombreProducto($row_DatosCarrito['idProducto']); ?></li>
  13.           <li>(<?php echo $row_DatosCarrito['strTalla']; ?>)</li>
  14.           <li><?php echo "x". $row_DatosCarrito['intCantidad']; ?></li>
  15.           </ul>
  16.           </div>


Gracias de antemano !
  #2 (permalink)  
Antiguo 18/03/2012, 14:31
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 12 años, 10 meses
Puntos: 306
Respuesta: Menu horizontal con css

Hola
Consulta, ¿por qué no lo dispones dentro de una tabla?
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 18/03/2012, 15:54
 
Fecha de Ingreso: diciembre-2011
Mensajes: 151
Antigüedad: 10 años
Puntos: 1
Respuesta: Menu horizontal con css

Porque quiero aprender hacerlo con css :(
  #4 (permalink)  
Antiguo 18/03/2012, 16:32
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 12 años, 10 meses
Puntos: 306
Respuesta: Menu horizontal con css

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 18/03/2012, 16:43
 
Fecha de Ingreso: diciembre-2011
Mensajes: 151
Antigüedad: 10 años
Puntos: 1
Respuesta: Menu horizontal con css

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?
  #6 (permalink)  
Antiguo 18/03/2012, 16:57
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 12 años, 10 meses
Puntos: 306
Respuesta: Menu horizontal con css

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 18/03/2012, 17:04
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 5 meses
Puntos: 1567
Respuesta: Menu horizontal con css

Cita:
Iniciado por nobo Ver Mensaje
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:
Ver original
  1. <table>
  2. <tr><th>Producto</th><th>Talla</th><th>Cantidad</th><th>Precio</th></tr>
  3. <?php
  4. #aqui el bucle para imprimir las filas, y por cada fila imprimis
  5. echo "<tr><td>$producto</td><td>$talla</td><td>$cantidad</td><td>$precio</td></tr>";
  6. ?>
  7. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 18/03/2012, 17:05
 
Fecha de Ingreso: diciembre-2011
Mensajes: 151
Antigüedad: 10 años
Puntos: 1
Respuesta: Menu horizontal con css

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...
  #9 (permalink)  
Antiguo 18/03/2012, 17:17
 
Fecha de Ingreso: diciembre-2011
Mensajes: 151
Antigüedad: 10 años
Puntos: 1
Respuesta: Menu horizontal con css

Asi lo hice:

Código PHP:
Ver original
  1. <?php
  2.            if ( isset($_SESSION["radio"])) { ?>
  3.           <div class="tabla">
  4.           <div class="col1">Productos</div>
  5.           <div class="col2">Talla</div>
  6.           <div class="col3">Cantidad</div>
  7.           <div class="col4">Precio</div>
  8.           <?php do { ?>
  9.           <div class="col1"><?php  echo ObtenerNombreProducto($row_DatosCarrito['idProducto']); ?></div>
  10.           <div class="col2">(<?php echo $row_DatosCarrito['strTalla']; ?>)</div>
  11.           <div class="col3"><?php echo "x". $row_DatosCarrito['intCantidad']; ?></div>
  12.           <div class="col4"><?php echo ObtenerPrecio($row_DatosCarrito['idProducto']) ?>&euro;</div>
  13.          
  14.           <?php } while ($row_DatosCarrito = mysql_fetch_assoc($DatosCarrito)); ?>
  15.                 </div>
  #10 (permalink)  
Antiguo 19/03/2012, 19:36
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 19 años, 9 meses
Puntos: 998
Respuesta: Menu horizontal con css

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)
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Etiquetas: horizontal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:59.