Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: carwen en 24 Julio 2013, 08:08 am


Título: ayuda con css3
Publicado por: carwen 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:
(http://i1301.photobucket.com/albums/ag111/Max_Saavedra/LOL/Capturadepantallade2013-07-24025328_zps08bac9e8.png)
y el resultado que esperaba obtener era este:
(http://i1301.photobucket.com/albums/ag111/Max_Saavedra/LOL/lalla_zps3277a697.jpg)
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:
(http://i1301.photobucket.com/albums/ag111/Max_Saavedra/LOL/barra_cabecera_zps9ec2d5a2.png)
espero que puedan ayudar desde ya muchas gracias por todo.

Título: Re: ayuda con css3
Publicado por: EFEX 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.

Título: Re: ayuda con css3
Publicado por: carwen 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.

Título: Re: ayuda con css3
Publicado por: EFEX 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.  

Título: Re: ayuda con css3
Publicado por: carwen en 24 Julio 2013, 20:17 pm
muchas gracias por tu ayuda me quedo perfecto


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines