Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 9 de 9

Tema: Tamaño de un link

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 oct, 12
    Mensajes
    51
    Poder de Reputación
    13

    Angry Tamaño de un link

    En base a este código, como hago para que el link A y B se ajusten con las dismensiones de 40x40 dentro del div parte1. Gracias.


    Código HTML:
    <!DOCTYPE html>
    <html lang="es">
    <head>	
      <title>PRUEBA DE BARRA</title>
      <meta charset="utf-8" />
      <link href="nav13.css" rel="stylesheet" type="text/css">
      
    </head>	
    <body>
     
      <nav role="navigation">
     	  <ul id="nav13">	 		
          <div id="centrado">	 		 
              <div id="parte1"> 
                  <li><a href="#">A</a></li>     
                  <li><a href="#">B</a></li>
              </div>
        
          </div>   
        </ul>	 		
      </nav>
     
     </body>
     </html>
    Código:
    *{
    	margin:0;
    	padding: 0;
    }
    
    
    body{
    	margin: 0;
    	padding: 0;
    
    
    }
    
    #centrado{
        margin: 0 auto 0 auto;
        border: 1px dashed #333;
        width: 50%;
        height: 40px;
    }
    #parte1{
    	border: 1px dashed #333;
    	width: 80px;
        height: 40px;
        display:inline-block;
        
    }
    
    #parteprin2{
        border: 1px dashed #333; 	
        width: 465px;
        height: 40px;
        display: inline-block;
        
    }
    
    
    #parte3{
        border: 1px dashed #333; 		
        width: 80px;
        height: 40px;
        display:inline-block;
            
    }
    
    
    #nav13{
        background: #cedce7; /* Old browsers */
        background: -moz-linear-gradient(top,  #cedce7 0%, #596a72 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #cedce7 0%,#596a72 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
        list-style: none;
        
    	
    }
    
    
    #nav13 li{
    	display: inline-block;
        
        
    
    }
    
    
    #nav13 li a{
        border: 1px dashed #333;
        color: white;
        text-decoration: none;
        font-family: Tahoma, Helvetica, Sans-serif;
        font-size: 33px;    
        color: #000;
        text-align:center;
        width:50%;
        height: 40px;
    }
    
    
    #nav13 li a:hover{
    	color: white;
    }

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 oct, 12
    Mensajes
    51
    Poder de Reputación
    13
    Ya di con la solucion.

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 oct, 12
    Mensajes
    51
    Poder de Reputación
    13
    Ahora tengo este problema:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <title>PRUEBA DE BARRA</title>
    <meta charset="utf-8" />
    <meta name="description" content="Todo lo que quieras saber acerca de nosotros, sobre tú y yo, es aquí en ACCESO-DIRECTO" />
    <!-- CSS y JS básico para la web -->
    <link href="nav13.css" rel="stylesheet" type="text/css">

    </head>
    <body>

    <nav role="navigation">
    <ul id="nav13">
    <div id="centrado">
    <div id="parte1">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    </div>
    <div id="parteprin2">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    </div>
    <div id="parte3">
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    </div>

    </div>
    </ul>
    </nav>

    </body>
    </html>

    *{
    margin:0;
    padding: 0;
    }


    body{
    margin: 0;
    padding: 0;


    }



    #centrado{
    margin: 0 auto 0 auto;
    width: 50%;
    height: 40px;
    }
    #parte1{
    width: 100px;
    height: 40px;
    display:inline-block;
    margin-right: 0;
    }

    #parteprin2{
    display: inline-block;
    width: 100px;
    height: 40px;
    padding-right:165px;
    padding-left:165px;
    background-color: pink;
    }


    #parte3{

    width: 100px;
    height: 40px;
    display:inline-block;

    }


    #nav13{
    background: #cedce7; /* Old browsers */
    background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
    list-style:none;
    margin:0;
    padding:0;


    }


    #nav13 li{


    }


    #nav13 li a{
    color: white;
    text-decoration: none;
    font-family: Tahoma, Helvetica, Sans-serif;
    font-size: 33px;
    color: #000;
    text-align:center;
    float: left;
    width:50%;
    height: 40px;
    }


    #nav13 li a:hover{
    color: white;
    background-color: #099;
    }

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 oct, 12
    Mensajes
    51
    Poder de Reputación
    13
    Porque 1, 2, 3 y 4. No están en linea. Gracias.

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 oct, 12
    Mensajes
    51
    Poder de Reputación
    13
    CSS ACTUALIZADO

    *{
    margin:0;
    padding: 0;
    }


    body{
    margin: 0;
    padding: 0;


    }

    nav{
    border-bottom: 3px solid #333;
    }


    #centrado{
    margin: 0 auto 0 auto;
    width: 50%;
    height: 40px;
    }
    #parte1{
    width: 100px;
    height: 40px;
    display:inline-block;
    margin-right: 0;
    }

    #parteprin2{
    display: inline-block;
    width: 100px;
    height: 40px;
    padding-right:165px;
    padding-left:165px;
    }


    #parte3{

    width: 100px;
    height: 40px;
    display:inline-block;

    }


    #nav13{
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    list-style:none;
    margin:0;
    padding:0;


    }


    #nav13 li{


    }


    #nav13 li a{

    color: white;
    text-decoration: none;
    font-family: Tahoma, Helvetica, Sans-serif;
    font-size: 33px;
    color: #000;
    text-align:center;
    float: left;
    width:50%;
    height: 40px;
    }


    #nav13 li a:hover{
    color: #099;
    background-color: #099;
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
    }

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,077
    Poder de Reputación
    26
    Hola:

    La estructura HTML esta mal, no puedes poner <div> entre un <li>; dentro de uno, sí, pero directamente en la lista (ul) no. Ordena eso y quizás funcione:

    Esto esta bien
    Código:
    <div>Otro DIV</div>
    <ul>
     <li><div>contenido</div></li>
     <li>contenido</li>
    </ul>
    <div>Más contenido</div>
    Después de arreglar ese problema revisamos nuevamente.

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    29 oct, 12
    Mensajes
    51
    Poder de Reputación
    13
    Ok. Voy a revisarlo. Gracias.

  8. #8
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    406
    Poder de Reputación
    17
    ¿Por qué quieres hacerlo con un div, para ponerle el mismo fondo a los dos enlaces? Saludos.

  9. #9
    Me va gustando esto... Habitante Avatar de Jenkins
    Fecha de Ingreso
    04 ene, 13
    Ubicación
    San Jose, Costa Rica
    Mensajes
    47
    Poder de Reputación
    13
    Prueba los siguiente:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <!-- Cambie tu meta por este -->
    <title>PRUEBA DE BARRA</title>
    <meta name="description" content="Todo lo que quieras saber acerca de nosotros, sobre tú y yo, es aquí en ACCESO-DIRECTO" />
    <!-- CSS y JS básico para la web -->
    <link rel="stylesheet" type="text/css" media="screen" href="navi13.css" />
    <!--<link href="nav13.css" rel="stylesheet" type="text/css"> Esto es lo que tenias escrito antes -->

    </head>
    <body>

    <nav role="navigation">
    <div id="centrado">
    <div id="parte1">

    <ul id="nav13"> <!-- Esto lo agregue -->
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    </ul>
    <div id="parteprin2">

    <ul id="nav13"> <!-- Esto lo agregue -->
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    </ul>
    <div id="parte3">

    <ul id="nav13"> <!-- Esto lo agregue -->
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    </ul>

    </div>
    <!-- Cierre parte2 -->
    </div>
    <!-- Cierre parte1 -->
    </div>
    <!-- Cierre Centrado -->
    </div>
    <!-- Cierre de navigation -->
    </nav>
    </body>
    </html>

    css

    *{margin:0;padding: 0;}
    body{margin: 0;padding: 0;}
    nav{}
    #centrado{float: center; margin: 0 auto 0 auto; width:800px; height: 40px;}
    #parte1{float:left; width: 100px; height: 40px; display:inline-block; margin-right: 0;}

    #parteprin2{float:left; display: block; width: 200px; height: 40px;}


    #parte3{float:left; width: 100px; height: 40px; display: block;}


    #nav13{
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    list-style:none;
    margin:0;
    padding:0;}


    #nav13 li{}
    #nav13 li a{color: white; text-decoration: none; font-family: Tahoma, Helvetica, Sans-serif; font-size: 33px;
    color: #000; text-align:center; float:left; margin:10px 0 0 10px; height: 40px;}

    Tienes que corregir mas cosas en tu codigo pero creo que esto es lo PRINCIPAL

    Avisame si te sirvio de esta forma, estamos para servirte.
    Última edición por Jenkins; 14/02/2013 a las 16:01
    Aprende Como hacer una Boda utilizando varios pasos sencillos.

Temas Similares

  1. Problemas con mi link con.... a: link
    Por carpo en el foro Foro General
    Respuestas: 6
    Último Mensaje: 05/03/2014, 19:07
  2. Resaltar tamaño del link seleccionado
    Por Adirio en el foro Todo sobre Estilos CSS
    Respuestas: 3
    Último Mensaje: 21/05/2009, 11:51
  3. Tamaño de la web....
    Por argarot en el foro Foro General
    Respuestas: 1
    Último Mensaje: 22/06/2007, 23:17

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •