Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/03/2013, 11:19
walol
 
Fecha de Ingreso: marzo-2013
Mensajes: 5
Antigüedad: 11 años, 1 mes
Puntos: 0
Problema con CSS mostrando datos de MySql

Hola!..

Acabo de conocer el foro, y me inscribí para ver si pueden ayudarme en mis dudas de noob xD, y así seguir aprendiendo.. les agradezco de antemano el tiempo y dedicación para los desvalidos de conocimiento!..

Sucede que tengo una base de datos pequeña, de sólamente una tabla, con productos dentales. Ahora, necesito mostrar esos productos (actualmente los muestro poniéndolos manualmente en el código HTML, por eso estoy creando este administrador, para el dueño de la página).

El problema es que no funciona el código que, en teoría, debería mostrarme los datos con el estilo que le puse :(..

Este es el código:

Código PHP:
Ver original
  1. <?php
  2.  
  3. include("conexion.php");
  4.  
  5. $request = "SELECT * FROM productos WHERE tipo='Cementos'";
  6. $result = mysqli_query($conexion,$request);
  7.  
  8. echo"<div class='bordes'>
  9.     <div align='center'>
  10.         <h1><strong>CEMENTOS</strong></h1>
  11.     </div>
  12. </div>";
  13.  
  14. echo "<div class='CSSTableGenerator'><table>";
  15. echo "<tr>";
  16. while ($row = mysqli_fetch_array($result))
  17. {
  18.     echo "<td>";
  19.     echo "<p><strong>".$row['nombre']."</strong></p><p><strong>".$row['laboratorio']. "</strong></p>";
  20.     echo "</td>";
  21.     echo "<br/>";
  22. }
  23. echo "</tr>";
  24.  
  25. echo "</table></div>";
  26.  
  27.  
  28. mysqli_close($conexion);
  29. ?>

y el CSS

Código CSS:
Ver original
  1. .CSSTableGenerator {
  2. margin:0px;padding:0px;
  3. width:100%; box-shadow: 10px 10px 5px #888888;
  4. border:1px solid #000000;
  5.  
  6. -moz-border-radius-bottomleft:0px;
  7. -webkit-border-bottom-left-radius:0px;
  8. border-bottom-left-radius:0px;
  9.  
  10. -moz-border-radius-bottomright:0px;
  11. -webkit-border-bottom-right-radius:0px;
  12. border-bottom-right-radius:0px;
  13.  
  14. -moz-border-radius-topright:0px;
  15. -webkit-border-top-right-radius:0px;
  16. border-top-right-radius:0px;
  17.  
  18. -moz-border-radius-topleft:0px;
  19. -webkit-border-top-left-radius:0px;
  20. border-top-left-radius:0px;
  21. }.CSSTableGenerator table{
  22. width:100%;
  23. height:100%;
  24. margin:0px;padding:0px;
  25. }.CSSTableGenerator tr:last-child td:last-child {
  26. -moz-border-radius-bottomright:0px;
  27. -webkit-border-bottom-right-radius:0px;
  28. border-bottom-right-radius:0px;
  29. }
  30. .CSSTableGenerator table tr:first-child td:first-child {
  31. -moz-border-radius-topleft:0px;
  32. -webkit-border-top-left-radius:0px;
  33. border-top-left-radius:0px;
  34. }
  35. .CSSTableGenerator table tr:first-child td:last-child {
  36. -moz-border-radius-topright:0px;
  37. -webkit-border-top-right-radius:0px;
  38. border-top-right-radius:0px;
  39. }.CSSTableGenerator tr:last-child td:first-child{
  40. -moz-border-radius-bottomleft:0px;
  41. -webkit-border-bottom-left-radius:0px;
  42. border-bottom-left-radius:0px;
  43. }.CSSTableGenerator tr:hover td{
  44. background-color:#e5e5e5;
  45. }
  46. .CSSTableGenerator td{
  47. vertical-align:middle;
  48.     background:-o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );    background:-moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");  background: -o-linear-gradient(top,#ffffff,e5e5e5);
  49. background-color:#ffffff;
  50. border:1px solid #000000;
  51. border-width:0px 1px 1px 0px;
  52. text-align:left;
  53. padding:7px;
  54. font-size:10px;
  55. font-family:Arial;
  56. font-weight:normal;
  57. color:#000000;
  58. }.CSSTableGenerator tr:last-child td{
  59. border-width:0px 1px 0px 0px;
  60. }.CSSTableGenerator tr td:last-child{
  61. border-width:0px 0px 1px 0px;
  62. }.CSSTableGenerator tr:last-child td:last-child{
  63. border-width:0px 0px 0px 0px;
  64. }
  65. .CSSTableGenerator tr:first-child td{
  66.     background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);
  67. background-color:#cccccc;
  68. border:0px solid #000000;
  69. text-align:center;
  70. border-width:0px 0px 1px 1px;
  71. font-size:14px;
  72. font-family:Arial;
  73. font-weight:bold;
  74. color:navy;
  75. }
  76. .CSSTableGenerator tr:first-child:hover td{
  77.     background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);
  78. background-color:#cccccc;
  79. }
  80. .CSSTableGenerator tr:first-child td:first-child{
  81. border-width:0px 0px 1px 0px;
  82. }
  83. .CSSTableGenerator tr:first-child td:last-child{
  84. border-width:0px 0px 1px 1px;
  85. }

Me muestra lo que estoy solicitando, pero sin el estilo en cuestión..
No creo que sea problema del CSS, pues me funciona con los productos agregados manualmente...
Qué podrá ser?

Saludos y muchísimas gracias por su tiempo!