Foros del Web » Creando para Internet » CSS »

li con css e imagen display inline

Estas en el tema de li con css e imagen display inline en el foro de CSS en Foros del Web. Hola a todos antes que anda muchas gracias ya que he aprendido mucho de todos los que preguntan y de los que responden, hoy tengo ...
  #1 (permalink)  
Antiguo 05/03/2010, 18:50
 
Fecha de Ingreso: julio-2005
Mensajes: 73
Antigüedad: 12 años, 5 meses
Puntos: 0
li con css e imagen display inline

Hola a todos antes que anda muchas gracias ya que he aprendido mucho de todos los que preguntan y de los que responden, hoy tengo mas de 4 hrs entre leyendo el foro y "googleando" y no logro resolver el problema que tengo tengo el siguiente codigo en un archivo .css:

Código HTML:
#ganadores-wrapper{
	overflow: hidden;	
	clear: both;
	width: 100%;
	margin: 0 0 10px;
	
}
.ganadores-carousel{
	width:100%;
	float:left;
	margin:0px;
	padding:0px;
}
.ganadores-carousel ul{list-style-type:none; padding:0px;float: left;}

.ganadores ul li {
display: inline;
}
.ganadores-carousel li{
	width: 155px;
	margin: 0 5px 30px 10px;
	height: 275px;
    padding:0;
	float:right;

}
.ganadores-carousel li p{
	margin: 2px 0 0 0;
}
.ganadores-carousel li p.p-dotted{
	border-top: 1px #686868 dotted;
	padding: 5px 0 0 0;
	margin: 5px 0 0 0;
}
y estos estilos se los aplico a

Código HTML:
<div id="ganadores-wrapper"> 
 <div id="encabezados">Ganadores de TR&eacute;-CH(&Eacute;) Short Fest '09</div> 
   <div class="ganadores-carousel"> 
<ul> 

<li><a href="" target="_self"><img src="/images/imagen01.jpg" alt="" width="156px"></a> 
<p><strong>Pel&iacute;cula:</strong> Pelicula Numero 1 </p> 
<p><strong>Categoria:</strong> Mejor Cortometraje Documental</p> 
<p class="p-dotted"><strong>Director:</strong> Director Numero 1</p> 
<p><strong>Lugar de origen:</strong> España</p> 
<p><a href="" target="_self">Leer M&aacute;s</a></p> 
</li> 

<li><a href="" target="_self"><img src="/images/imagen02.jpg" alt="" width="156px"></a> 
<p><strong>Pel&iacute;cula:</strong> Pelicula Numero 2</p> 
<p><strong>Categoria:</strong> Mejor Cortometraje Documental</p> 
<p class="p-dotted"><strong>Director:</strong> Director Numero 2</p> 
<p><strong>Lugar de origen:</strong> USA</p> 
<p><a href="" target="_self">Leer M&aacute;s</a></p> 
</li> 

<li><a href="" target="_self"><img src="/images/imagen01.jpg" alt="" width="156px"></a> 
<p><strong>Pel&iacute;cula:</strong> Pelicula Numero 3 </p> 
<p><strong>Categoria:</strong> Mejor Cortometraje Documental</p> 
<p class="p-dotted"><strong>Director:</strong> Director Numero 3</p> 
<p><strong>Lugar de origen:</strong> México</p> 
<p><a href="" target="_self">Leer M&aacute;s</a></p> 
</li> 


</ul> 
pero no funciona.. me pone cada elemento de los <li> como una lista vertical, y no horizontal como es que realmente quiero hacerlo, si cambio el Display:inline;
por un float:right funciona para google chrome o FF pero no para IE, para variar. y no se como hacerle ya busque ejemplo y ayudas de aqui pero no he podido solucionarlo si alguien me pudiera decir en que estoy fallando se los agradecería.

básicamente me encantaría este resultado


gracias espero puedan ayudarme.
  #2 (permalink)  
Antiguo 05/03/2010, 20:08
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline

Código HTML:
Ver original
  1. <div id="ganadores-wrapper">
  2.  <div id="ganadores-encabezados">Ganadores de TRé-CH(É) Short Fest '09</div>
  3.    <div class="ganadores-carousel">
  4.         <ul>
  5.        
  6.             <li><a href="" target="_self"><img src="/images/imagen01.jpg" alt="Imagen 01" width="156px" /></a>
  7.             <p><strong>Película: </strong>Pelicula Numero 1 </p>
  8.             <p><strong>Categoría: </strong>Mejor Cortometraje Documental</p>
  9.             <p class="dotted"><strong>Director: </strong>Director Numero 1</p>
  10.             <p><strong>Lugar de origen: </strong>España</p>
  11.             <p><a href="#" target="_self">Leer Más</a></p>
  12.             </li>
  13.            
  14.             <li><a href="" target="_self"><img src="/images/imagen02.jpg" alt="Imagen 02" width="156px" /></a>
  15.             <p><strong>Película: </strong>Pelicula Numero 2</p>
  16.             <p><strong>Categoria: </strong>Mejor Cortometraje Documental</p>
  17.             <p class="dotted"><strong>Director: </strong>Director Numero 2</p>
  18.             <p><strong>Lugar de origen: </strong>USA</p>
  19.             <p><a href="#" target="_self">Leer Más</a></p>
  20.             </li>
  21.            
  22.             <li><a href="" target="_self"><img src="/images/imagen01.jpg" alt="Imagen 01" width="156px" /></a>
  23.             <p><strong>Película: </strong>Película Numero 3 </p>
  24.             <p><strong>Categoría: </strong>Mejor Cortometraje Documental</p>
  25.             <p class="dotted"><strong>Director: </strong>Director Numero 3</p>
  26.             <p><strong>Lugar de origen: </strong>México</p>
  27.             <p><a href="#" target="_self">Leer Más</a></p>
  28.             </li>
  29.         </ul>
  30.  
  31.     </div>
  32. </div>

Código CSS:
Ver original
  1. #ganadores-wrapper{
  2.     width: 100%;   
  3. }
  4.  
  5. .ganadores-carousel{
  6.     width:100%;
  7. }
  8.  
  9. .ganadores-carousel ul{
  10.     list-style:none;
  11.     padding:0;
  12.     margin:0;
  13. }
  14.  
  15. .ganadores-carousel li{
  16.     display:block;
  17.     width: 156px;
  18.     margin-right:15px;
  19.     float:left;
  20.  
  21. }
  22. .ganadores-carousel p{
  23.     color:#8E8F9B;
  24.     margin: 2px 0;
  25. }
  26.  
  27. .ganadores-carousel strong{
  28.     color:#BE691B;
  29. }
  30.  
  31. .ganadores-carousel a{
  32.     color:#C3843E;
  33. }
  34.  
  35. .ganadores-carousel li p.dotted{
  36.     border-top: 1px #686868 dotted;
  37.     padding: 5px 0;
  38.     margin: 5px 0;
  39. }
  #3 (permalink)  
Antiguo 05/03/2010, 20:12
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline

Ojala te sirva. Por cierto te comento que habias olvidado cerrar tus etiquetas <img /> y tambien por si no sabs te recomiendo utilizar utf-8 como encoding:
Código HTML:
Ver original
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

asi te evitas el tener utilizar entities como &Eacute; y eso.

Saludos
  #4 (permalink)  
Antiguo 05/03/2010, 20:18
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline



Asi se ve en ie
  #5 (permalink)  
Antiguo 05/03/2010, 21:38
 
Fecha de Ingreso: julio-2005
Mensajes: 73
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: li con css e imagen display inline

Cita:
Iniciado por dual3nigma Ver Mensaje
Ojala te sirva. Por cierto te comento que habias olvidado cerrar tus etiquetas <img /> y tambien por si no sabs te recomiendo utilizar utf-8 como encoding:
Código HTML:
Ver original
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

asi te evitas el tener utilizar entities como &Eacute; y eso.

Saludos
Muchas gracias dual3nigma, estoy revisando tu codigo.. muchas gracias nuevamente te comento, los datos que viste donde pongo director 1, pelicula 1 y todo lo demas despues de las etiquetas lo obtengo de una base de datos mediante php y mysql, por eso lo pongo asi, no quise ponerle tanto embrollo con php ya que eso no era el problema. pero seria de gran ayuda que me dijeras, si se puede como guardar en mi tabla ya que cuando tengo el charset como lo estoy usando. me salen caracteres extraños.

pero lo tomare en cuenta... gracias nuevamente.
  #6 (permalink)  
Antiguo 05/03/2010, 22:14
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline

Hola. Pues para lo del encoding, con que la base de datos tenga utf-8 puedes usar todos los caracteres. Si utilizas phpmyadmin tendrias que hacer algo asi:


y si no el codigo de mysql es:
Código MySQL:
Ver original
  1. CREATE DATABASE `mydatabase` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

Tambien en el head de tu php debes de tener el meta tag que te puse arriba.

Saludos!
  #7 (permalink)  
Antiguo 05/03/2010, 22:30
 
Fecha de Ingreso: julio-2005
Mensajes: 73
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: li con css e imagen display inline

gracias dual3nigma, sabes para firefox y google crhome no funciona.. se pone una lista vertical.. no funciona el display:inline
  #8 (permalink)  
Antiguo 05/03/2010, 22:32
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline

Si funciona, pero tiene que ser el codigo que te pegue arriba, no hay ningun display inline ahi.
  #9 (permalink)  
Antiguo 05/03/2010, 23:20
 
Fecha de Ingreso: julio-2005
Mensajes: 73
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: li con css e imagen display inline

Cita:
Iniciado por dual3nigma Ver Mensaje
Si funciona, pero tiene que ser el codigo que te pegue arriba, no hay ningun display inline ahi.
Disculpa mi error, me referia al efecto mira este codigo lo tengo un mi pagina que esta divida en dos columnas esta columna es la de la izquierda.

el codigo es asi.

Código HTML:
<div id="mainbody"> 
   <div id="content"> 
     <div id="path"> <span class="pathway">Principal</span></div>
    
     <div class="inside"><p> <?php include("modulos/noticias.php"); ?>
      <p>
<!-aqui esta el codigo tal cual me lo pasaste->
<div id="ganadores-wrapper"> 
*<div class="encabezados">Ganadores de TRé-CH(É) Short Fest '09</div> 
* *<div class="ganadores-carousel"> 
* * * * <ul> 
* * * * 
* * * * * * <li><a href="" target="_self"><img src="/images/imagen01.jpg" alt="Imagen 01" width="156px" /></a> 
* * * * * * <p><strong>Película: </strong>Pelicula Numero 1 </p> 
* * * * * * <p><strong>Categoría: </strong>Mejor Cortometraje Documental</p> 
* * * * * * <p class="dotted"><strong>Director: </strong>Director Numero 1</p> 
* * * * * * <p><strong>Lugar de origen: </strong>España</p> 
* * * * * * <p><a href="#" target="_self">Leer Más</a></p> 
* * * * * * </li> 
* * * * * * 
* * * * * * <li><a href="" target="_self"><img src="/images/imagen02.jpg" alt="Imagen 02" width="156px" /></a> 
* * * * * * <p><strong>Película: </strong>Pelicula Numero 2</p> 
* * * * * * <p><strong>Categoria: </strong>Mejor Cortometraje Documental</p> 
* * * * * * <p class="dotted"><strong>Director: </strong>Director Numero 2</p> 
* * * * * * <p><strong>Lugar de origen: </strong>USA</p> 
* * * * * * <p><a href="#" target="_self">Leer Más</a></p> 
* * * * * * </li> 
* * * * * * 
* * * * * * <li><a href="" target="_self"><img src="/images/imagen01.jpg" alt="Imagen 01" width="156px" /></a> 
* * * * * * <p><strong>Película: </strong>Película Numero 3 </p> 
* * * * * * <p><strong>Categoría: </strong>Mejor Cortometraje Documental</p> 
* * * * * * <p class="dotted"><strong>Director: </strong>Director Numero 3</p> 
* * * * * * <p><strong>Lugar de origen: </strong>México</p> 
* * * * * * <p><a href="#" target="_self">Leer Más</a></p> 
* * * * * * </li> 
* * * * </ul>
*
* * </div>
</div> 


     </div>
   </div> 
 </div> <!--end of main-body--> 
el codigo del css de los divs que faltan son

Código HTML:
#mainbody {
float:left;
width:60%;
}

#content {

width:100%;
margin-left:25px;

}
#path{
width:90%;
margin-left:20px;
}
.pathway{ font-weight:bold;}.inside {
padding:10px;
}


.encabezados{
color: #03457e;
padding-left:30px;
text-align: left;
background: url(img/star.jpg) no-repeat left center;
font: normal 24px "Times New Roman", Times, serif;
}
funciona perfectamente para IE8 pero FF y Chrome no.. sigue como una lista vertical.. que estare haciendo mal.
  #10 (permalink)  
Antiguo 05/03/2010, 23:22
 
Fecha de Ingreso: julio-2005
Mensajes: 73
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: li con css e imagen display inline

mira que cosas.. si presiono el ya famoso boton de compatibilidad de IE8 me sale igual que en FF y Crhome una lista vertical... tambien se me olvido comentar... no toma efecto la linea punteada, ni los colores. y el codigo solo le aplique un copy- paste
  #11 (permalink)  
Antiguo 06/03/2010, 13:59
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline

Hola. Pues cheque tu código y había algunos errores de sintáxis. A mi me funciona bien, agregue un bloque con clear al final para evitar problemas con flotantes. No entendi bien por que tenias un float:left en el mainbody. Si tienes más problemas sería mejor que dijeras como quieres que se vea.

Saludos!

Código HTML:
Ver original
  1. <div id="mainbody">
  2.     <div id="content">
  3.         <div id="path"><span class="pathway">Principal</span></div>
  4.         <div class="inside"><p><?php include("modulos/noticias.php");?></p>
  5.             <div id="ganadores-wrapper">
  6.                 <div class="encabezados">Ganadores de TRé-CH(É) Short Fest '09</div>
  7.                     <div class="ganadores-carousel">
  8.                          <ul>
  9.                              <li>
  10.                                 <a href="" target="_self"><img src="/images/imagen01.jpg" alt="Imagen 01" width="156px" /></a>
  11.                                  <p><strong>Película: </strong>Pelicula Numero 1 </p>
  12.                                  <p><strong>Categoría: </strong>Mejor Cortometraje Documental</p>
  13.                                  <p class="dotted"><strong>Director: </strong>Director Numero 1</p>
  14.                                  <p><strong>Lugar de origen: </strong>España</p>
  15.                                  <p><a href="#" target="_self">Leer Más</a></p>
  16.                              </li>
  17.                              
  18.                              <li>
  19.                                 <a href="" target="_self"><img src="/images/imagen02.jpg" alt="Imagen 02" width="156px" /></a>
  20.                                  <p><strong>Película: </strong>Pelicula Numero 2</p>
  21.                                  <p><strong>Categoria: </strong>Mejor Cortometraje Documental</p>
  22.                                  <p class="dotted"><strong>Director: </strong>Director Numero 2</p>
  23.                                  <p><strong>Lugar de origen: </strong>USA</p>
  24.                                  <p><a href="#" target="_self">Leer Más</a></p>
  25.                              </li>
  26.                            
  27.                              <li>
  28.                                 <a href="" target="_self"><img src="/images/imagen01.jpg" alt="Imagen 01" width="156px" /></a>
  29.                                  <p><strong>Película: </strong>Película Numero 3 </p>
  30.                                  <p><strong>Categoría: </strong>Mejor Cortometraje Documental</p>
  31.                                  <p class="dotted"><strong>Director: </strong>Director Numero 3</p>
  32.                                  <p><strong>Lugar de origen: </strong>México</p>
  33.                                  <p><a href="#" target="_self">Leer Más</a></p>
  34.                              </li>
  35.                          </ul>
  36.                         <div class="clear"></div>
  37.                 </div><!-- Fin de ganadores-carousel -->
  38.             </div><!-- Fin de ganadores-wrapper -->
  39.         </div><!-- Fin de inside -->
  40.     </div><!-- Fin de content -->
  41. </div><!-- Fin de mainbody -->

Código CSS:
Ver original
  1. #mainbody {
  2.     width:60%;
  3. }
  4.  
  5. #content {
  6.     width:100%;
  7.     margin-left:25px;
  8. }
  9.  
  10. #path{
  11.     width:90%;
  12.     margin-left:20px;
  13. }
  14.  
  15. .pathway{
  16.     font-weight:bold;
  17. }
  18.  
  19. .inside {
  20.     padding:10px;
  21. }
  22.  
  23.  
  24. .encabezados{
  25.     color: #03457e;
  26.     padding-left:30px;
  27.     text-align: left;
  28.     background: url(img/star.jpg) no-repeat left center;
  29.     font: normal 24px "Times New Roman", Times, serif;
  30. }
  31.  
  32. #ganadores-wrapper{
  33.     width: 100%;    
  34. }
  35.  
  36. .ganadores-carousel{
  37.     width:100%;
  38. }
  39.  
  40. .ganadores-carousel ul{
  41.     list-style:none;
  42.     padding:0;
  43.     margin:0;
  44. }
  45.  
  46. .ganadores-carousel li{
  47.     display:block;
  48.     width: 156px;
  49.     margin-right:15px;
  50.     float:left;
  51.  
  52. }
  53. .ganadores-carousel p{
  54.     color:#8E8F9B;
  55.     margin: 2px 0;
  56. }
  57.  
  58. .ganadores-carousel strong{
  59.     color:#BE691B;
  60. }
  61.  
  62. .ganadores-carousel a{
  63.     color:#C3843E;
  64. }
  65.  
  66. .ganadores-carousel li p.dotted{
  67.     border-top: 1px #686868 dotted;
  68.     padding: 5px 0;
  69.     margin: 5px 0;
  70. }
  71.  
  72. .clear{
  73.     clear:both;
  74. }
  75.  
  76. .imagen{
  77.     width:156px;
  78.     height:105px;
  79.     background:#333;
  80. }
  #12 (permalink)  
Antiguo 06/03/2010, 14:02
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: li con css e imagen display inline

En ie7:



En Firefox:



En Chrome:

  #13 (permalink)  
Antiguo 06/03/2010, 17:58
 
Fecha de Ingreso: julio-2005
Mensajes: 73
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: li con css e imagen display inline

gracias nuevamente se me olvido decirte.. mi diseño es a dos columnas mainbody es la columna de la izquierda por eso tiene un ancho de 60% y un float left, de todas maneras revisare el codigo dual3nigma, muchas gracias..

Etiquetas: display, inline
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:30.