Jump to content

mark_o

Warianos
  • Posts

    27
  • Joined

  • Last visited

Información Personal

  • Pais
    Chile
  • Genero
    Hombre

mark_o's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. este menu esta horizontal y lo kiero dejar vertical , como lo puedo hacer? <html> <head> <style type="text/css"> body{ background:#3CF; } nav{ /*Bordes redondeados*/ -webkit-border-radius:10px;/*Para chrome y Safari*/ -moz-border-radius:10px;/*Para Firefox*/ -o-border-radius:10px;/*Para Opera*/ border-radius:10px;/*El estandar por defecto*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/ /*Degradados*/ background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/ background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/ background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/ overflow:hidden; padding:10px; width:950px; } nav ul{ list-style:none; margin:0 10px 0 10px; padding:0; } nav ul li{ /*Bordes redondeados*/ -webkit-border-radius:5px;/*Chrome y Safari*/ -moz-border-radius:5px;/*Firefox*/ -o-border-radius:5px;/*Opera*/ border-radius:5px;/*Estandar por defecto*/ float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin-right:10px; text-align:center; /*Sombras para texto, los mismos parametros que box-shadow*/ text-shadow: 0px 1px 0px #FFF; } nav ul li:hover{ /*Degradado de fondo*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/ background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/ background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/ background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/ /*Sombras*/ -webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/ -moz-box-shadow: 1px -1px 0px #999;/*Firefox*/ -o-box-shadow: 1px -1px 0px #999;/*Opera*/ box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/ border:1px solid #E3E3E3; } nav ul li a{ color:#999; display:block; padding:10px; text-decoration:none; /*Transiciones*/ -webkit-transition: 0.4s linear all; -moz-transition: 0.4s linear all; -o-transition: 0.4s linear all; transition: 0.4s linear all; } nav ul li a:hover { color:#000; } </style> </head> <body> <nav> <ul> <li><a title="Opcion 1" href="#">Opción 1</a></li> <li><a title="Opcion 2" href="#">Opción 2</a></li> <li><a title="Opcion 3" href="#">Opción 3</a></li> <li><a title="Opcion 4" href="#">Opción 4</a></li> <li><a title="Opcion 5" href="#">Opción 5</a></li> </ul> </nav> </body> </html>
  2. gracias por la ayuda y esa pagina :D , me la lei toda *-* me funciono wiiiiiiii <html> <head> <style type="text/css"> body{ background:#3CF; } nav{ /*Bordes redondeados*/ -webkit-border-radius:10px;/*Para chrome y Safari*/ -moz-border-radius:10px;/*Para Firefox*/ -o-border-radius:10px;/*Para Opera*/ border-radius:10px;/*El estandar por defecto*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/ /*Degradados*/ background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/ background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/ background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/ overflow:hidden; padding:10px; width:950px; } nav ul{ list-style:none; margin:0 10px 0 10px; padding:0; } nav ul li{ /*Bordes redondeados*/ -webkit-border-radius:5px;/*Chrome y Safari*/ -moz-border-radius:5px;/*Firefox*/ -o-border-radius:5px;/*Opera*/ border-radius:5px;/*Estandar por defecto*/ float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin-right:10px; text-align:center; /*Sombras para texto, los mismos parametros que box-shadow*/ text-shadow: 0px 1px 0px #FFF; } nav ul li:hover{ /*Degradado de fondo*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/ background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/ background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/ background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/ /*Sombras*/ -webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/ -moz-box-shadow: 1px -1px 0px #999;/*Firefox*/ -o-box-shadow: 1px -1px 0px #999;/*Opera*/ box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/ border:1px solid #E3E3E3; } nav ul li a{ color:#999; display:block; padding:10px; text-decoration:none; /*Transiciones*/ -webkit-transition: 0.4s linear all; -moz-transition: 0.4s linear all; -o-transition: 0.4s linear all; transition: 0.4s linear all; } nav ul li a:hover { color:#000; } </style> </head> <body> <nav> <ul> <li><a title="Opcion 1" href="#">Opción 1</a></li> <li><a title="Opcion 2" href="#">Opción 2</a></li> <li><a title="Opcion 3" href="#">Opción 3</a></li> <li><a title="Opcion 4" href="#">Opción 4</a></li> <li><a title="Opcion 5" href="#">Opción 5</a></li> </ul> </nav> </body> </html> gracias
  3. <body></body> y body{} (diferencias) y donde va puesto el body{} lo mismo para el nav
  4. hola, espero que esten bien , bueno les queria pedir un favor y es q me ayudasen en q cosas x ejempo xq body{} y no <body></body> donde va 1 o el otro y lo mismo paraa la etiqueta nav{} esto es lo basico de html que entiendo <html> <head></head> <body><table><tr><td></td></tr></table></body> </html> este es un menu q me pille: la PARTE DE UL ME LA SE, LO DEMAS NO SE DONDE VA :( <nav> <ul> <li><a title="Opcion 1" href="#">Opción 1</a></li> <li><a title="Opcion 2" href="#">Opción 2</a></li> <li><a title="Opcion 3" href="#">Opción 3</a></li> <li><a title="Opcion 4" href="#">Opción 4</a></li> <li><a title="Opcion 5" href="#">Opción 5</a></li> </ul> </nav> Cada elemento de la lista será un enlace, con esto podremos manejar como se nos antoje los enlaces, con CSS3 vamos a darle el estilo magnifico que nos proporciona. Aplicando estilos con CSS3 al menú de navegación Vamos a darle estilos básicos a nuestro menú para empezar a darle código CSS3. Primero a darle un fondo al cuerpo: 1 2 3 body{ background:#3CF; } A la etiqueta NAV le damos borde redondeado con un radio de 10px , degradado de blanco a gris, padding de 10px y un ancho de 950px. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 nav{ /*Bordes redondeados*/ -webkit-border-radius:10px;/*Para chrome y Safari*/ -moz-border-radius:10px;/*Para Firefox*/ -o-border-radius:10px;/*Para Opera*/ border-radius:10px;/*El estandar por defecto*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/ /*Degradados*/ background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/ background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/ background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/ overflow:hidden; padding:10px; width:950px; } Nota: Aun CSS3 no esta terminado por lo cual utilizamos las extensiones propietarias para cada navegador. Recordemos que NAV es un contenedor para la lista, así que ahora pasamos a dar estilo a la etiqueta de UL que contiene las listas, vamos a anular el estilo de lista, darle márgenes laterales de 10px y anular el padding. 1 2 3 4 5 nav ul{ list-style:none; margin:0 10px 0 10px; padding:0; } Ahora a los elementos de la lista LI hacemos que floten a la izquierda para una vista horizontal y le damos un margen derecho de 10px para darle separación con bordes redondeados de 5px de radio, tipo de fuente, tamaño de 16px, centrado y sombras para el texto. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 nav ul li{ /*Bordes redondeados*/ -webkit-border-radius:5px;/*Chrome y Safari*/ -moz-border-radius:5px;/*Firefox*/ -o-border-radius:5px;/*Opera*/ border-radius:5px;/*Estandar por defecto*/ float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; margin-right:10px; text-align:center; /*Sombras para texto, los mismos parametros que box-shadow*/ text-shadow: 0px 1px 0px #FFF; } Al pasar el puntero sobre el elemento LI se activara el evento HOVER cambiando el fondo de este. En los degradados tenemos diferentes maneras de aplicarlo para cada navegador, en este caso para el estándar por defecto, Opera y Firefox es igual, para Chrome y Safari es diferente pero con las mismas propiedades. De tipo linear, empezamos por la parte alta hacia debajo de blanco a gris claro, con la sombra tenemos los parámetros eje X, eje Y, enfoque y color. 1 2 3 4 5 6 7 8 9 10 11 12 13 nav ul li:hover{ /*Degradado de fondo*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/ background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/ background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/ background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/ /*Sombras*/ -webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/ -moz-box-shadow: 1px -1px 0px #999;/*Firefox*/ -o-box-shadow: 1px -1px 0px #999;/*Opera*/ box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/ border:1px solid #E3E3E3; } Cada elemento LI es también un contenedor, en este caso de enlaces, a estos enlaces le daremos color gris y que sean bloques con padding de 10px, quitaremos la decoración de los enlaces. Las transiciones en CSS3 tienen diferentes parámetros, esta vez utilizamos el tiempo de 0.4 segundos, el efecto linear y aplicable a todas las propiedades básicas, ancho , color, margen, etc. 1 2 3 4 5 6 7 8 9 10 11 nav ul li a{ color:#999; display:block; padding:10px; text-decoration:none; /*Transiciones*/ -webkit-transition: 0.4s linear all; -moz-transition: 0.4s linear all; -o-transition: 0.4s linear all; transition: 0.4s linear all; } La transición esta vez se activara al pasar el puntero, el evento HOVER de CSS que cambiara de color gris el texto a negro, esto es sobre la etiqueta A de enlace. 1 2 3 nav ul li a:hover { color:#000; }
  5. mark_o

    diferencias

    pero tienen los mismos comandos o no? osea se escriben de igual forma?
  6. mark_o

    diferencias

    hola , alguien sabe en que se diferencia fedora, centos y red hat? aparte q redhat sea pagado sipo buueno eso, saludos
  7. mark_o

    diferencias

    hola , alguien sabe en que se diferencia fedora, centos y red hat? aparte q redhat sea pagado sipo buueno eso, saludos
  8. hola, ee queria preguntar si se puede subir una pag echa en visual con bd access saludos
  9. xq suben las cosas a rapidshare ? tengo q esperar 5 min !!!!!!!!!!
  10. Hay quedaste USA :burla: Bueno yo tenia entendido que también funcionaban en Rojadirecta.me Ni Toda la potencia USA puede con ROJADIRECTA Y CHC :D
×
×
  • Create New...