Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Imagen-diferenciales: no logro que aparezca al costado de mi lista

Hola! no logro que la imagen diferenciales quede al lado de la lista de diferenciales. Siempre me queda por debajo. Como puedo corregir? Dejo debajo mi CSS. Gracias!


.banner{
    width: 100%;

}

.principal{
    padding: 3em 0;
    background: #fefefe;
    width: 940px;
    margin: 0 auto;    

}

.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;

}

.principal p{
    margin: 0 0 1em;
}

.principal strong{
    font-weight: bold;  

}

.principal em{
    font-style: italic;

}

.utensillos{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;

}

.mapa{
    padding: 3em 0;
    background: linear-gradient(#fefefe,#888888);
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;

}

.mapa-contenido{
    width: 940px;
    margin: 0 auto;
}

.diferenciales{
    padding: 3em 0;
    background: #888888;

}

.contenido-diferenciales{
    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
    list-style-type: none;
}

.items{
    line-height: 1.5;
}

.items:before{
    content:"★";
}

.items:first-child{
    font-weight: bold;
}

.imagen-diferenciales{
    width: 60%;
    transition: 400ms;

}

.imagen-diferenciales:hover{
    opacity: 30%;

}
.video{
    width: 560px;
    margin: 1em auto;
}
2 respuestas

Hola, en el index.html en la class contenido-diferenciales, tiene que quedar junto sin el espacio o enter < /ul> y el < img>. Algo asi < div class="contenido-diferenciales"> < ul class="lista-diferenciales"> < li class="items">Atención personalizada a los clientes < li class="items">Espacio diferenciado < li class="items">Localización < li class="items">Profesionales calificadoss < li class="items">Puntualidad < li class="items">Limpieza < /ul>< img src="diferenciales.jpg" class="imagen-diferenciales"> < /div>

solución!

Gracias Samuel, no se soluciono el problema de esta forma, ya habia dejado la imagen pegada y sin espacios en mi index.html como indico el profesor pero no se solucionaba. Pero gracias a tu respuesta me di cuenta que la lista de diferenciales estaba definida con un widht de 640px, y luego 40% para la lista mas 60% para la imagen, que no era soportado por esos 640px. Lo que hice fue definir 940px para la seccion y asi se corrigio, lo dejo aqui por su ayuda a otra persona. Muchas gracias!`

.contenido-diferenciales{
***    width: 940px;***
    margin: 0 auto;
}

.lista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
    list-style-type: none;
}

.items{
    line-height: 1.5;
}

.items:before{
    content:"★";
}

.items:first-child{
    font-weight: bold;
}

.imagen-diferenciales{
    width: 60%;
    transition: 400ms;

}