Foros del Web » Creando para Internet » CSS »

Ayuda con Iconos Estilos

Estas en el tema de Ayuda con Iconos Estilos en el foro de CSS en Foros del Web. Hola, tengo conocimientos muy basicos de CSS. Y hoy he querido crear este tipo de menu, por mas que intento no logro el objetivo de ...
  #1 (permalink)  
Antiguo 06/02/2011, 01:03
 
Fecha de Ingreso: septiembre-2010
Mensajes: 147
Antigüedad: 7 años, 2 meses
Puntos: 3
Ayuda con Iconos Estilos

Hola, tengo conocimientos muy basicos de CSS.

Y hoy he querido crear este tipo de menu, por mas que intento no logro el objetivo de que quede asi de forma horizontal:




Alguién me puede echar una manito !


Gracias :)

Dejo algo el Codigo de CSS que tengo:

Código CSS:
Ver original
  1. /* cuadro_perfil */
  2. .panel_usuario {
  3.     border: 1px solid #d8d8d8;
  4.     width:630px;
  5.     background: #fff;
  6.     float: left;
  7.     margin-left: 0px;
  8.     line-height: 12px;
  9.     margin-bottom: 15px;
  10.     color: #000;
  11.     position: relative;
  12.     padding: 10px 10px;
  13.     font-size: 11px;
  14.     text-align: left;
  15.     font-weight: normal;
  16.  
  17. }
  18.  
  19. .panel_usuario a{
  20. text-decoration:none;
  21. }
  22.  
  23. ul#panel-iconos{
  24.  
  25.  
  26. }

Código HTML:
Ver original
  1. <h1>Panel de Usuario.</h1>
  2.         <div class="panel_usuario">
  3.             <ul id="panel-iconos">
  4.                     <img src='/web/images/icons/articulo.png'>
  5.                     <a href='/web/index.php'> Publicar Anuncio</a>
  6.             </ul>          
  7.         </div>
  #2 (permalink)  
Antiguo 06/02/2011, 07:16
Avatar de tonchii  
Fecha de Ingreso: noviembre-2008
Mensajes: 159
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Ayuda con Iconos Estilos

Buenas,
Lo que puedes hacer es agregar un float:left; a los elementos dentro de un <div> no en el <ul> com vi que pusiste, asi todo te va a ir quedando alineado horizontalmente como qieres. Y un consejo haz que el enlace de cada item sea con icono y texto, no solo el texto, la gente tiende a hacer click sobre las imagenes tmb :P

Mas o menos seria:
Código CSS:
Ver original
  1. #nav {
  2. height:120px;
  3. width:800px;
  4. }
  5. .item {
  6.     float:left;
  7. }

Código HTML:
Ver original
  1. <div id="nav">
  2.     <div class="item">
  3.             <a href='/web/index.php'>
  4.                   <img src='/web/images/icons/articulo.png'><br />
  5.                    Publicar Anuncio
  6.             </a>
  7.  
  8.     <div class="item">
  9.             <a href='/web/index.php'>
  10.                   <img src='/web/images/icons/articulo.png'><br />
  11.                    Publicar otro Anuncio
  12.             </a>
  13. </div>
__________________
Por que solo seremos dueños de aquello que creemos y amemos
  #3 (permalink)  
Antiguo 06/02/2011, 12:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con Iconos Estilos

Hola:

Es muy correcto crear un menú con listas, pero en tu caso tienes el error de que no tienen <li>

Código:
<h1>Panel de Usuario.</h1>
        <div class="panel_usuario">
            <ul id="panel-iconos">
                <li>
                    <img src='/web/images/icons/articulo.png'>
                    <a href='/web/index.php'> Publicar Anuncio</a>
                 </li>
            </ul>           
        </div>
Saludos.


Etiquetas: estilos, iconos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:21.