Ayuda hacer botones como el de esta pagina

Carlmycol · #1 (**permalink**) 08/04/2008, 16:09

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

juaniquillo · #2 (**permalink**) 08/04/2008, 16:32

¿Los del menú?

Mikmoro · #3 (**permalink**) 08/04/2008, 16:43

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

Mikel.

juaniquillo · #4 (**permalink**) 08/04/2008, 16:52

si. es lo que llaman 'sliding door' o puerta corrediza en español:
http://www.alistapart.com/articles/slidingdoors/

Mikmoro · #5 (**permalink**) 08/04/2008, 17:38

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.

juaniquillo · #6 (**permalink**) 08/04/2008, 18:03

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

Carlmycol · #7 (**permalink**) 08/04/2008, 18:08

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

Mikmoro · #8 (**permalink**) 08/04/2008, 18:12

Cita:

Iniciado por juaniquillo

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.

juaniquillo · #9 (**permalink**) 08/04/2008, 18:17

jajajaja. Lo siento Mikel. Ya veo que no vas a dormir esta noche pensando en esto...

Mikmoro · #10 (**permalink**) 08/04/2008, 18:25

Ná, ná.

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



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>

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

Carlmycol · #11 (**permalink**) 08/04/2008, 18:37

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

juaniquillo · #12 (**permalink**) 08/04/2008, 23:37

jajaja, no se en safari para Mac OSX 10.25, pero en safari para windows se ve muy bien...

lauravm · #13 (**permalink**) 10/04/2008, 04:57

hola amigos!
que tal ? estoy interesada en hacer ese efecto pero no tengo ni idea. me lo podeis explicar!! gracias

Mikmoro · #14 (**permalink**) 10/04/2008, 05:12

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.