lista en columnas pero con iconos

chalchis · #1 (**permalink**) 01/01/2010, 19:20

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

SDEK · #2 (**permalink**) 03/01/2010, 21:21

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

chalchis · #3 (**permalink**) 03/01/2010, 21:26

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