Foros del Web » Creando para Internet » CSS »

lista con iconos

Estas en el tema de lista con iconos en el foro de CSS en Foros del Web. hola, tengo el siguiente codigo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código css: Ver original .content {     width : 271px ;       height : auto ...
  #1 (permalink)  
Antiguo 18/05/2009, 16:01
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 13 años, 1 mes
Puntos: 43
lista con iconos

hola, tengo el siguiente codigo:
Código css:
Ver original
  1. .content{
  2.     width:271px;
  3.  
  4.     height:auto;
  5.  
  6.     border: 1px solid;
  7.    
  8.     background-color: #eaecf5;
  9.  
  10.     margin: 0 0 10px 7px;
  11. }
  12.  
  13. h1{
  14.  
  15.     font-family: Arial,Helvetica,sans-serif;
  16.  
  17.     font-size: 16px;
  18.  
  19.     padding:28px 0 0 20px;
  20.  
  21.    
  22. }
  23.  
  24. span{
  25.    color:#1f497d;
  26.  
  27.    font-weight: bolder;
  28. }
  29.  
  30. .facts{
  31.    font-family: Arial,Helvetica,sans-serif;
  32.  
  33.    font-size:15px;
  34.  
  35.    padding:0 0 0 20px;
  36.  
  37.    font-weight: bold;
  38. }
  39.  
  40. ul{
  41.     padding: 0 0 0 20px;
  42.  
  43.     list-style: none;
  44. }
  45.  
  46. ul li {
  47.    /*background-image: url(../Nutrition+Facts/images/newexams/CostSheet_r3_c8.jpg);*/
  48.  
  49.    padding: 0 0 5px 3px;
  50.  
  51.    border-bottom: 1px solid;
  52.  
  53.    margin: 0 18px 2px 0;
  54. }
  55. ul li .itemfacts{
  56.    
  57.     margin: 0 0 0 1px;
  58.  
  59.     color:#000;    
  60.  
  61.     float: left;
  62.  
  63.     background: url(../Nutrition+Facts/images/newexams/time.png) 8px 6px no-repeat;
  64.  
  65.     padding:4px 0 0 29px;
  66. }
  67.  
  68. ul li .itemdetails{
  69.    
  70.     text-align:right;
  71.  
  72.     padding: 0 3px 0 0;
  73. }
  74.  
  75. #duration{
  76.  
  77.  
  78.     background: url(../Nutrition+Facts/new_images/yellow_mail.png)8px 6px no-repeat;
  79.  
  80.     background-repeat: no-repeat;
  81.  
  82.     width:10%;
  83.  
  84.     height:10%;
  85.  
  86.     margin: 0 -10px 0 0;
  87.  
  88.  
  89.  
  90. }
  91.  
  92. .aclarations{
  93.  
  94.    
  95.     font-style: italic;
  96.  
  97.     font-size:11px;
  98.  
  99.     padding: 0 0 0 23px;
  100.  
  101.     font-weight: bold;
  102.  
  103.    
  104. }
  105.  
  106. .other{
  107.  
  108.     float:inherit;
  109.    
  110.     width:238px;
  111.  
  112.     margin: 0 0 10px 17px;
  113.    
  114.     border: 3px solid;
  115.    
  116. }
  117.  
  118. .other h1{
  119.     padding: 0 0 0 10px;
  120.    
  121. }
  122.  
  123. .other ul{
  124.     padding: 0 0 0 20px;
  125.  
  126.     list-style: none;
  127. }
  128.  
  129. .other ul li {
  130.    /*background-image: url(../Nutrition+Facts/images/newexams/CostSheet_r3_c8.jpg);*/
  131.  
  132.    padding: 0 0 5px 3px;
  133.  
  134.    border-bottom: 1px solid;
  135.  
  136.    margin: 0 18px 2px 0;
  137. }
  138. .other ul li .itemleed{
  139.  
  140.     margin: 0 0 0 1px;
  141.  
  142.     color:#000;
  143.  
  144.     float: left;
  145.  
  146.     background: url(../Nutrition+Facts/images/newexams/time.png) 8px 6px no-repeat;
  147.  
  148.     padding:4px 0 0 13px;
  149. }
  150.  
  151. .other ul li .item{
  152.  
  153.     text-align:right;
  154.  
  155.     padding: 0 0 0 10px;
  156. }
  157.  
  158. hr{
  159.    
  160.     background: url(../Nutrition+Facts/images/stories/facts/bar2.png);
  161.     width:221px;
  162.    
  163.     padding-top:10px;
  164. }

y este es mi html:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  4. <script type="text/javascript">
  5. function MM_swapImgRestore() {
  6.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  7. }
  8. function MM_preloadImages() {
  9.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  10.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  11.    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  12. }
  13. function MM_findObj(n, d) {
  14.  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  15.    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  16.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  17.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  18.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  19. }
  20. function MM_swapImage() {
  21.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  22.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  23. }
  24. </head>
  25. <img src="images/stories/blank.jpg" width="570" height="1" />

sigue en la respuesta asi puedo poner todo
  #2 (permalink)  
Antiguo 18/05/2009, 16:08
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 13 años, 1 mes
Puntos: 43
Respuesta: lista con iconos

Código html:
Ver original
  1. <table width="570" border="0" cellspacing="4">
  2.   <tr>
  3.     <td width='300' VALIGN=TOP> <a onmouseout="MM_swapImgRestore()" onmouseover="document.getElementById('div1').innerHTML = '<p><b>LEED Green Associate </b>is the most basic level of LEED accredidation and required before moving on to pursue a specialty LEED  credential.</p><p><b>Who  should take this exam:</b> Any professional interested in developing a basic knowledge  of green building design, construction, and operations.</p>'"><img src="images/stories/facts/GreenAssociate1.png" name="Image1" border="0" id="Image1" /></a><br />
  4.     <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/stories/facts/GreenAssociate2_over.png',1);document.getElementById('div1').innerHTML = '<b>Duration:</b> Your two-day LEED prep course will be taught by a LEED accredited professional with actual LEED project experience.  All CleanEdison instructors have extensive knowledge of the building industry as  engineers, architects  and/or planners.'"><img src="images/stories/facts/GreenAssociate2.png" name="Image13" border="0" id="Image13" /></a><br />
  5.  <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/stories/facts/GreenAssociate3_over.png',1);document.getElementById('div1').innerHTML = '<b>Time:</b> Your two-day LEED prep course will last between 9:00am and 5:00pm each day, but please try to arrive early. ';"><img src="images/stories/facts/GreenAssociate3.png" name="Image14" border="0" id="Image14" /></a><br />
  6. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/stories/facts/GreenAssociate4_over.png',1);document.getElementById('div1').innerHTML = '<b>Prerequisites:</b> There are no prerequisites for the Green Associate Exam.  None.  Zilch.  Zero. '"><img src="images/stories/facts/GreenAssociate4.png" name="Image15" border="0" id="Image15" /></a><br />
  7. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/stories/facts/GreenAssociate5_over.png',1);document.getElementById('div1').innerHTML = '<b>Continuing Education Credits:</b>The CleanEdison Green Associate Exam is eligible for 8 hours of CEU Credits.  It is also eligible for PDH, HSW, BOMI and IFMA Credits. '"><img src="images/stories/facts/GreenAssociate5.png" name="Image16" border="0" id="Image16" /></a><br />
  8. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/stories/facts/GreenAssociate6_over.png',1);document.getElementById('div1').innerHTML = '<b>Price:</b>Price:  All courses come with the following materials and services<br>  - 5 online practice exams from the industry-leading online test provider  ($50 value)<br>   - CleanEdison course guide and text book<br>    - LEED credits summary sheets  simplify your studies<br>    - Detailed study plan and study schedule maximize your efficiency<br>   - Access to instructors after your class is over for any last minute questions'"><img src="images/stories/facts/GreenAssociate6.png" name="Image17" border="0" id="Image17" /></a><br />
  9. <img src="images/stories/facts/GreenAssociate7.png" name="Image1" border="0" id="Image1" /><br />
  10. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','images/stories/facts/GreenAssociate8_over.png',1);document.getElementById('div1').innerHTML = 'LEED AP Building Design and Construction (BD+C) has replaced LEED AP for New Construction v2.2.�This specialty provides a standard for professionals participating in the design and construction phases of high-performance, healthful, durable, affordable, and environmentally sound commercial, institutional, and high-rise residential buildings.'"><img src="images/stories/facts/GreenAssociate8.png" name="Image18" border="0" id="Image18" /></a><br />
  11. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','images/stories/facts/GreenAssociate9_over.png',1);document.getElementById('div1').innerHTML = '<p><strong>LEED  AP Operations and Maintenance </strong>(O+M) has replaced LEED AP for <u>Existing Buildings  v2.0</u>.</p><p>Who should take this exam: Professionals  engaged in the operation and maintenance of existing buildings that implement  sustainable practices and reduce enveironmental impact of a building in its day  to day operations.</p>- Property Managers<br>- Janitorial Services<br>- Contractors<br>- Architects<br>- Engineers<br>- Remodelers<br>- Government Agencies<br>- Schools and  Universities<br> - Building Owners'"><img src="images/stories/facts/GreenAssociate9.png" name="Image19" border="0" id="Image19" /></a><br />
  12. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/stories/facts/GreenAssociate10_over.png',1);document.getElementById('div1').innerHTML = '<p><strong>LEED  AP Interior Design ad Construction </strong>(ID+C) has replaced  LEED <u>Commercial Interiors  v2.0</u>. </p><p><strong>Who  should  take this exam: </strong>Professionals engaged  in the design and construction of high-performance commercial spaces and tenant  improvements.</p>-  Architects<br>-  Contracters<br>-  Construction  Managers<br>-  Engineers<br>-  Government Agencies<br>-  Schools and Universities<br>-  Building Owners<br>-  Interior Designers<br>-Product  and Building System Managers<br> -Suppliers to the Construction Industry'"><img src="images/stories/facts/GreenAssociate10.png" name="Image20" border="0" id="Image20" /></a><br />
  13. <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/stories/facts/GreenAssociate11_over.png',1);document.getElementById('div1').innerHTML = 'This specialty provides a standard for professionals participating in design and construction of high-performance green homes that use less energy, water, and natural resources; create less waste; and are more healthful and comfortable for the occupants. '"><img src="images/stories/facts/GreenAssociate11.png" name="Image21" border="0" id="Image21" /></a><br />
  14. <img src="images/stories/facts/GreenAssociate12.png" name="Image1" border="0" id="Image1" /><br /></td>
  15.     <td VALIGN=TOP><div id="div1">
  16.       <p><b>LEED Green Associate </b>is the most basic level of LEED accredidation and required before moving on to pursue a specialty LEED  credential.</p><p><b>Who  should take this exam:</b> Any professional interested in developing a basic knowledge  of green building design, construction, and operations.</p>
  17.       </div></td>
  18.   </tr>
  19. <div class="content">
  20.     <h1>CleanEdison: <span>Energy Audit</span></h1>
  21.     <p class="facts">Class Facts</p>
  22.     <ul>
  23.         <li><div class="itemfacts" id="duration">Duration</div> <div class="itemdetails">3 days</div></li>
  24.        
  25.         <li><div class="itemfacts">Time</div> <div class="itemdetails">9:00am - 5:00pm</div></li>
  26.  
  27.         <li><div class="itemfacts">Prerequisites</div> <div class="itemdetails">yes</div></li>
  28.  
  29.         <li><div class="itemfacts">CEU Credits</div> <div class="itemdetails">12 hours</div></li>
  30.  
  31.         <li><div class="itemfacts">Prices</div> <div class="itemdetails">3 days</div></li>
  32.  
  33.     </ul>
  34.  
  35.     <p class="aclarations">
  36.         * call for Student &amp; Unemployed discounts<br/>
  37.         ** AIA&amp;CES, PDH, HSW, BOMI and IFMA<br/>
  38.         *** Aska about our tailored group classes<br/>
  39.  
  40.     </p>
  41.  
  42.     <div class="other">
  43.         <h1>Other CleanEdison courses</h1>
  44.         <hr/>
  45.         <ul>
  46.         <li><div class="itemleed">LEED</div> <div class="item">Green Associate</div></li>
  47.  
  48.         <li><div class="itemleed">LEED AP+</div> <div class="item">BD+C</div></li>
  49.  
  50.         <li><div class="itemleed">LEED AP+</div> <div class="item">ID+C</div></li>
  51.  
  52.         <li><div class="itemleed">LEED AP+</div> <div class="item">O+M</div></li>
  53.        
  54.  
  55.     </ul>
  56.     </div>
  57. </div>
la tabla esta armada con imagenes, y yo quiero hacerlo todo con css, ya logre armar todo solo me falta esto:
1- que las li tenga un icono cada una.
2- como poner las lineas negras debajo de los <h1> y en el ultimo elemento de la lista.
asi es como tengo ahora el que hice con css:



y quiero que quede parecido a esto (original):
  #3 (permalink)  
Antiguo 18/05/2009, 16:31
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 5 meses
Puntos: 76
Respuesta: lista con iconos

Cita:
1- que las li tenga un icono cada una.
No sé si es el modo correcto, pero yo lo hago de esta manera:

- Pongo el atributo "list-style: none".
- Dejo un margen a la izquierda suficiente para que quepa la imagen, "padding-left: 20px"
- Pongo la imagen como fondo mediante "background: url(icono.png) bottom left no-repeat"

Cita:
2- como poner las lineas negras debajo de los <h1>
border-bottom: 4px black;

Cita:
y en el ultimo elemento de la lista.
Creo que podrías conseguirlo usando lo mismo para el UL/OL. Si no, una "clase" específica para el último elemento de la lista.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #4 (permalink)  
Antiguo 18/05/2009, 16:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: lista con iconos

1- que las li tenga un icono cada una:
con la propiedad "list-style-image: url(...);", y para que cada uno tenga una imagen distinta, asignando distintas clases a cada li

2-como poner las lineas negras debajo de los <h1>:
con la propiedad "border-bottom: Xpx solid #000;", o utilizar una imagen de fondo posicionada abajo (background: url (...) bottom left;)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 00:21.