Veamos, yo que en que pensaría...
Todo lo trabajaría con Div o capas. A los cuales les daría las propiedades:
CSS:
- position: Absolute.
- z-index: 10;
- float: left.
Javascript
:
Una capa contenedora:
<div id="contenedor">
...Aqui colocaria todos los elementos..
</div>
Luego a la capa contenedora le asigno la propiedad contentEditable, la cual es compatible en FF e IE para capas).
Ajax:
Una clase ajax, para estar actualizando los cambios y pasar los paramatros a php.
Cuales parametros: Datos de actualización del CSS, el cual puede estar combinado con una BD o un XML.
PHP,ASp,JSP:
Recibo los parámetros tipo GET, y efectuó la actualización del XML o BD.
Un ejemplo en vivo, Esto deberia mas o menos funcionar:
--------------------------
<html>
<head>
<script>
function Activar(elemento){
IdElemt = elemento.id;
document.getElementById(IdElemt).contentEditable=' true';
document.getElementById(IdElemt).focus();
}
</script>
<style>
#contenedor{
padding:30px;
margin:30px;
width:80%;
height:100%;
background-color: #eee;
text-align:center;
position:relative;
}
#materia{
width:150px;
height:30px;
position: Absolute;
z-index: 0;
float: left;
background-color: #ffcc00;
}
#materia:hover{
background-color: #ffee66;
}
</style>
</head>
<body>
<div id="contenedor" onClick="Activar(this)">
<div id="materia">Click here...</div>
<div id="materia">Click here...</div>
</div>
</body>