ayuda con css3

carwen · 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 (html5) [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Menu</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    </head>
    
    <body>
        <header>
            <nav>
              <ul>
                <li><a href="#">Lucian</a>
                <li><a href="#">Hide n Seek</a>
                <li><a href="#">Soporte</a>
              </ul>
            <nav>
       	</header>
    </body>
</html>

y mi css es el siguiente:

Código (css) [Seleccionar]

header nav ul li{
	position:relative;
	top:-16px;
	left:-46px;
	display:inline-block;
	margin:-2px;
}
header nav ul li a{	
	background-image: url(../img/barra_cabecera.png);
	background-repeat:repeat-x;
	text-decoration:none;
	color: white;
	position:relative;
	width:250px;
	height:38px;
}

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.

EFEX · 24 Julio 2013, 16:51 PM

Código (html4strict) [Seleccionar]


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
           <title>Menu</title>
           <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
           <style type="text/css">
        body, ul{
          margin: 0px;
          padding: 0px;
        }
        header nav ul li{
          /*
          top:0px;
          left:0px;
          margin:0px;
          display:inline-block;
          */
          float: left;
          list-style-type: none;
          background-color: #5E80B3;
          padding: 8px 12px 8px 12px;
          border-right: 1px #3E609A solid;
          border-bottom: 1px #3E609A solid;
        }
        header nav ul li:first-child{
          padding-right: 60px;
        }
        header nav ul li a{ 
          /*
          background-image: url(../img/barra_cabecera.png);
          background-repeat:repeat-x;
          width:250px;
          height:38px;
          position:relative;
          */
          text-decoration:none;
          color: white;
        }

       </style>
       </head>
       
       <body>
           <header>
               <nav>
                 <ul>
                   <li><a href="#">Lucian</a>
                   <li><a href="#">Hide n Seek</a>
                   <li><a href="#">Soporte</a>
                 </ul>
               </nav> <!-- No habias cerrado el tag -->
          </header>
       </body>
    </html>

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.

carwen · 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.

EFEX · 24 Julio 2013, 20:07 PM

Si de la siguiente forma.

Código (css) [Seleccionar]


-webkit-border-radius: 10px 11px 12px 13px;
-moz-border-radius: 10px 11px 12px 13px;
border-radius: 10px 11px 12px 13px;

ó

Código (css) [Seleccionar]


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

carwen · 24 Julio 2013, 20:17 PM

muchas gracias por tu ayuda me quedo perfecto

Test Foro de elhacker.net SMF 2.1

ayuda con css3

carwen

EFEX

carwen

EFEX

carwen