Ayuda: Como Cargar datos de MySQL con CSS

Hola Amigos, espero puedan ayudarme (Siempre lo logran jeje )

Estoy en algo un tanto largo, pero se que hay como lograrlo.

Tengo una base de datos que contiene un directorio de MATERIAS (matematicas, fisica, etc.), cada materia tiene un profesor, y cada profesor tiene un aula específica donde dará clases. Esa es la base de datos, nada complicado con eso. Lo que quiero es poder mostrar el directorio de MATERIAS, pero que carguen con CSS.

Pueden ver esta imagen y entenderme un poco mejor:

[url=http://www.tanoqui.com/ejemplo/ejemplo.html][/url]

Como pueden ver, lo que quiero es que en la parte izquierda cargue el contenido de MATERIAS, pero con CSS, porq en tablas se ve muy feo . Luego, que al dar click sobre cualquier materia, aparezca el contenido de esta en la columna de la derecha, y que aquí tambien tenga la opción de volver a dar click en los resltados, para cargar más contenido.

Lo he hecho antes, pero de la manera sencilla, que es dibujando una tabla con un ECHO, pero esta vez quiero utilizar CSS, y que los contenidos carguen en el mismo sitio, sin necesidad de actualizar la página. Supongo que para eso necesito AJAX?? . .

Bueno, esa es mi pregunta, espero me hayan entendio, y espero puedan ayudarme.

Muchas gracias Amigos!! . .

Hola,
si te he entendido bien lo que buscas es crear un "panel" en un lateral a modo de menú, el cual muestra una serie de temas que se encuentran en una tabla.
Para hacer eso, sin tablas, lo mejor es como dices con CSS, pero debes ayudarte con PHP. Para ser exacto, debes acceder a la base de datos y obtener el listado de MATERIAS en un array (hay miles de manuales para esto en internet). Después simplemente creas una lista en HTML con un foreach de PHP:

Código PHP :

<div class="menu_materias">
  <ul>
    <?php foreach($materias as $materia) : ?>
      <li><a href="[enlace]"><?php echo $materia; ?></a></li>
    <?php endforeach; ?>
  </ul>
</div>

Una vez tienes esto, en el CSS debes establacer la apariencia del menú:

Código HTML :

.menu_materias {
  width: [ancho];
  height: [alto];
  position: absolute;
  top: 10px;
  left: 10px;
}
.menu_materias ul { 
  list-style-type: none;
}
.menu_materias ul li{
  padding: 5px;
  background-color: blue; /* por ejemplo */
}
.menu_materias ul li a{
  display: block;
  width: 100px;
  text-decoration: none;
  background-color: red;  /* por ejemplo */
}

Este CSS es un ejemplo, deberías personalizarlo para tu aplicación.

En cuanto a Ajax, si el menú no va a cambiar con mucha frecuencia (cosa que supongo) no creo que lo necesites, ya que cada vez que accedas a alguna opción del menú se actualizaría con el contenido de la base de datos al acceder a otro enlace.

Espero te sirva esta información

Hola Toth, muchas gracias por tu ayuda!!! . . . , ya lo estoi intentando!!, espero me funcione!!! . . . !!!

Muchas GRACIAS!!

Intenta con las tablas jquery , tienen un efecto excepsional, y quedan geniales, el tema es ver si encontras una vertical porque generalmente los ejemplos que tenes en la web, son horizontales.

chekiate esto:
http://www.stilbuero.de/jquery/tabs/#fragment-3

PD: Tene cuidado y testea bien, porque muchas veces se crean conflictos entre los js.