elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ayuda con css3		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ayuda con css3  (Leído 2,156 veces)
carwen

Desconectado Desconectado

Mensajes: 16


Ver Perfil
ayuda con css3
« en: 24 Julio 2013, 08:08 am »
Hola a todos, no se si esta bien este mensaje aca. Ya que vi que era PHP y Base de DATOS, y mi problema es con css3, de igual forma agradeceria si pueden brindarme ayuda.
Bueno veran lo que quiero hacer, es una barra de navegacion en la cabecera mi codigo html5 es este:
Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>Menu</title>
  5.         <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  6.     </head>
  7.  
  8.     <body>
  9.         <header>
  10.             <nav>
  11.               <ul>
  12.                 <li><a href="#">Lucian</a>
  13.                 <li><a href="#">Hide n Seek</a>
  14.                 <li><a href="#">Soporte</a>
  15.               </ul>
  16.             <nav>
  17.        	</header>
  18.     </body>
  19. </html>
y mi css es el siguiente:
Código
  1. header nav ul li{
  2. 	position:relative;
  3. 	top:-16px;
  4. 	left:-46px;
  5. 	display:inline-block;
  6. 	margin:-2px;
  7. }
  8. header nav ul li a{	
  9. 	background-image: url(../img/barra_cabecera.png);
  10. 	background-repeat:repeat-x;
  11. 	text-decoration:none;
  12. 	color: white;
  13. 	position:relative;
  14. 	width:250px;
  15. 	height:38px;
  16. }
  17.  
ahora bien el resultado que me queda es este:

y el resultado que esperaba obtener era este:

Nota: Solo en el alto de la imagen de la barra me refiero.
La imagen de background que uso en el css es de 38px (cosa que en el resultado que me muestra como pueden ver no es de 38px y por ende no me muestra la imagen completa sino una parte de esta) y es esta:

espero que puedan ayudar desde ya muchas gracias por todo.
En línea
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: ayuda con css3
« Respuesta #1 en: 24 Julio 2013, 16:51 pm »
Código
  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.        <head>
  4.            <title>Menu</title>
  5.            <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  6.            <style type="text/css">
  7.         body, ul{
  8.           margin: 0px;
  9.           padding: 0px;
  10.         }
  11.         header nav ul li{
  12.           /*
  13.           top:0px;
  14.           left:0px;
  15.           margin:0px;
  16.           display:inline-block;
  17.           */
  18.           float: left;
  19.           list-style-type: none;
  20.           background-color: #5E80B3;
  21.           padding: 8px 12px 8px 12px;
  22.           border-right: 1px #3E609A solid;
  23.           border-bottom: 1px #3E609A solid;
  24.         }
  25.         header nav ul li:first-child{
  26.           padding-right: 60px;
  27.         }
  28.         header nav ul li a{ 
  29.           /*
  30.           background-image: url(../img/barra_cabecera.png);
  31.           background-repeat:repeat-x;
  32.           width:250px;
  33.           height:38px;
  34.           position:relative;
  35.           */
  36.           text-decoration:none;
  37.           color: white;
  38.         }
  39.  
  40.        </style>
  41.        </head>
  42.  
  43.        <body>
  44.            <header>
  45.                <nav>
  46.                  <ul>
  47.                    <li><a href="#">Lucian</a>
  48.                    <li><a href="#">Hide n Seek</a>
  49.                    <li><a href="#">Soporte</a>
  50.                  </ul>
  51.                </nav> <!-- No habias cerrado el tag -->
  52.           </header>
  53.        </body>
  54.     </html>
  55.  

No hace falta usar una imagen, con css podes hacerlo, estabas tratando de darle un alto y ancho directamente a los enlaces siempre se manipulta UL LI.
En línea
GITHUB 
carwen

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: ayuda con css3
« Respuesta #2 en: 24 Julio 2013, 18:26 pm »
gracias ahora lo pruevo...igual se que no es necesario una imagen pero en mi caso si por que la necesito para el principio y el final de la barra al principio lleva un radius que bueno eso si se puede hacer con css pero al final la brra tiene que quedar como la que subi.
En línea
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: ayuda con css3
« Respuesta #3 en: 24 Julio 2013, 20:07 pm »
Si de la siguiente forma.

Código
  1. -webkit-border-radius: 10px 11px 12px 13px;
  2. -moz-border-radius: 10px 11px 12px 13px;
  3. border-radius: 10px 11px 12px 13px;
  4.  

ó

Código
  1. -webkit-border-radius: 10px;
  2. -moz-border-radius: 10px;
  3. border-radius: 10px;
  4.  
En línea
GITHUB 
carwen

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: ayuda con css3
« Respuesta #4 en: 24 Julio 2013, 20:17 pm »
muchas gracias por tu ayuda me quedo perfecto
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
¿HTML5 y CSS3?
Desarrollo Web 		TheEGG 89 7 4,631 Último mensaje 26 Febrero 2013, 13:45 pm
por Linton
Problema con CSS3 y Firefox
Desarrollo Web 		KeyPy HH 7 3,609 Último mensaje 9 Mayo 2013, 02:15 am
por KeyPy HH
Aparición imagen en CSS3
Desarrollo Web 		supradyn_activo 2 1,831 Último mensaje 7 Octubre 2013, 14:36 pm
por Almapa
Duda con CSS3.
Desarrollo Web 		0xDani 6 2,058 Último mensaje 23 Enero 2014, 15:46 pm
por 0xDani
Ayuda con Media Queries de CSS3
Desarrollo Web 		eduardo(...)brutaldeath 0 1,720 Último mensaje 28 Septiembre 2014, 22:59 pm
por eduardo(...)brutaldeath
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines