Foros del Web » Creando para Internet » CSS »

lista en columnas pero con iconos

Estas en el tema de lista en columnas pero con iconos en el foro de CSS en Foros del Web. hola amigos estoy creando una lista en columnas aqui el codigo css Código: ul.column{ width: 500px; padding: 0; margin: 10px 0; list-style: none; } ul.column ...
  #1 (permalink)  
Antiguo 01/01/2010, 19:20
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Pregunta lista en columnas pero con iconos

hola amigos estoy creando una lista en columnas aqui el codigo

css
Código:
ul.column{
	width: 500px;
	padding: 0;
	margin: 10px 0;
	list-style: none;
}
ul.column li {
	float: left;
	width: 150px; /*Set default width*/
	padding: 0;
	margin: 5px 0;
	display: inline;
}
.block {
	height: 100px;
	font-size: 1em;
	margin-right: 10px; /*Creates the 10px gap between each column*/
	padding: 10px;
	background: #e3e1d5;		
}
.block h2 {
	font-size: 1.8em;
}
.block img{
        /*Flexible image size with border*/
	/*width: 89%; */ /*Took 1% off of the width to prevent IE6 bug*/
	/*padding: 5%;*/		
	margin: 0 auto;
	display: block;
	-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}
aqui el html
Código:
<body>      
<ul class="column" id="filevista">
        <!--Repeating list item-->
        <li>              
            <div class="block">
              <img src="http://demo2.interactivetools.com/current/artman2/280/89202/uploads/1/image1.jpg" width="100" height="57" alt=""  />              
              <img src="../Componentes/Upload_archivos/photo_add.png" border="0" width="24" height="24"/><img src="../Componentes/Upload_archivos/caption_add.png" border="0" width="24" height="24"/>
            </div>          
           
        </li> 
        <li>              
            <div class="block">
              <img src="http://demo2.interactivetools.com/current/artman2/280/89202/uploads/1/image1.jpg" width="100" height="57" alt=""  />              
              <img src="../Componentes/Upload_archivos/photo_add.png" border="0" width="24" height="24"/><img src="../Componentes/Upload_archivos/caption_add.png" border="0" width="24" height="24"/>
            </div>          
           
        </li> 
       <!--end repeating list item-->
</ul>
</body>
mi problema es como puedo poner los inconos de manera horizontal sin que se brinquen

saludos
espero sus comentarios
__________________
gerardo
  #2 (permalink)  
Antiguo 03/01/2010, 21:21
Avatar de SDEK  
Fecha de Ingreso: diciembre-2009
Ubicación: MX
Mensajes: 156
Antigüedad: 8 años
Puntos: 8
Respuesta: lista en columnas pero con iconos

Hola,

Sugiero que el icono lo definas en el elemento li de tu css, de la siguiente manera:

Código:
li {
background: url(http://www.misitio.com/icono.png) center left no-repeat;
}
Saludos,

--------------------
SDEK
Desarrollo WEB
  #3 (permalink)  
Antiguo 03/01/2010, 21:26
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Sonrisa Respuesta: lista en columnas pero con iconos

ya lo solucione de esta manera y gracias por el aporte

saludos

Código:
<style>
#content {
float:left;
margin:0 2px;
overflow:hidden;
padding:10px 0 0 20px;
width:430px;
background-color:#666666;
}
.post
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #E5E5E5;
float:left;
margin:0 10px 15px 0;
overflow:hidden;
padding:5px 10px;
width:105px;
}

.post h2 {
font-size:13px;
margin:0 0 3px;
padding:0;
}

.clear {
clear:both;
margin:0;
padding:0;
}
</style>

en el body
Código:
<div id="content">
<!--inicio-->
	<div class="post">
    	<h2>
		<a title="Permanent Link to Design Expedite" rel="bookmark" href="http://www.bestcssgallery.com/gallery/design-expedite.htm">Design Expedite</a>
		</h2>
        <p>
			<a target="_blank" title="Design Expedite" href="http://www.designexpedite.com/">
			<img alt="Design Expedite" src="http://www.bestcssgallery.com/wp-content/uploads/2009/12/Design-Expedite-225x140.jpg" width="100" height="57"/>
			</a>
		</p>
        <div class="clear">icono      </div> 
    </div> 
    <!---->  
    <div class="post">
    	<h2>
		<a title="Permanent Link to Design Expedite" rel="bookmark" href="http://www.bestcssgallery.com/gallery/design-expedite.htm">Design Expedite</a>
		</h2>
        <p>
			<a target="_blank" title="Design Expedite" href="http://www.designexpedite.com/">
			<img alt="Design Expedite" src="http://www.bestcssgallery.com/wp-content/uploads/2009/12/Design-Expedite-225x140.jpg" width="100" height="57"/>
			</a>
		</p>
        <div class="clear">icono</div>   
    </div>
    <!---->   
    <div class="post">
    	<h2>
		<a title="Permanent Link to Design Expedite" rel="bookmark" href="http://www.bestcssgallery.com/gallery/design-expedite.htm">Design Expedite</a>
		</h2>
        <p>
			<a target="_blank" title="Design Expedite" href="http://www.designexpedite.com/">
			<img alt="Design Expedite" src="http://www.bestcssgallery.com/wp-content/uploads/2009/12/Design-Expedite-225x140.jpg" width="100" height="57"/>
			</a>
		</p>
        <div class="clear">icono</div>   
    </div>      
   
<!--fin-->    
</div>


saludos
y gracias
__________________
gerardo

Etiquetas: columnas, iconos, lista
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 15:00.