ayuda con css


(Hmsegura) #1

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!


(Cyberpol 777) #2

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…


(Cyberpol 777) #3

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"


(Hmsegura) #4

a example please! ;D

se ve el adjunto ahora?


(Cyberpol 777) #5

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?


(Hmsegura) #6

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!


(Cyberpol 777) #7

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


(Hmsegura) #8

okey!

gracias PoL!, y gracias por el voto de confianza

en cuanto tenga algo lo posteo asi queda

saludos!


(Luciano Baraglia) #9

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!


(Hmsegura) #10

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


(Cyberpol 777) #11

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…


(Hmsegura) #12

Gracias PoL

quedo de 10


(Luciano Baraglia) #13

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!


(Hmsegura) #14

[s][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[/s]

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


(Cyberpol 777) #15

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 Baraglia) #16

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.


(Cyberpol 777) #17

@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 Baraglia) #18

@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/images/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…


(Cyberpol 777) #19

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 Baraglia) #20

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