li con css e imagen display inline

[bendark23]

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.

[dual3nigma]

Código HTML:

<div id="ganadores-wrapper"> 
 <div id="ganadores-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>
 

Código CSS:

#ganadores-wrapper{ 
    width: 100%;    
}
 
.ganadores-carousel{
    width:100%;
}
 
.ganadores-carousel ul{
    list-style:none;
    padding:0;
    margin:0;
}
 
.ganadores-carousel li{
    display:block;
    width: 156px;
    margin-right:15px;
    float:left;
 
}
.ganadores-carousel p{
    color:#8E8F9B;
    margin: 2px 0;
}
 
.ganadores-carousel strong{
    color:#BE691B;
}
 
.ganadores-carousel a{
    color:#C3843E;
}
 
.ganadores-carousel li p.dotted{
    border-top: 1px #686868 dotted;
    padding: 5px 0;
    margin: 5px 0;
}
 

[dual3nigma]

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:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

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

Saludos

[dual3nigma]

Asi se ve en ie

[bendark23]

Iniciado por dual3nigma

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:

<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.

[dual3nigma]

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:

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!

[bendark23]

gracias dual3nigma, sabes para firefox y google crhome no funciona.. se pone una lista vertical.. no funciona el display:inline

[dual3nigma]

Si funciona, pero tiene que ser el codigo que te pegue arriba, no hay ningun display inline ahi.

[bendark23]

Iniciado por dual3nigma

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.

[bendark23]

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

[dual3nigma]

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:

<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>
            <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 class="clear"></div>
                </div><!-- Fin de ganadores-carousel -->
            </div><!-- Fin de ganadores-wrapper -->
        </div><!-- Fin de inside -->
    </div><!-- Fin de content -->
</div><!-- Fin de mainbody -->
 

Código CSS:

#mainbody {
    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;
}
 
#ganadores-wrapper{ 
    width: 100%;    
}
 
.ganadores-carousel{
    width:100%;
}
 
.ganadores-carousel ul{
    list-style:none;
    padding:0;
    margin:0;
}
 
.ganadores-carousel li{
    display:block;
    width: 156px;
    margin-right:15px;
    float:left;
 
}
.ganadores-carousel p{
    color:#8E8F9B;
    margin: 2px 0;
}
 
.ganadores-carousel strong{
    color:#BE691B;
}
 
.ganadores-carousel a{
    color:#C3843E;
}
 
.ganadores-carousel li p.dotted{
    border-top: 1px #686868 dotted;
    padding: 5px 0;
    margin: 5px 0;
}
 
.clear{
    clear:both;
}
 
.imagen{
    width:156px;
    height:105px;
    background:#333;
}
 

[dual3nigma]

En ie7:



En Firefox:



En Chrome:

[bendark23]

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..