Foros del Web » Creando para Internet » CSS »

Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Estas en el tema de Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P en el foro de CSS en Foros del Web. Bueno, varios usuarios me habian ayudado y entendi como hacerlo. Se le ponen ciertas caracteristicas a los links "a" y luego al linkear se forma ...
  #1 (permalink)  
Antiguo 17/03/2009, 07:54
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Bueno, varios usuarios me habian ayudado y entendi como hacerlo.

Se le ponen ciertas caracteristicas a los links "a" y luego al linkear se forma un sector que sirve como link entero y no solo la palabra del link.

El problema esta que esas caracteristicas "a" son siempre iguales, y en el momento de hacer el link para "Preguntas Frecuentes" el cual es mas ancho me surge el problema de que no entra entero y va para abajo.

Seguramente no me entienden asi que dejo los archivos para que puedan ver la pagina y el error al señalar preguntas frecuentes.

http://rapidshare.com/files/21027338...elweb.rar.html

Click Aqui


Desde ya MUCHISIMAS GRACIAS
  #2 (permalink)  
Antiguo 17/03/2009, 13:04
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Hola MeneXe, ya te comente en otro hilo que los link normalmete tienen el mismo tamaño y en otro hilo que lo que intentas son juegos malabares, que no significa que no se pueda hacer, pero que se te van ha acumular los problemas.
  #3 (permalink)  
Antiguo 17/03/2009, 15:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Hola:

Tendrás que ajustar las medidas a tu gusto pero en los casos que el texto sea más de una palabra en vez de separarlas con un espacio ponlo como te indico (señalado en rojo):

Código:
<div id="apDiv5"><a href="http://www.google.com.ar" class="linktres">
Preguntas&nbsp;Frecuentes</a></div>
Otra cosa que he visto y que puede dar problemas, no lo se con certeza, procura que los nombres de los gráficos no tengan espacios en blanco, sustituyelos por un guión, por ejemplo:

Código:
sub-fondo-bg.jpg
Saludos:

  #4 (permalink)  
Antiguo 17/03/2009, 16:00
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Pregunta Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Tendrás que ajustar las medidas a tu gusto pero en los casos que el texto sea más de una palabra en vez de separarlas con un espacio ponlo como te indico (señalado en rojo):

Código:
<div id="apDiv5"><a href="http://www.google.com.ar" class="linktres">
Preguntas&nbsp;Frecuentes</a></div>
Otra cosa que he visto y que puede dar problemas, no lo se con certeza, procura que los nombres de los gráficos no tengan espacios en blanco, sustituyelos por un guión, por ejemplo:

Código:
sub-fondo-bg.jpg
Saludos:

Muchisimas gracias por los consejos.

Pero sabes tu como tengo que hacer para poder cambiar el tamaño de un solo link? La persona que respondio antes que tu dice que no se puede, que hay 1 unico tamaño para todos los links.

Fijate si tu logras hacer que quede bien el "preguntas frecuentes" que hice.

Muchisimas gracias, si lo logras solucionar no hace falta que gastes tiempo en explicacion yo mismo me pongo a leer el codigo lentamente hasta comprenderlo :P

Perdon por ser persistente pero de todas estas complicaciones saco un rico aprendisaje :)
  #5 (permalink)  
Antiguo 17/03/2009, 16:04
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Cita:
Iniciado por MeneXe Ver Mensaje
Fijate si tu logras hacer que quede bien el "preguntas frecuentes" que hice.
Hola de nuevo:

Lo que yo he probado y he conseguido es que salga en la misma linea no en dos como salia al bajarme tu ejemplo, lo que no he intentado es ponerlo en la posición que tu quieres, pero salir sale en la misma linea.

Saludos.

  #6 (permalink)  
Antiguo 17/03/2009, 17:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

¿No puedes pegar el trozo de HTML y CSS en cuestión en lugar de tener que bajar un .rar?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 18/03/2009, 00:59
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Cita:
Iniciado por jomaruro Ver Mensaje
Hola de nuevo:

Lo que yo he probado y he conseguido es que salga en la misma linea no en dos como salia al bajarme tu ejemplo, lo que no he intentado es ponerlo en la posición que tu quieres, pero salir sale en la misma linea.

Saludos.

Si es cierto poniendo el espacio de forma correcta queda en la misma Linea, el problema es que al señalarlo solamente cambia una parte del fondo, la parte que es Link, no se como hacer para ampliar la zona de Link de unicamente ese boton.

Cita:
Iniciado por Mikmoro Ver Mensaje
¿No puedes pegar el trozo de HTML y CSS en cuestión en lugar de tener que bajar un .rar?
Sucede que en el .rar estan tambien las imagenes, las cuales son importantes para poder ver el problema y la solucion.


Muchisimas gracias por la ayuda a todos, espero alguna respuesta o tendre que cambiar el "Preguntas Frecuentes" por "Preguntas" :P
  #8 (permalink)  
Antiguo 18/03/2009, 03:53
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Cita:
Iniciado por MeneXe Ver Mensaje

Pero sabes tu como tengo que hacer para poder cambiar el tamaño de un solo link? La persona que respondio antes que tu dice que no se puede, que hay 1 unico tamaño para todos los links.
Yo no digo que no se pueda, digo que normalmente en un menu todos los link del menú tienen el mismo tamaño. Puesdes comprobarlo dandote una vuelta por la World Wide Web.
  #9 (permalink)  
Antiguo 18/03/2009, 07:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Bueno, por aportar algo, el asunto es así de sencillo:
si a un enlace le damos display block podremos darle medidas mediante width y height. Esto hará que todos los enlaces (de esa sección) tengan las mismas medidas.
Si queremos que un enace ocupe tanto como su contenido, no le damos display block sino dejamos el que tiene por defecto, que es inline, de esa manera crece en una línea tanto como su conteneido sin provocar salto. Si en este caso queremos que ocupe en cualqueira de sus 4 lados más que sólo el texto, lo hacemos mediante padding.

Si pudiera ver tu código podría decirte qué te conviene. No uso rar.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 18/03/2009, 13:18
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Cita:
Iniciado por Mikmoro Ver Mensaje
Bueno, por aportar algo, el asunto es así de sencillo:
si a un enlace le damos display block podremos darle medidas mediante width y height. Esto hará que todos los enlaces (de esa sección) tengan las mismas medidas.
Si queremos que un enace ocupe tanto como su contenido, no le damos display block sino dejamos el que tiene por defecto, que es inline, de esa manera crece en una línea tanto como su conteneido sin provocar salto. Si en este caso queremos que ocupe en cualqueira de sus 4 lados más que sólo el texto, lo hacemos mediante padding.

Si pudiera ver tu código podría decirte qué te conviene. No uso rar.

Como el problema se da en la imagen de fondo es necesario que veas la imagen para entender el problema. Son links con imagenes de fondo en sus divs, a su vez las imagenes de fondo son diferentes para cada link, y cada anchor text es diferente en su tamaño.

Asi que te subi el archivo en ZIP, el zip viene con windows xp.

http://rapidshare.com/files/21078569...elweb.zip.html


Igualmente pego el codigo

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin titulo</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:104px;
	top:62px;
	width:800px;
	height:481px;
	z-index:1;
	background-image: url(sub%20fondo%20bg.jpg);
}
#apDiv2 {
	position:absolute;
	left:213px;
	top:467px;
	width:122px;
	height:59px;
	text-align:center;
	line-height:45px;
	z-index:2;
}

a {
	display: block;
	width: 122px;
	margin: 0px;
	padding: 5px 0px 0px;
	height: 59px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0a7c7d;
	font-weight: bold;
	font-size: 14px;
}



.linkuno { no-repeat; }
a:hover.linkuno {background:url(productos%20bg.jpg) no-repeat; }

.linkdos { no-repeat; }
a:hover.linkdos {background:url(Consultas.jpg) no-repeat; }

.linktres { no-repeat; }
a:hover.linktres {background:url(Preguntas%20Frecuentes%20bg.jpg) no-repeat; }


a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#apDiv3 {
	position:absolute;
	left:342px;
	top:469px;
	width:118px;
	height:62px;
	text-align:center;
	line-height:45px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:335px;
	top:465px;
	width:121px;
	height:60px;
	text-align:center;
	line-height:51px;
	z-index:3;
}
#apDiv5 {
	position:absolute;
	left:462px;
	top:467px;
	width:202px;
	height:57px;
	z-index:4;
	text-align:center;
	line-height:51px;
}


-->
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"><a href="http://www.google.com.ar" class="linkuno">Productos</a></div>
<div id="apDiv4"><a href="http://www.google.com.ar" class="linkdos">Consultas</a></div>
<div id="apDiv5"><a href="http://www.google.com.ar" class="linktres">Preguntas_Frecuentes</a></div>
</body>
</html>
  #11 (permalink)  
Antiguo 18/03/2009, 17:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Bueno, por eso quería ver tu código antes que las imágenes: esta no es ni de lejos la mejor manera de hacer un menú:
Cita:
<div id="apDiv2"><a href="http://www.google.com.ar" class="linkuno">Productos</a></div>
<div id="apDiv4"><a href="http://www.google.com.ar" class="linkdos">Consultas</a></div>
<div id="apDiv5"><a href="http://www.google.com.ar" class="linktres">Preguntas_Frecuentes</a></div>
Un menú es una lista de elementos, concretamente enlaces, y como tal, la manera más recomendable es que esté en una lista:
Cita:
<ul>
<li><a href="http://www.google.com.ar" class="linkuno">Productos</a></li>
<li><a href="http://www.google.com.ar" class="linkdos">Consultas</a></li>
<li><a href="http://www.google.com.ar" class="linktres">Preguntas_Frecuentes</a></li>
</ul>
¿Cómo hacer que esto funcione como tú quieres? ese es el siguiente paso. Más tarde echo si puedo un vistazo a tu zip.

P.D.: no uso rar porque no me da la gana, no porque no sepa lo que es Me parece que lo de "zip" y "XP" sobraba.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 18/03/2009, 18:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

Bueno, por dejarnos de historias, ya que tienes un diseño muy extraño a mi entender, pero cada uno hace las cosas a su gusto, y centrándonos en el problema, no necesitas ese width para nada:
Cita:
a {color:#0A7C7D;
display:block;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
height:59px;
margin:0px;
padding:5px 0px 0px;
width:122px;
}
Quítalo y el elemento rebelde irá a su sitio.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 18/03/2009, 20:34
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

jajajajaja, okey xDDDDD, muchisimas gracias, ahi me pongo a probar las sugerencias.

No me estaba burlando para nada con lo del zip :P

Es que conozco mucha gente que no le gusta usar las cosas nuevas o instalar cosas, entonces pensaba que por eso no tenias el winrar y que el winzip viene con windows entonces se solucionaba el problema.

Es que si no era subiendo la carpeta entera tenia que subir foto por foto al imageshack para poder mostrarte las imagenes ahi utilizadas, lo cual iba a ser bastante tedioso.

Te pido mil disculpas y lo menos que quiero es ofender a la buenisima gente como tu que me ayuda muchisimo.

En verdad lo lamento, a veces explico las cosas que son obvias, siempre se quejan de mi por hacer eso, mis amigos, mi novia, mi familia etc... :P es una mala costumbre, no es burlarme.
  #14 (permalink)  
Antiguo 18/03/2009, 20:43
 
Fecha de Ingreso: julio-2008
Mensajes: 162
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

JAJAJAJAAAAAAAAAAAA ME MUERO DE RIZA Y DE FELICIDAD!!!!!!

Simplemente con borrar el "width" se soluciono todo!!! y bastante gente me decia que era un embrollo lograr solucionar esto xDDDD

Era mas embrollo lo que me ayudaron a hacer hasta ese paso que la solucion, era muy simple la solucion, tanto que no se me ocurrio probarla por mi mismo :P

Eres un genio, te super agradezco.

otro tema: Como es eso de poner el menu haciendo una lista? yo los pondria uno al lado del otro, no uno abajo del otro.

La verdad es que tengo muy mala memoria y no recuerdo como era eso :P , era algo del html basico con bloc de notas.

Aclaro aunque debe ser obvio que no soy muy habilidoso con los codigos, hace muy poco empece por mi mismo a leer sobre diseño Web porque tenia que hacer una pagina para un grupo de amigos y nadie sabia, entonces dije "bueno a ver como es el tema" y me parecio en un principio facil y me gusto y segui, pero estudio en la facultad psicologia y bueno.. no se relaciona en nada con todo esto, asi que solamente lo hago en tiempos libres.

Pido perdon si estoy hablando demasiado, la verdad que no estoy seguro si este tipo de comentarios entra en la dinamica del foro o les molestara, si les molesta lo siento y solo me reducire a los temas tocados en el titulo.

Suerte y gracias problema 100% solucionado, codigo funcionando final:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin titulo</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:104px;
	top:62px;
	width:800px;
	height:481px;
	z-index:1;
	background-image: url(sub%20fondo%20bg.jpg);
}
#apDiv2 {
	position:absolute;
	left:213px;
	top:467px;
	width:122px;
	height:59px;
	text-align:center;
	line-height:45px;
	z-index:2;
}

a {
	display: block;
	margin: 0px;
	padding: 5px 0px 0px;
	height: 59px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0a7c7d;
	font-weight: bold;
	font-size: 14px;
}



.linkuno { no-repeat; }
a:hover.linkuno {background:url(productos%20bg.jpg) no-repeat; }

.linkdos { no-repeat; }
a:hover.linkdos {background:url(Consultas.jpg) no-repeat; }

.linktres { no-repeat; }
a:hover.linktres {background:url(Preguntas%20Frecuentes%20bg.jpg) no-repeat; }


a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#apDiv3 {
	position:absolute;
	left:342px;
	top:469px;
	width:118px;
	height:62px;
	text-align:center;
	line-height:45px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:335px;
	top:465px;
	width:121px;
	height:60px;
	text-align:center;
	line-height:51px;
	z-index:3;
}
#apDiv5 {
	position:absolute;
	left:462px;
	top:467px;
	width:202px;
	height:57px;
	z-index:4;
	text-align:center;
	line-height:51px;
}


-->
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"><a href="http://www.google.com.ar" class="linkuno">Productos</a></div>
<div id="apDiv4"><a href="http://www.google.com.ar" class="linkdos">Consultas</a></div>
<div id="apDiv5"><a href="http://www.google.com.ar" class="linktres">Preguntas_Frecuentes</a></div>
</body>
</html>
Como dicen en las peliculas, muchas veces la respuesta esta justo debajo de tu nariz
  #15 (permalink)  
Antiguo 19/03/2009, 06:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Nuevo problema en "Al sañalar Link Cambia Fondo" ayuda nuevamente :P

No te preocupes, no es ningún problema

Me alegro de que lo hayas solucionado.

Saludos.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:42.