Deseo hacer parecido

[Aristides777]

Buenas.. lo que deseo es hacer esta pequeña barra para mi web en construcción...
es en html... es la barra de elrellano.com y les agradeceria si me pueden ayudar a hacer uno parecido pero sin <ul> <li> y <p>
nose si seria bueno hacerlo como celda pero llevaria mucho código...
Uds. que me recomiendan hacer? hay alguna web donde trata del tema?
Desde ya gracias..
Saludos

[Mikmoro]

¿Y lo quieres hacer sin ul, li ni p por alguna razón en especial?

Vamos, más que nada porque su còdigo es este:

<a href="/p150.html" title="p&aacute;gina 150">150</a> <a href="/p149.html" title="p&aacute;gina 149">149</a> <a href="/p148.html" title="p&aacute;gina 148">148</a> <a href="/p147.html" title="p&aacute;gina 147">147</a>

Mikel.

[pateketrueke]

pues aun siendo enlaces sencillos, es bastante código... yo creo que con puro HTML te vas a desesperar, un lenguaje CGI te automatizaría esto... suerte!

[daPhyre]

Que yo sepa, esas listas se hacen automáticamente con PHP o similar, mostrando links a los # más cercanos al actual...

Además, Mikel tiene un buen punto, pues es mejor hacer estos con <ul> hasta donde se, y posiblemente más facil de manejar y automatizar con CSS que una celda... Creo yo.

[Aristides777]

y me pueden ayudar para hacer con css?? quiero hacer asi como el de ellos... que al pasar el mouse sobre.. digamos que usa celda. y tenga el efecto que cambie de fondo y el color del link.. miren como funciona de elrellano.com y vean el pequeño efecto que tiene... me encanta...
por cierto.. esta con el <div><ul> sera que saben alguna web especifica sobre html... que trate mucho de <div>
Desde ya gracias

[daPhyre]

Dado tu interes, he hecho una versión propia del menú, la cual diría que es hasta mejorada por mucho, pues la de la página usa JavaScript e imagenes de mala calidad, y yo lo hice de nuevo por completo con CSS, checalo aquí:

http://mx.geocities.com/daphyreweb/w...enu-num-i.html

Ahi mismo está el código y la imagen que necesitas, solo es cuestión de cambiar los href por las páginas que desees. Espero te sirva, para mi ha sido una excelente experiencia poderlo haber hecho. ¡Mucha suerte!

[Mikmoro]

Muy bien, daPhyre. Efectivamente mucho más sencillo al menos a primera vista

Al verlo me preguntaba qué eran esos puntos que salían sobre los números tapándolos, y me he dado cuenta que un pequeño fallo: has puesto

#menu ul

cuando debería ser

ul#menu

Por eso los puntos eran los circles de los "li", ya que el list-style:none; del primer selector no está funcionando.

Mikel.

[daPhyre]

Iniciado por Mikmoro

Al verlo me preguntaba qué eran esos puntos que salían sobre los números tapándolos, y me he dado cuenta que un pequeño fallo...

¡Gracias por notar el detalle!
Lo que pasa es que decidí respetar la forma en que lo hizo Aristides777, y como yo lo ponía en un div en lugar de directo al ul, olvidé corregir esta parte. Con razón me preguntaba por qué no desaparecían los círculos antes de hacerlo horizontal, pero al hacerlo vertical en IE no me aparecía nada, y dejé de darle importancia.

Ya lo he corregido, y ahora lo he probado tambien en vertical, y queda muy bien; una nueva forma de implementarlo con tan solo quitarle el #menu li{float:left;}

Gracias Mikel!

[Mikmoro]

Muy bonito y práctico el truco de una sola imagen de fondo posicionada según el efecto.

Mikel.

[Aristides777]

Gracias daPhyre
Guauu.. no crei que me ayudarás tan grande.. en verdad te debo una... pero una bien grande... tenes alguna web para pasarte y hacerte publicidad en mi blog en forma de agradecerte?? tienes alguna parte usando adsense para ayudarte?? porque no tengo creditcard ni paypal
En verdad te agradezco mucho.. pero como quiero hacer bien sencillo y liviano en vez de las imagenes de fondo le pondre en hexadecimal...
gracias por tu enorme ayuda....

[daPhyre]

Descuida, no ha sido problema alguno; la verdad me dio curiosidad hacerlo, por lo que tambien le saqué provecho para experiencia propia. Veo que ya visitaste mi página, y notarás que no es garn cosa aun, pero poco a poco le haré detalles... Comenzando por mudarme a un servidor de verdad =P

Ahora, en cuanto a la imagen, si notas, esta pesa apenas un cuarto de Kb, por lo que practicamente no representa carga alguna, y le da un atractivo bonito. Ahora, si aun así prefieres hacerlo con puro CSS, checa esta versión:

http://mx.geocities.com/daphyreweb/w.../menu-num.html

Solo le quité los links a la imagen, y le agregué los borders para que se vean identicos. La única diferencia real es que los bordes ya no se ven redondeados, pero no es un cambio tan radical. Decide por el que más te guste. Suerte!