lista con iconos

destor77 · #1 (**permalink**) 18/05/2009, 15:01

hola, tengo el siguiente codigo:

Código css:

Ver original.content{
    width:271px;
 
    height:auto;
 
    border: 1px solid;
    
    background-color: #eaecf5;
 
    margin: 0 0 10px 7px;
}
 
h1{
  
    font-family: Arial,Helvetica,sans-serif;
 
    font-size: 16px;
 
    padding:28px 0 0 20px;
 
    
}
 
span{
   color:#1f497d;
 
   font-weight: bolder;
}
 
.facts{
   font-family: Arial,Helvetica,sans-serif;
 
   font-size:15px;
 
   padding:0 0 0 20px;
 
   font-weight: bold;
}
 
ul{
    padding: 0 0 0 20px;
 
    list-style: none;
}
 
ul li {
   /*background-image: url(../Nutrition+Facts/images/newexams/CostSheet_r3_c8.jpg);*/
 
   padding: 0 0 5px 3px;
 
   border-bottom: 1px solid;
 
   margin: 0 18px 2px 0;
}
ul li .itemfacts{
    
    margin: 0 0 0 1px;
 
    color:#000;    
 
    float: left;
 
    background: url(../Nutrition+Facts/images/newexams/time.png) 8px 6px no-repeat;
 
    padding:4px 0 0 29px;
}
 
ul li .itemdetails{
   
    text-align:right;
 
    padding: 0 3px 0 0;
}
 
#duration{
 
 
    background: url(../Nutrition+Facts/new_images/yellow_mail.png)8px 6px no-repeat;
 
    background-repeat: no-repeat;
 
    width:10%;
 
    height:10%;
 
    margin: 0 -10px 0 0;
 
 
 
}
 
.aclarations{
 
    
    font-style: italic;
 
    font-size:11px;
 
    padding: 0 0 0 23px;
 
    font-weight: bold;
 
    
}
 
.other{
 
    float:inherit;
    
    width:238px;
 
    margin: 0 0 10px 17px;
    
    border: 3px solid;
    
}
 
.other h1{
    padding: 0 0 0 10px;
    
}
 
.other ul{
    padding: 0 0 0 20px;
 
    list-style: none;
}
 
.other ul li {
   /*background-image: url(../Nutrition+Facts/images/newexams/CostSheet_r3_c8.jpg);*/
 
   padding: 0 0 5px 3px;
 
   border-bottom: 1px solid;
 
   margin: 0 18px 2px 0;
}
.other ul li .itemleed{
 
    margin: 0 0 0 1px;
 
    color:#000;
 
    float: left;
 
    background: url(../Nutrition+Facts/images/newexams/time.png) 8px 6px no-repeat;
 
    padding:4px 0 0 13px;
}
 
.other ul li .item{
 
    text-align:right;
 
    padding: 0 0 0 10px;
}
 
hr{
    
    background: url(../Nutrition+Facts/images/stories/facts/bar2.png);
    width:221px;
    
    padding-top:10px;
}

y este es mi html:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript">
function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() {
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<img src="images/stories/blank.jpg" width="570" height="1" />

sigue en la respuesta asi puedo poner todo

destor77 · #2 (**permalink**) 18/05/2009, 15:08

Código html:

Ver original<table width="570" border="0" cellspacing="4">
  <tr>
    <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 />
    <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 />
 <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 />
<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 />
<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 />
<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 />
<img src="images/stories/facts/GreenAssociate7.png" name="Image1" border="0" id="Image1" /><br />
<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 />
<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 />
<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 />
<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 />
<img src="images/stories/facts/GreenAssociate12.png" name="Image1" border="0" id="Image1" /><br /></td>
    <td VALIGN=TOP><div id="div1">
      <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>
      </div></td>
  </tr>
</table>
<div class="content">
    <h1>CleanEdison: <span>Energy Audit</span></h1>
    <p class="facts">Class Facts</p>
    <ul>
        <li><div class="itemfacts" id="duration">Duration</div> <div class="itemdetails">3 days</div></li>
        
        <li><div class="itemfacts">Time</div> <div class="itemdetails">9:00am - 5:00pm</div></li>
 
        <li><div class="itemfacts">Prerequisites</div> <div class="itemdetails">yes</div></li>
 
        <li><div class="itemfacts">CEU Credits</div> <div class="itemdetails">12 hours</div></li>
 
        <li><div class="itemfacts">Prices</div> <div class="itemdetails">3 days</div></li>
 
    </ul>
 
    <p class="aclarations">
        * call for Student &amp; Unemployed discounts<br/>
        ** AIA&amp;CES, PDH, HSW, BOMI and IFMA<br/>
        *** Aska about our tailored group classes<br/>
 
    </p>
 
    <div class="other">
        <h1>Other CleanEdison courses</h1>
        <hr/>
        <ul>
        <li><div class="itemleed">LEED</div> <div class="item">Green Associate</div></li>
 
        <li><div class="itemleed">LEED AP+</div> <div class="item">BD+C</div></li>
 
        <li><div class="itemleed">LEED AP+</div> <div class="item">ID+C</div></li>
 
        <li><div class="itemleed">LEED AP+</div> <div class="item">O+M</div></li>
        
 
    </ul>
    </div>
</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):

-Defero- · #3 (**permalink**) 18/05/2009, 15:31

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.

kseso? · #4 (**permalink**) 18/05/2009, 15:33

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;)