Entrar

Problemas con botones personalizados

Akaris · · Solicitar retirada
Hola a todos, les comento que he empezado hacer los cursos y me he entusiasmado mucho, he seguido cada paso en los ejemplos Div y más leía más me entusiasmaba asta que decidí aprender un poco de photoshop para hacer mi propia página web, con todo esto que he escrito fue un prólogo para llegar a decirle mi problema.
Esta es una imagen de photoshop de como quiero que quede mi web
[contenido no disponible]
El problema al poner los botones es que me quedan de esta forma
[contenido no disponible]
Como verán los botones toman como un borde invisible rectangular
[contenido no disponible]
Por este motivo no puedo lograr poner los botones uno pegado del otro, en el momento que lo logre, porque seguro que existe el modo, esto es lo que me preocupa, que después de tanto esfuerzo al presionar donde puse el hexágono
[contenido no disponible]
(estoy tratando de presionar el botón de arriba) que se presione 2 botones al mismo tiempo el de arriba y el izquierdo.
Agradeceria mucho que me ayudaran pero no me voy a quedar de brazos cruzados esperando una respuesta, voy a seguir intentando.
Yaneth · · Solicitar retirada
bien, eso sucede con las imágenes
aqui lo que te sugiero es..... juntar los 3 botones en un mismo dibujo
para que los puedas insertar juntos
luego...para que funcionen como enlaces, tienes dos opciones
una es utilizar map de dreamweaver
o bien,
si trabajas con photoshop, crear solo el dibujo de las letras para hacer el enlace a ellas (cosa que creo que el problema sería el mismo)
mira.. vamos a hacer algo
mandame tus archivos, para intentar hacertelo
peeeero ni creas que te lo daré hecho heeee??? jejejej (soy algo malvada9
te iré dando pistas de como lo soluciones (si lo que quieres es aprender)

ya lo subiste??? dame la url para verlo
saludos
Akaris · · Solicitar retirada
gracias Yaneth

Como había dicho iba a seguir tratando sin cruzar los brazos esperando una respuesta y lo logre soluciona y lo hacía con el padding con números negativos, pero eso no me lo solucionaba pero ahora me puse a pensar q yo solo estaba reduciendo el pading pero aún seguía chocando con el border y el margin asique reduci eso de esta manera
#boton-izquierdo-encendido {background-image:url(objetos\botones/boton-izquierdo-encendido.png);background-repeat: no-repeat ;
width:275px ;height: 51px; overflow: hidden; float:left; padding:80px -80px 0px 0px; margin:80px -80px 0px 0px; border:80px -80px 0px 0px ).}
#boton-medio-encendido {background-image:url(objetos\botones/boton-medio-encendido.png);background-repeat: no-repeat ;
width:250px ;height: 58px; overflow: hidden; float:left; padding:80px -80px 0px -20px; margin:80px -80px 0px -80px; border:80px -80px 0px -20px }
#boton-derecho-encendido {background-image:url(objetos\botones/boton-derecho-encendido.png);background-repeat: no-repeat ;
width:275px ;height: 51px; overflow: hidden; float:left; padding:80px 0px 0px -80px; margin:80px 0px 0px -80px; border:80px 0px 0px -80px}

Ahora solo tengo que lograr que encaje perfectamente pero mi temor a que se aprieten dos botones al mismo tiempo sigue.
Voy a intentar que pueda hacerlo andar como botón y fingir un enlace # si lo logro o no, volveré a postear en este mismo post
pero me parece algo difícil :p
Yaneth · · Solicitar retirada
el detalle de usar numeros negativos
son los diferentes navegadores

en algunos se verá bien (ie) en otros, se verá fatal
antes que nada, recuerda hacer vista previa en varios de ellos

saludos
Akaris · · Solicitar retirada
Me ha durado poco la sensación de satisfacción, me as ofrecido ayuda de la forma que a mi me gusta
Yaneth escribió:mira.. vamos a hacer algo
mandame tus archivos, para intentar hacertelo
peeeero ni creas que te lo daré hecho heeee??? jejejej (soy algo malvada9
te iré dando pistas de como lo soluciones (si lo que quieres es aprender)
Tengo muchas ideas para mi página que voy a precisar saber esto.
Me preguntaste si lo subi, te contesto que no, para verlo como queda en el navegador apretó botón derecho del ratón en el editor del HTML-Kit y sale la opción de “Previsualizar en navegador por defecto”
Lo que tengo escrito en el index es minimo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>Bienvenido a AxTrOn Cyber-Kiosco</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<img src="objetos/logo.png" width="270px" height="80px" />
<div id="boton-izquierdo-encendido"></div>
<div id="boton-medio-encendido"></div>
<div id="boton-derecho-encendido"></div>
</body>
</html>
En el CSS
body {background-color:#E6E6FA; background-image:url(objetos/marco.png);
background-position:center center; background-repeat:no-repeat; height:100%}
img {border-style:none;}
.centrado {text-align:center;}
#boton-izquierdo-encendido {background-image:url(objetos\botones/boton-izquierdo-encendido.png);background-repeat: no-repeat ;
width:275px ;height: 51px; overflow: hidden; float:left; padding:80px -80px 0px 0px; margin:80px -80px 0px 390px; border:80px -80px 0px 0px ).}
#boton-medio-encendido {background-image:url(objetos\botones/boton-medio-encendido.png);background-repeat: no-repeat ;
width:250px ;height: 58px; overflow: hidden; float:left; padding:80px -80px 0px -20px; margin:80px -80px 0px -80px; border:80px -80px 0px -20px }
#boton-derecho-encendido {background-image:url(objetos\botones/boton-derecho-encendido.png);background-repeat: no-repeat ;
width:275px ;height: 51px; overflow: hidden; float:left; padding:80px 0px 0px -80px; margin:80px 0px 0px -80px; border:80px 0px 0px -80px}
Si quieres te puedo mandar el archivo que hice en photoshop q en ese mismo archive tengo todos los dibujos, mientras sigo intentando nuevas ideas
Yaneth · · Solicitar retirada
hola
no es lo mismo
debes subirlo a la red, para que veas realmente como se comporta
puedes usar un servidor de pruebas
y verlo en diferentes navegadores

creeeme, una vez arriba puede darte verdaderos dolores de cabeza
yo aparte de la vista previa
subo y veo en navegador directo

ha y tengo no uno, 3 servidores de prueba
saludos
Yaneth · · Solicitar retirada
hola
yo lo veo en firefox, y aunque los botones se miran bien
la web está desplazada a la izquierda, cosa que no queda muy bien que digamos
y lo que decias del problema al poner los enlaces, seguro que si
ya que los botones están encimados

yop lo que haria es... como te dije.. usar map en dream
y mas sencillo aun
dividir el fondo completo en secciones

saludos
Akaris · · Solicitar retirada
Hola de nuevo, estoy usando en estos momentos el dreamweaver y pude lograr hacerlo como queria, ahora tengo un problema y es que he pasado todo el día y no logre pasar este codigo del index que me a creado al CSS, queria saber si esto se puede, el codigo es este:

<img src="marcos.png" width="799" height="621" alt="marcos" width:"800"; height:"622" ;border:"0" usemap="#Map">

<map name="Map" id="Map">
<area shape="poly" coords="312,106,278,118,253,129,527,129,527,123,519,123,498,121,474,116,458,111,442,104,431,99,421,93,410,86,403,81,383,85,347,95" href="#" alt="boton-izquierdo" />

<area shape="poly" coords="798,129,782,120,761,112,721,99,688,90,668,85,653,81,641,89,635,94,625,99,612,106,599,111,584,116,570,120,543,122,528,123,528,128" href="#" alt="boton-derecho" />

<area shape="poly" coords="649,81,635,79,616,76,593,73,573,71,537,68,520,68,479,71,448,74,424,78,403,81,409,85,419,92,435,101,451,108,473,115,496,121,528,122,565,120,582,116,604,108,623,99,639,90" href="#" alt="boton-medio" />
</map>
Yaneth · · Solicitar retirada
poniendo un class

.imagen {width:799px; height: 622px; }
peeero lo del map, no se puede pasar al css, eso es codigo de html

saludos