Foros del Web » Creando para Internet » CSS »

Ayuda hacer botones como el de esta pagina

Estas en el tema de Ayuda hacer botones como el de esta pagina en el foro de CSS en Foros del Web. Bueno estoy tratando de hacer botones en css como los de esta pagina http://byethost.com/index.php esos botones estan muy buenos (los que esta arribita...).... Pero como ...
  #1 (permalink)  
Antiguo 08/04/2008, 17:09
Avatar de Carlmycol  
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 10 años
Puntos: 3
Ayuda hacer botones como el de esta pagina

Bueno estoy tratando de hacer botones en css como los de esta pagina http://byethost.com/index.php esos botones estan muy buenos (los que esta arribita...).... Pero como se hacen??... si alguien me podria dar una idea

Gracias,

ATT: Carlmycol

salu2
  #2 (permalink)  
Antiguo 08/04/2008, 17:32
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Ayuda hacer botones como el de esta pagina

¿Los del menú?
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 08/04/2008, 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
Re: Ayuda hacer botones como el de esta pagina

Con dos imágenes de fondo, desde luego. Pero te advierto que tiene bastante curro.

Mikel.
  #4 (permalink)  
Antiguo 08/04/2008, 17:52
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Ayuda hacer botones como el de esta pagina

si. es lo que llaman 'sliding door' o puerta corrediza en español:
http://www.alistapart.com/articles/slidingdoors/
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...

Última edición por juaniquillo; 10/04/2008 a las 12:14
  #5 (permalink)  
Antiguo 08/04/2008, 18:38
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
Re: Ayuda hacer botones como el de esta pagina

Al final me he puesto los mangüitos y lo he hecho. Lo de que el menú tenía mucho curro era para darme pote

http://www.araudi.net/menu_carlmycol.html

El código no es complicado:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu CSS</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#menu { }
ul { margin-top: 20px;
}
li { display: inline;
margin-left: 20px;
}
a { padding: 4px 0px 5px 15px;
color: rgb(0, 0, 0);
text-decoration: none;
font: bold 0.8em Verdana;
line-height: 28px;
}
a span { padding: 4px 20px 5px 0px;
margin-top: 0px!important;
margin-top: -4px;
}
a:hover {background: transparent url(img/fondo_izq.gif) repeat-y;
}
a:hover span {background: transparent url(img/fondo_der.gif) repeat-y right top;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Free Hosting</span></a></li>
<li><a href="#"><span>Paid Hosting</span></a></li>
<li><a href="#"><span>Resellers</span></a></li>
<li><a href="#"><span>Servers</span></a></li>
</ul>
</div>
</body>
</html>
Mikel.
  #6 (permalink)  
Antiguo 08/04/2008, 19:03
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Ayuda hacer botones como el de esta pagina

Muy bueno. buen uso del hover, aunque no se ve alineado en IE7.

__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #7 (permalink)  
Antiguo 08/04/2008, 19:08
Avatar de Carlmycol  
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 10 años
Puntos: 3
Re: Ayuda hacer botones como el de esta pagina

Si es seriamente trabajoso ;) sobretodo hacer las imagenes ;)... Gracias la verdad resolviste mi duda con esos botones que me pareciern muy buenos ;)... y juanquillo me resolviste la duda antes de preguntar

Bueno eso se puede arreglar con el validador no??

salu2 ;)
  #8 (permalink)  
Antiguo 08/04/2008, 19:12
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
Re: Ayuda hacer botones como el de esta pagina

Cita:
Iniciado por juaniquillo Ver Mensaje
Muy bueno. buen uso del hover, aunque no se ve alineado en IE7.

Demonios, es que hiláis muy fino Lo he mirado en FF y IE6.

Pero esto no va a quedar así, por tutatis. Mikel.
  #9 (permalink)  
Antiguo 08/04/2008, 19:17
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Ayuda hacer botones como el de esta pagina

jajajaja. Lo siento Mikel. Ya veo que no vas a dormir esta noche pensando en esto...
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #10 (permalink)  
Antiguo 08/04/2008, 19:25
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
Re: Ayuda hacer botones como el de esta pagina

Ná, ná.

Por suerte, como ya sabemos que los IE son completamente idiotas (incluido el 7), pues lo arreglamos con esto:

<!--[if IE]><style>a span {margin-top: -4px;}</style><![endif]-->

es decir, queda así:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu CSS</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#menu { }
ul { margin-top: 20px;
}
li { display: inline;
margin-left: 20px;
}
a { padding: 4px 0px 5px 15px;
color: rgb(0, 0, 0);
text-decoration: none;
font: bold 0.8em Verdana;
line-height: 28px;
}
a span { padding: 4px 20px 5px 0px;
}
a:hover {background: transparent url(img/fondo_izq.gif) repeat-y;
}
a:hover span {background: transparent url(img/fondo_der.gif) repeat-y right top;
}
</style>
<!--[if IE]><style>a span {margin-top: -4px;}</style><![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Free Hosting</span></a></li>
<li><a href="#"><span>Paid Hosting</span></a></li>
<li><a href="#"><span>Resellers</span></a></li>
<li><a href="#"><span>Servers</span></a></li>
</ul>
</div>
</body>
</html>
Ahora dime que en Safari para Mac OSX 10.25 no va y me piro a dormir

Mikel.
  #11 (permalink)  
Antiguo 08/04/2008, 19:37
Avatar de Carlmycol  
Fecha de Ingreso: diciembre-2007
Ubicación: Los Teques, Venezuela
Mensajes: 240
Antigüedad: 10 años
Puntos: 3
Re: Ayuda hacer botones como el de esta pagina

Bueno si tubiera una mac te diria que no se xD...

Gracias de nuevo men ;D

PD: eso no es trabajo de un validador??,... digo nunca use uno pero he oido de ellos

salu2

Última edición por Carlmycol; 08/04/2008 a las 19:50
  #12 (permalink)  
Antiguo 09/04/2008, 00:37
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Ayuda hacer botones como el de esta pagina

jajaja, no se en safari para Mac OSX 10.25, pero en safari para windows se ve muy bien...
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #13 (permalink)  
Antiguo 10/04/2008, 05:57
 
Fecha de Ingreso: marzo-2008
Mensajes: 20
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Ayuda hacer botones como el de esta pagina

hola amigos!
que tal ? estoy interesada en hacer ese efecto pero no tengo ni idea. me lo podeis explicar!! gracias
  #14 (permalink)  
Antiguo 10/04/2008, 06:12
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
Re: Ayuda hacer botones como el de esta pagina

Pues todo lo que necesitas lo tienes ahí.

http://www.araudi.net/menu_carlmycol.html

o copiando directamente el código que puse un par de post más arriba. Como verás, el código css está dentro del propio html, así que no necesitas otro archivo. Únicamente bajarte las imágenes de aquí:



http://www.araudi.net/img/fondo_izq.gif



http://www.araudi.net/img/fondo_der.gif

Y con eso tienes todo lo necesario.

Estúdialo e intenta adaptarlo al caso donde lo quieres usar.

Si después de pelearte con ello bastante no lo consigues, pide ayuda y te echaremos un cable. Pero antes inténtalo tú, que es como se aprende

Mikel.
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 06:32.