duda con maquetacion

jorgealvarezossandon · #1 (**permalink**) 10/12/2011, 16:34

Tengo que hacer un plan de estudio de una carrera en particular y soy bastante nuevo en esto y necesito ayuda ya que quiero hacer algo bastante parecido a esto http://www.unap.cl/admision/carreras/pregrado/2012/mallas/23015.pdf mi pregunta es como maqueto en css sin necesidad de hacer el dibujo de cada asignatura en photoshop y no tener problema con los espacios que sobran producto de que los semestres no tienen el mismo numero de asignaturas.

ojala me puedan ayudar

gracias¡¡¡

cristian_cena · #2 (**permalink**) 10/12/2011, 17:12

podes crear una tabla y darle borde blanco y padding a los td.

emprear · #3 (**permalink**) 10/12/2011, 23:33

si, darle cellpadding y cellspacing a la tabla, borde a todas las celdas, y luego crear una clase sin borde para las celdas que lo requieran

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
body{
background-color: #45659A;
}
 
table{
border-spacing: 10px;
}
 
td {
border: solid #000 1px;
padding: 10px;
}
 
td.noborde {
border: none;
}
 
/*]]>*/
</style>
</head>
<body>
<table>
<tr>
<td>AAAAAAA</td><td>BBBBBBB</td><td>CCCCCCCC</td>
</tr>
<tr>
<td>AAAAAAA</td><td>BBBBBBB</td><td class="noborde"><!-- vacia --></td>
</tr>
<tr>
<td>AAAAAAA</td><td class="noborde"><!-- vacia --></td><td class="noborde"><!-- vacia --></td>
</tr>
</table>
</body>
</html>

Saludos

cristian_cena · #4 (**permalink**) 10/12/2011, 23:43

emprear, si tienes a bien, aprovecho a preguntarte ¿para que usas /*<![CDATA[*/ ? gracias.

emprear · #5 (**permalink**) 11/12/2011, 01:11

cuando usas xhtml, lo correcto sería pasarlos como application/xhtml+xml, aunque generalmente se hace como text/html.
Si el caso fuese el primero, ciertos selectores de css pueden producir errores en la lectura del xml ( por ejemplo E > F, puede interpretarse el > como un cierre de etiqueta, las expresiones dinámicas que usas IE, width:expression(document.body.clientWidth > 800? "800px": "auto" );), usando CDATA, se previenen esos errores porque el parser de xml no los analiza.

Es algo similar a lo que se hacía para que los navegadores viejos que no entendían el css, no provocasen fallos, para eso encerrabas el css en comentarios html

<style type="text/css">

</style>

Volviendo al CDATA, obviamente si servimos el archivo como text/html, se hace innecesario.

Pero en la práctica el caso es que en mi editor de texto tengo creadas plantillas para xhtml, y las mismas incluyen los bloques CDATA, tanto para el CSS, como prara javascript, asi que no me cuesta nada ponerlas.

Para CSS es

Código CSS:

Ver original<style type="text/css">
/*<![CDATA[*/
 
/* codigo css */ 
html, body {
padding: 0;
margin: 0;
}
 
/*]]>*/
</style>

para javascript es

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
 
/* código jscript */
alert('hola');
 
//]]>
</script>

Notá la diferencia en la sintáxis, ya que uno usa el estilo de comentarios de css /* */
Y el otro el de comentarios de javascript //

Demás no están, y como te dije , no me cuesta nada ponerlas cuando creo un archivo de ejemplo

Saludos

cristian_cena · #6 (**permalink**) 11/12/2011, 15:22

excelente explicacion emprear, muchas gracias.

comablck · #7 (**permalink**) 11/12/2011, 17:06

estoy deacuerdo con emprear, pero yo solamente uso en ambas (css y js)...