Ampliador de texto

RuLaZ_XD · #1 (**permalink**) 12/07/2010, 06:43

Hola, eh buscado por la red algun codigo para poder ampliar un texto al pasar el raton sobre el... eh puesto varios... pero no eh podido hacer que se vean bien en todos los navegadores (mas importantes)...

Les pido que si me pueden decir como hacerlo... o alguna pagina donde explique, o algo asi... se que se puede hacer con css, pero no se como...

el ultimo que use fue el de http://www.araudi.net/ampliador_texto/ampliador_texto.html

me funcionaba bien al ver la pagina en mi compu.. en firefox, ie, chirme,etc...

pero al subirla a internet no se veia bien, al parecer no respeta <span></span> esto solo en ie.

Espero me ayuden!!

Gracias!!

all-ill · #2 (**permalink**) 12/07/2010, 08:21

Un ejemplo muy básico podría ser cambiar el tamaño del texto al pasar el cursor del ratón por encima usando :hover. Dejo tres ejemplos de hacer lo mismo:

Código CSS:

Ver original.ampliar:hover{font-size:150%;}
.ampliar2:hover{font-size:1em;}
.ampliar3:hover{font-size:larger;}

Código HTML:

Ver original<p class="ampliar">Hola, eh buscado por la red algun codigo para poder ampliar un texto al pasar el raton sobre el... eh puesto varios... pero no eh podido hacer que se vean bien en todos los navegadores (mas importantes)...</p>
<div class="ampliar2"><p>Hola, eh buscado por la red algun codigo para poder ampliar un texto al pasar el raton sobre el... eh puesto varios...</p></div>
<p class="ampliar3">Otro texto más en este documento de ejemplo para <span>ampliar texto</span> al pasar el cursor del ratón por encima de este.</p>

RuLaZ_XD · #3 (**permalink**) 12/07/2010, 11:12

Muchas gracias, es muy simple este codigo y es perfecto para lo que lo quiero, solo un pequeno problema... en IE no se hace la funcion... alguna solucion para esto?

Muchas gracias!!!

Es perfecto para lo que lo quiero.

Saludos!

EDITADO:
Ya logre hacer que IE lo acepte.... solo al inicio del codigo html pongo: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Gracias por la ayuda!!!

RuLaZ_XD · #4 (**permalink**) 12/07/2010, 12:29

Hola otra vez...

no se que es lo que paso, pero ahora no se hace el efecto en firefox... pongo exactamente como esta el ejemplo...

Código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Arhitektura 314</title>
</head>
<body>
<div id="global">
<div id="logotipo"><img src="imagenes/logo.png" height="140" width="340" /></div>
<div id="menu">
<ul><li><a href="index2.html">ARH 314</a></li>
<li><a href="index2.html">Projekti</a></li>
<li><a href="menu1/index.html">Sodelovanjie</a></li>
<li><a href="#">Ordenas</a></li>
<li><a href="#">Novice</a></li>
<li><a href="#">Kontakt</a></li></ul>
</div>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<div id="descripcion">
<div id="descripcion-imagen">
<p><img src="imagenes/cuadro-accion.png" height="140" width="140" /></p>
<p><h2>Mitja Janc</h2></p>
<p>rojen 1980 v Brežicah</p>
</div>
<div id="descripcion-texto">
<div class="ampliar2">
<p>1999 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vpis na Fakulteto za arhitekturo v Ljubljani</p>
<p>2003-04&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;študij na L'Ecole nationale supérieure d'architecture de Grenoble</p>
<p>2007 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diplomiral na Fakulteti za arhitekturo v Ljubljani</p>
<p>2007&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ustanovitev podjetja <b>Arhitekt 314</b></p>
<p>2007&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ustanovitelj in predsednik Društva arhitektov in študentov &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arhitekture Posavja - <b>DAŠAP</b></p>
<p>2007-08&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delo v Atelje Marko Mušič </p>
<p>2008 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delo v ateljeju Borisa Podrecce za natečaj Severna mestna vrata</p>
<p>2009	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;organizacija Arhitekturno urbanistična delavnica staro mestno jedro &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Krško2009</p>
</div>
</div>
<p><br></p>
<p><br></p>
<div id="descripcion">
<p><br></p>
<div id="descripcion-imagen">
<p><img src="imagenes/cuadro-accion.png" height="140" width="140" /></p>
<p><h2>Yazmin Ponce Janc</h2></p>
<p>rojen 1981 v Mehiki</p>
</div>
<div id="descripcion-texto">
<p>2001 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vpis na Centro universitario de arte, arquitectura y disegno</p>
<p>2001-03&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delo v ateljeju "Espacios,desarollo de projectos"</p>
<p>2003-04&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;študij na L'Ecole nationale supérieure d'architecture de Grenoble</p>
<p>2004-05&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delo v ateljeju "Promotora conejos"</p>
<p>2006 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diplomiral na Centro universitario de arte, arquitectura y disegno</p>
<p>2007 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ustanovitev podjetja <b>Arhitekt 314</b></p>
<p>2008 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delo v ateljeju DANS arhitekti </p>
<p>2008 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delo v ateljeju Borisa Podrecce za natečaj Severna mestna vrata</p>
<p>2009		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;organizacija Arhitekturno urbanistična delavnica staro mestno jedro &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Krško2009</p>
  </div>
</div>
</body>
</html>

Código:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align:justify;
font-family: Century Gothic, sans-serif; }
h1 {font-size: 1.5em; color:silver ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
h2 {font-size: 1.25em; color:#1C1C1C ; font-weight: bold ; text-decoration: none ;text-align:left; }
h3	{font.size: 1.1em; color:red ; font-weight: bold ; text-decoration: none ; }	
body {text-align: center;background-color:#778899;}
#global     {width:900px ; margin:4px auto;}
#cabecera   { height:180px}
#logotipo   { width:345px ; height:110px;float:left;margin:15px 0px 0px 0px; }
#menu       {font-size:1.20em; width:552px; margin:30px 0px 0px 0px; padding: 20px 0px 0px 0px;}
html>body #menu {font-size:1.20em; width:580px; margin:0px 0px 0px 360px;padding: 50px 0px 0px 0px;}
#menu li {float:left ; list-style:none ; margin: 0px 0px 0px 25px }
#menu ul { margin-left: 0px }
#descripcion   {font-size: .8em; color:black ;width:450px;margin:0px 10px 0px 0px;float:left;}
#descripcion-imagen   { color:black ;width:140px;height:;margin:0px 7px 0px 0px;float:left;}
#descripcion-numeros   {font-size: .85em;width:50px;float:left;}
#descripcion-texto   {font-size: .85em;}
#proyectos-inicio   {font-size: 1.0em; color:black ;width:400px;padding:0px 0px 0px 40px;float:right;}
html>body #proyectos-inicio {font-size: .80em; color:black ;width:360px;padding:0px 0px 0px 40px;float:right}

 .ampliar:hover{font-size:150%;}
 .ampliar2:hover{font-size:2em;}
 .ampliar3:hover{font-size:larger;}

#menu a         {}
#menu a:link    {color: white; text-decoration:none}
#menu a:visited {color: white; text-decoration:none}
#menu a:hover   {color: white; text-decoration:none; }
#menu a:active  {}


a:				{background-color:#778899;text-decoration:none ;}											
a:link    {color:black;text-decoration:none;background-color:#778899 }
a:visited {color:black ; text-decoration:none ; background-color:#778899}
a:hover   {color:black ; text-decoration:none ; background-color:#778899}
a:active  {background-color:#778899}

Hay algun error???

Tengo que se haga el efecto ampliar2..... se que el texto no esta acomodado... lo acomodare cuando primero logre solucionar esto.

Gracias

all-ill · #5 (**permalink**) 12/07/2010, 15:46

Falta por cerrar el primer <div id="descripcion">
Puedes usar un validador de código para ver los errores (tienes elementos sin cerrar apropiadamente, id repetidos...)

Por cierto, este método sólo funciona en IE a partir de la versión 7. Para versiones inferiores (que sólo aceptan :hover aplicado a enlaces) hay alternativas (usar expresiones en el código css, javascript, archivo behaviour, comentarios condicionales...)