De todos modos me parece que el temas es el selector que tendrias que usar para esos dos estilos. Sino una alternativa es agregarles alguna clase suponete que en el html el boton de buscar quede con class=“buscar” entonces en css usas el selector ‘.buscar’ y le das los estilos que quieras! lo mismo para el otro boton…
Para agregarle una clase css con yii tenes que que pasarlos en el mismo arreglo que pasas TITLE, otro elemento que sea "class"=>"nombre de la clase css"
.btn_lov {title:‘Buscar’;img: images/aflist.gif;} NO va a funcionar.
para la imagen tenes que usar algo asi:
.btn_lov { background-image:url("ruta a la imagen");}
OJO: "ruta a la imagen" puede ser un path relativo o absoluto. si es absoluto no hay problema. pero si es relativo tene cuidado porque te lo toma relativo al CSS…
Pero para title no lo podes hacer desde css (a menos no hasta donde yo se)
EDIT: igual bajate un par de tutoriales de css; ahora no tengo los links pero hay varios muy buenos. (para maquetar o estilizar todo desde css se necesita MUCHA practica, pero como dicen "La practica hace al maestro")
Igual si manejas YII, los css los agarras al toque!
Los browser modernos aceptan ‘display:inline-block’ pero no los viejos. Por eso te decia que es necesario mucha practica con css, porque una vez que los dominas chau tablas!!! y el codigo html es muchisimo mas limpio, pero lleva tiempo (a mi casi un año y medio, y sigo…) aprender a posicionar las cosas como queres y donde queres, etc…
Es primordial que testees el resultado en todos los navegadores posibles, o al menos en los que creés que va a usar el target al que apuntás, para no llevarte desagradables sorpresas.
Te cuento que las imágenes se iban a abajo porque la propiedad "display: block;" lo que hace es mostrarla como un elemento en bloque, un elemento que entre otras cosas ocupa todo el ancho disponible.
Hay formas de lidiar con ésto, como hacerlos flotar y eso, pero hay que ir de a poco.
Me parece que estás haciendo las cosas mal, igualmente.
Por un lado estás metiendo la imágen en el HTML, y por el otro lo estás metiendo cómo imagen de fondo en el CSS.
¿Qué es puntualmente lo que querés lograr y cómo debería quedar el código?
¿Vos querés que el div #logo tenga el título de la aplicación ( o lo que sea en texto ) y además una imagen de fondo? Entonces cuando hacés click en la superficie de la imagen actúa como link…
¿Es así?
@Pol: en realidad sí se puede emular eso con HTML y CSS…es un poco rebuscado nomás.
CSS es SOLO para estilos. Por ende no responden a eventos.
Una imagen insertada desde un css no es un elemento del html propiamente dicho, por lo tanto no se le puede hacer click. Pero si al elemento que contiene esa imagen como fondo (en este caso el div).
Todo esto hablando desde el punto de vista standard hasta donde llega mi conocimieto.
Si en realidad eso que mencionas es posible sale de mis conocimientos y definitivamente me gustaria saber como se hace, asi que si queres, me gustaria que me muestres como se hace…
/*
CON ESTO CORRO LOS TEXTOS DE LA PAGINA PARA QUE NO SE VEAN, HAY OTROS METODOS
*/
#header h1 span,
#header h2 span {
position: absolute;
left: -9000px;
}
/*
ACA LO QUE HAGO ES CONVERTIR EL LINK
EN UN ELEMENTO EN BLOQUE PARA PODER DARLE UN ANCHO Y UN ALTO
Y ADEMÁS LO CORRO 20PX DESDE ARRIBA (ESTO ES EL ANCHO, ALTO Y LA DISTANCIA DONDE
EMPIEZA LA IMAGEN QUE QUIERO QUE ACTUE COMO ZONA PARA CLICKEAR)
*/
#header h1 a {
display: block;
width: 240px;
height: 90px;
position: relative;
top: 20px;
Si tenés el ADDON de FFOX "Web developer toolbar" y hacés un outline del elemento abajo del mouse (CTRL + MAY + F) vas a poder ver dónde está realmente la delimitación de la zona.
Lo bueno de esta aproximación es que el código te queda semántico (probá desactivando el CSS) y te olvidás de meter JS.
Bueno…no sé si es muy claro (soy malo explicando), pero por lo menos es una punta para lo que quiere lograr Horacio…
La especificación indica que no deberías meter un DIV dentro de A (incluso me parece que no deberías meter ningún elemento en bloque dentro de un elemento en línea).