[gallego123]

Hola

no se si tiene que ir aca o en otro lado el post
pero ahi va y espero que me ayuden

tengo el siguiente código

<?php foreach($domicilios as $i=>$domicilio):?>
  <tr class="<?php echo $i%2?'even':'odd';?>">
    <td><?php echo CHtml::activeTextField($domicilio,"domicilio[$i]",$readonly); ?></td>
    <td><?php echo CHtml::activeTextField($domicilio->localidad,"descripcion[$i]",$readonly); ?>
        <?php echo CHtml::activeHiddenField($domicilio,"loc_idLocalidad[$i]"); ?>
        <?php 
           if (count($readonly)==0)
           echo CHtml::link(CHtml::image('images/aflist.gif','Buscar',array('TITLE'=>"Buscar")), '#', array('onclick'=>'abrirVentana('.$i.')'));
        ?>
    </td>
    <td style="text-align:center;">
      <?php
           if (count($readonly)==0)
           //echo CHtml::linkButton('Borrar',array(
           echo CHtml::linkButton(CHtml::image('images/delete.png','Borra',array('TITLE'=>"Borrar")),array(
            'submit'=>'',
            'params'=>array('command'=>'deleteDom','idDomicilio'=>$domicilio->idDomicilio),
            'confirm'=>"Esta seguro de borrar #{$domicilio->domicilio}?")); ?>
    </td>
  </tr>

<?php endforeach; ?>

lo que se ve de la siguiente manera (ver adjunto)

lo que quiero es crear un estilo css para los dos botones
la parte que va siempre es:
para buscar

CHtml::image('images/aflist.gif','Buscar',array('TITLE'=>"Buscar"))

y para borrar

 <td style="text-align:center;"> 

CHtml::image('images/delete.png','Borra',array('TITLE'=>"Borrar"))

gracias!

Attached File(s)

•  ayuda_css.jpg (8.4K)
  Number of downloads: 40

[PoL]

No veo el adjunto!
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...

[PoL]

Ahora veo el adjunto!!!
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"

[gallego123]

PoL, on 28 October 2009 - 10:40 AM, said:

No veo el adjunto!
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...

a example please!

se ve el adjunto ahora?

[PoL]

Que tipo de ejemplo queres? de un css? eso depende mucho de como quieras que se vea.
No entiendo bien igual lo que queres hacer, esa imagen es como se ve actualmente o es lo que vos queres que se vea?
si es lo que ves actualmente, entoces, como queres que se vea?

[gallego123]

PoL, on 28 October 2009 - 11:25 AM, said:

Que tipo de ejemplo queres? de un css? eso depende mucho de como quieras que se vea.
No entiendo bien igual lo que queres hacer, esa imagen es como se ve actualmente o es lo que vos queres que se vea?
si es lo que ves actualmente, entoces, como queres que se vea?

hola PoL

quiero que se vea exactamente como se ve ahora,pero usando un estilo
este tipo de form lo uso mucho y si se me ocurriera cambiar la imagen, el TITLE o cualquier cosa
tendría que hacerlo en cada una de las paginas

mañana voy a intentar hacer algo como

echo CHtml::link('Lov', '#', array('class'=>'btn_lov','onclick'=>'abrirVentana('.$i.')'));

y en el css
.btn_lov {title:'Buscar';img: images/aflist.gif;}

mi problema es que no se como hacer el css, por eso mi HELP!

saludos y gracias por contestar!

[PoL]

.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!

[gallego123]

PoL, on 28 October 2009 - 02:30 PM, said:

.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!

okey!

gracias PoL!, y gracias por el voto de confianza
en cuanto tenga algo lo posteo asi queda

saludos!

[Luciano]

Hola, muy bueno que uses CSS.
Igual como dice Pol, se necesita práctica y no desanimarse.

En cuanto a lo tuyo, tendrías que ponerle una imagen de fondo al elemento, en este caso, el "A" (el elemento del link).
Tenés que diferenciar qué cosas pertenecen al CSS y qué al HTML.
Por ejemplo, como dice PoL, no podés cambiar el TITLE de un elemento desde CSS.
El CSS lo que te permite es cambiar la forma de mostrar los elementos.

Si vos querés un link con una imagen de fondo, podrías hacer:

<a href="#" class="btn_lov"><span>Lov</span></a>

y el CSS:

a.btn_lov {
    display: block; /*para darle ancho y alto*/
    width: 30px;
    height: 30px; /*tamaño de la imagen*/
    background: url(imagen_de_fondo.jpg) no-repeat;
}
a.btn_love span {
    display: none; /*no mostrar el texto dentro del SPAN*/
}

Creo que con eso sería suficiente...
Un saludo y suerte!

[gallego123]

hello

hice esto

echo CHtml::link('', '#', array('onclick'=>'lovInstituciones()','class'=>'btn_lov','title'=>'Buscar')); ?>

css

.btn_lov {
    display: block; /*para darle ancho y alto*/
    /*tamaño de la imagen*/
    width: 15px;
    height: 15px;
    background: url(aflist.gif) no-repeat;
}

y anda, pero ..... me pone las imagenes abajo, no al costado

tambien probe poner

margin: 0px;
padding: 0px;

que me falta?
Gracias!!!!

Attached File(s)

•  css_salto_linea.png (2.34K)
  Number of downloads: 9

[PoL]

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....

[gallego123]

PoL, on 30 October 2009 - 06:44 AM, said:

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....

Gracias PoL
quedo de 10

[Luciano]

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.

Si realmente te interesa aprender XHTML/CSS, invertí en este libro: http://www.cuspide.com/isbn/8441524661
Lejos el mejor que haya leído sobre el tema.

Suerte!

[gallego123]

[edit] Ya lo logre!, es asi? o habia otra forma?

<a href="<?php echo Yii::app()->request->baseUrl;?>"> <div id="logo"> <?php echoCHtml::encode(Yii::app()->name); ?> </div> </a>

[edit2] tambien puedo hacer click sobre el titulo


[edit3] no logre nada, no anda, hay algo mal con el div
help!
--------------------

yo de nuevo

sin leer ningun libro sobre css aun

Consulta

tengo esto en mi template

<div id="logo"> <?php echo CHtml::encode(Yii::app()->name); ?> </div>

y en el css

#logo
{
    padding: 20px 0 20px 60px;
    font-size: 200%;
    background:url(logocpsp.gif) no-repeat 10px 10px;
    -moz-border-radius: 15px 15px 15px 15px;
    background-color: #e8f6f5;
    margin-top: 0.8em;
}

bien, ahora quiero que al hacer CLICK en la imagen me mande al home

en la pagina del framework Yii, el codigo es el siguiente

<div id="logo"><a href="/">
  <img src="/images/logo.gif" border="0" 
  alt="Yii Web Programming Framework" />
</a>
</div>

se puede hacer esto con css ? como?

o como modifico lo que tengo?


desde ya gracias!!!!

This post has been edited by Horacio Segura: 21 January 2010 - 11:00 AM

[PoL]

no podes hacer click sobre la imagen (en si) puesta desde el css, pero podes responder al evento onclick del div (con javascript)
Lo que en definitiva tendria el mismo efecto.

[Luciano]

Hola...
No entiendo algo. Cómo esto ->

<div id="logo"> <?php echo CHtml::encode(Yii::app()->name); ?> </div>

te genera esto ->

<div id="logo"><a href="/">
  <img src="/images/logo.gif" border="0" 
  alt="Yii Web Programming Framework" />
</a>
</div>

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.

[PoL]

@Luciano:
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...

[Luciano]

@Pol:

Sé que CSS no responde a eventos, por eso te dije que hay una forma de "emular" el comportamiento...
Te lo voy a mostrar con un ejemplo (funcionando en http://tayfat.com.ar/magia.php, el sitio que le hice a un amigo).
Tengo este código en el HTML:

<div id="header">			
	<h1>
		<a href="index.php" title="Volver al inicio"><span>TayFat</span></a>
	</h1>
	<h2><span>animagic</span></h2>
</div>

Y quiero que en el texto que está dentro del H1 sea reemplazado por una imagen que al hacer click actúe como link.
Fijáte que yo tengo el H1 con un link adentro, y a su vez el texto del link está dentro de un SPAN.
Aclaro que en este caso no tengo una imagen de fondo para el H1 sino que es de todo el encabezado (http://tayfat.com.ar.../top900x210.jpg).
El "truco" es el siguiente:

/*
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...

[PoL]

Entonces que encierre todo el div en un link. En definitiva es eso lo importante. A ese link le puede poner la url que quiera.

<a href="loquesea"><div id="#logo">etct.. etc.. etc...</div></a>

Pero no se si esto es muy standard que digamos!!!

[Luciano]

Mmmh...nó...no es standard.
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).