Mi diseño CSS Tengo asignado un proyecto en PHP usando el framework CodeIgniter. Como referencia, posteo el link del tema que creé sobre este proyecto:
[URL="http://www.forosdelweb.com/f18/proyecto-php-916623/"]http://www.forosdelweb.com/f18/proyecto-php-916623/[/URL]
Para los que no le interesa mi triste historia vayan más abajo, luego del bloque CODE.
Empecé a trabajar en el diseño en HTML-CSS y creo haberlo terminado, no sin antes haber pasado unos cuantos malos momentos en que la rabia casi me hacía romper el teclado del ordenador. La verdad es que luego de mi experiencia, ahora respeto más a los diseñadores, ya que no me imaginaba que CSS fuera tan complejo O_o.
Pero al final, cuando el diseño quedó como esperaba, se sintió genial, y aprendí muchísimo de CSS, y a utilizar varias propiedades que al comienzo eran un misterio para mi (float, clear, position, etc.).
Pasé algo más de trabajo, ya que recuerdo haber leído que usar tablas en HTML para el Layout es mala practica, por lo que para esto utilicé varios elementos, principalmente DIVs, y logré hacer el layout, a base de floats y clears.
Mientras diseñaba el CSS, lo probaba con SuperPreview de Microsoft Expression Web. El diseño final fue probado con Chrome, IE 6, IE 8, IE 9, Safari 4, Safari 5, Firefox 3 y Firefox 4. Con el que más luché fue con el IE 6, pues el Padding no estaba funcionando debidamente, y buscando en google, encontré la forma de poner una declaración CSS que sólo la lea IE 6: haciendo que empiece con underscore (_padding: 0px 0px 0px 10px).
Todo iba de maravilla, hasta que subí el HTML a mi web. Verán, como estoy trabajando con CodeIgniter en PHP, obté por utilizar CloudIgniter (un servicio de hosting de los creadores de CodeIgniter), ya que viene con CodeIgniter preparado y la base de datos MySQL creada. Entonces, subí el mismo HTML y CSS (que había testeado en todos esos browsers y estaba perfecto), y le cambié la extensión al HTML a .php, y lo cargué como view desde el controller principal. Visité la web con Chrome, y se veía perfecta, igual que en el preview offline. La abrí entonces con IE 9... toda desfigurada. Mi rostro se tornó así: ಥ_ಥ .
Luego de varias horas ya no sabía que hacer. Y entonces empecé a crear un nuevo tema en forosdelweb (más precisamente este mismo tema), pero mientras detallaba con palabras el problema escribiendo el párrafo anterior, me di cuenta de cual era la causa y lo solucioné yo mismo, y entonces mi rostro se tornó así: ヽ(´▽`)/ . Aunque me da vergüenza decirlo (por lo estúpido que fuí), el problema radicaba en que en mi controller, antes de cargar la view, para testear ponía echo 'Hola mundo';, y entonces cargaba la view. Lo que resultaba de esto era que el HTML que recibía el browser, tenía antes que todo "Hola mundo", incluso antes de DocType, lo cual a Chrome parecia no afectarle pero a IE sí (y creo que a firefox).
Me hace gracia que cuando estaba por pedir ayuda, yo mismo haya encontrado la causa, gracias a que yo mismo empecé a detallar el problema, LOL.
Pues ahora el diseño está funcionando bien. Hasta ahora, las pestañas son lo unico que se genera dinámicamente, leyendo de la base de datos. Luego usaré Ajax para actualizar el contenido, dependiendo de la pestaña seleccionada.
El propósito de este tema (luego de que ya resolviera el problema original para el cual empecé a escribirlo) es que me den su opinión sobre la StyleSheet que creé. Es el PRIMERO que hago desde cero y, a pesar de que funciona, me interesa saber que tan bien o mal estoy con respecto a las buenas practicas y esas cosas.
AQUÍ ESTÁ EL STYLESHEET. MIS PREGUNTAS ESTÁN MÁS ABAJO...
Código:
Aquí empiezan mis preguntas:div#componente
{
width: 700px;
height: 270px;
font-family:Garamond;
}
div.seccion_horizontal
{
float:left;
clear:both;
}
div#componente div#parte_superior
{
width:700px;
height:26px;
}
div#componente div#parte_inferior
{
width:700px;
height:244px;
}
div#componente div#parte_superior div#titulo
{
float: left;
width: 280px;
height: 26px;
background-image: url('Imagenes/titulo.png');
background-repeat: no-repeat;
}
div#componente div#parte_superior div#titulo h1
{
font-size:18px;
text-align: center;
font-weight:bold;
margin: 2px 0px 0px 0px;
}
div#componente div#parte_inferior img#imagen
{
float: left;
width: 278px;/* 2px menos que la imagen, para hacer espacio para el borde */
height: 242px;/* 2px menos que la imagen, para hacer espacio para el borde */
border:solid 1px;
}
div#componente div#parte_inferior div#contenido
{
float:left;
width:420px;
height:244px;
background-image:url('Imagenes/contenido.png')
}
div#componente div#parte_inferior div#contenido ul#enlaces
{
list-style:none;
padding: 0px;
margin:10px;
}
div#componente div#parte_inferior div#contenido ul#enlaces li
{
border-color: #99CCFF;
margin: 0px 0px 15px 0px;
border-bottom-style: ridge;
}
div#componente div#parte_inferior div#contenido ul#enlaces li a
{
font-size: 20px;
color: #CCCCCC;
text-decoration: none;
}
div#componente div#parte_superior ul#menu
{
margin: 0px;
padding: 0px;
float: left;
height: 26px;
width: 420px;
}
div#componente div#parte_superior ul#menu li
{
display: inline;
}
div#componente div#parte_superior ul#menu li span.imagen_comienzo
{
height:26px;
width: 1px;
float:left;
background: url(Imagenes/tab-beginning.png) no-repeat;
}
div#componente div#parte_superior ul#menu li a
{
float: left;
height:26px;
background: url(Imagenes/tab-body.png) repeat-x -1px 0px;
font-size:18px;
text-decoration:none;
color:#003399;
padding:3px 0px 0px 8px;
_padding:0px 0px 0px 8px; /* Esto sólo será leido por IE6 */
}
div#componente div#parte_superior ul#menu li span.imagen_final
{
float: left;
height:26px;
width: 10px;
background: url(Imagenes/tab-end.png) no-repeat;
}
div#componente div#parte_superior ul#menu li.pestana_activa a
{
background: url(Imagenes/sel_tab_body.png) repeat-x -1px 0px;
}
div#componente div#parte_superior ul#menu li.pestana_activa span.imagen_final
{
background: url(Imagenes/sel_tab_end.png) no-repeat;
}
div#componente div#parte_superior ul#menu li:hover span.imagen_comienzo,
div#componente div#parte_superior ul#menu li:hover a,
div#componente div#parte_superior ul#menu li:hover span.imagen_final
{
height:30px;
position:relative;
top:-4px;
}
div#componente div#parte_superior ul#menu li:hover span.imagen_comienzo
{
background: url(Imagenes/hover-tab-beginning.png) no-repeat;
}
div#componente div#parte_superior ul#menu li:hover a
{
background: url(Imagenes/hover-tab-body.png) repeat-x -1px 0px;
}
div#componente div#parte_superior ul#menu li:hover span.imagen_final
{
background: url(Imagenes/hover-tab-end.png) no-repeat;
}
1. En CSS, ¿es mala practica ser tan específico? es decir, si se fijan en el css anterior, verán selectores como div#componente div#parte_superior ul#menu li span.imagen_final. Estoy casi seguro que es estúpido ponerlo así, pero quisiera saber su opinión (sólo lo puse así porque estaba experimentando).
2. Si tengo esto:
Código:
En lugar de repetir esas 3 propiedades, ¿sería mejor esto?ul#menu li:hover span.imagen_comienzo
{
height:30px;
position:relative;
top:-4px;
background: url(Imagenes/hover-tab-beginning.png) no-repeat;
}
ul#menu li:hover a
{
height:30px;
position:relative;
top:-4px;
background: url(Imagenes/hover-tab-body.png) repeat-x -1px 0px;
}
ul#menu li:hover span.imagen_final
{
height:30px;
position:relative;
top:-4px;
background: url(Imagenes/hover-tab-end.png) no-repeat;
}
Código:
¿O sería mejor usar una clase para las tres para agregarle algo de semántica?ul#menu li:hover span.imagen_comienzo,
ul#menu li:hover a,
ul#menu li:hover span.imagen_final
{
height:30px;
position:relative;
top:-4px;
}
ul#menu li:hover span.imagen_comienzo
{
background: url(Imagenes/hover-tab-beginning.png) no-repeat;
}
ul#menu li:hover a
{
background: url(Imagenes/hover-tab-body.png) repeat-x -1px 0px;
}
ul#menu li:hover span.imagen_final
{
background: url(Imagenes/hover-tab-end.png) no-repeat;
}
3. ¿Tienen alguna otra sugerencia, crítica o cualquier tipo de opinión con respecto a la hoja de estilo? Por favor, no duden en criticarme, sino seguiré con mis malas practicas para siempre, y seré uno de los peores diseñadores del mundo, gracias a ustedes (:D es broma ^^).
Por cierto, aquí está el link de mi pagina de prueba, del que les he hablado, por si necesitan ver el html:
[URL="http://amauris.getcloudigniter.com/"]http://amauris.getcloudigniter.com/[/URL]
Gracias de Antemano.
