dos imágenes lado a lado Resuelto

Question

Hola,
me gustaría poner dos imágenes al lado, pero separadas entenderás mirando mi sitio: http://vistlip.free.fr
en realidad en el marco de la izquierda me gustaría que las dos imágenes que están una debajo de la otra, estuvieran en un ángulo.

Gracias.

--
.: itsuki power shunyuu ! :.

Configuración: Windows Vista Firefox 3.5.5

alex59fr · Answer

Hola, Veo esto: ¿en medio del sitio? solo debe ir entre & Para alinear tus imágenes una al lado de la otra debes añadir en CSS a tus dos imágenes la propiedad display:inline Y float:right para la imagen de la derecha y float:left para la izquierda ... -- Manipulación mental y destrucción de la personalidad, sed de dinero y embrutecimiento de la sociedad, la tele, es ni más ni menos una secta. Configuración: Ubuntu 9.10 en DualBoot con Windows

Atropa · Answer

Buenas noches, lo modifiqué rápido con firebug, ¿es este el resultado que quieres?

a propósito hay 21 errores HTML en tu código http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

sena-kaitani · Answer

alex59fr, ¿podrías profundizar tu respuesta por favor (la primera) -- .: itsuki power shunyuu ! :.

alex59fr · Answer

Tienes tus dos imágenes; no sé cómo las haces aparecer, pero no con un img src, así que debes usar una clase en CSS. No sé cuál, tú decides qué clase usar.

Para la clase de la derecha hay que añadir: display:inline; float:right; para la de la izquierda hay que añadir display:inline; float:left;

¿Queda un poco más claro?

--
Manipulación mental y destrucción de la personalidad, sed de dinero y embrutecimiento de la sociedad, la tele, es ni más ni menos que una secta.
Configuración: Ubuntu 9.10 en DualBoot con Windows

sena-kaitani · Answer

Tengo un div, XHTML:

y el CSS: #menu2 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: left; } #menu3 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; -- .: itsuki power shunyuu ! :.

alex59fr · Answer

Essaye de faire ça dans ton css

#menu2 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: left; float:left; display:inline; } 
#menu3 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; float:right;display:inline; }

--

Manipulación mental y destrucción de la personalidad, sed de dinero y embrutecimiento de la sociedad, la televisión, no es ni más ni menos que una secta.
Configuración: Ubuntu 9.10 en DualBoot con Windows

sena-kaitani · Answer

no funciona, la imagen no se muestra ni siquiera.. .
Solo se muestra si la pongo en width:140px, porque (css):

#menu /* Le menu */ { float: left; /* Le menu flotará a la izquierda */ }

--
.: itsuki power shunyuu ! :.

alex59fr · Answer

140 px ? por encima veo 500px ...
--
Manipulación mental y destrucción de la personalidad, sed de dinero y embrutecimiento de la sociedad, la televisión, es ni más ni menos que una secta.
Configuración : Ubuntu 9.10 en DualBoot con Windows

sena-kaitani · Answer

acabo de cambiar... Ve a verlo, conseguí ponerla a la derecha del marco, pero no junto a la otra imagen encima... . -- .: itsuki power shunyuu ! :.

alex59fr · Answer

Hay que añadir la propiedad display:inline a tus dos elementos como se repite dos veces arriba
--
Manipulación mental y destrucción de la personalidad, avidez de dinero y embrutecimiento de la sociedad, la tele, no es ni más ni menos que una secta.
Configuración: Ubuntu 9.10 en DualBoot con Windows

sena-kaitani · Answer

ya está hecho desde la 2ª vez que me lo dices. Pero no funciona. --> http://vistlip.free.fr -- .: itsuki poder shunyuu ! :.

alex59fr · Answer

Para tus div usa un atributo CLASS y no ID, así que en lugar de poner en el CSS #menu2 usa .menu2

Luego haz un div que envuelva a los otros dos div con la propiedad:
display:block;
width:la largeur;
height:hauteur;

EDIT: elimina de inmediato: width: 500px;

-- 
Manipulación mental y destrucción de la personalidad, sed de dinero y embrutecimiento de la sociedad, la tele, es ni más ni menos una secta.
Configuración: Ubuntu 9.10 en DualBoot con Windows

Atropa · Answer

¿has intentado modificar esto:

de esta manera? como lo había hecho en mi primer post... o puedes directamente reemplazar menu 2 y menu3 por eso en tu css : #menu2 { width: 40px; height: 40px; background-image: url("menu.gif"); float:left; } #menu3 { width: 40px; height: 40px; background-image: url("menu.gif"); float:right; }

sena-kaitani · Answer

Gracias mucho Atropa!! funciona el primer método, gracias también a ti Alex59fr! he puesto esto:

ve al marco de la izquierda: http://vistlip.free.fr -- .: itsuki power shunyuu ! :.

alex59fr · Answer

De nada hasta la próxima :)
--
Manipulación mental y destrucción de la personalidad, avidez de dinero y embrutecimiento de la sociedad, la televisión, no es ni más ni menos que una secta.
Configuración: Ubuntu 9.10 en DualBoot con Windows

sena-kaitani · Answer

Tengo un problema, he conseguido para las dos imágenes de arriba, pero no puedo hacer lo mismo para las de abajo! XHTML:
et le css, j’ai repris ceux des deux image que j’ai mis en haut: #menu2 { width: 500px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: left; } #menu3 { width: 140px; height: 80px; background-image: url("menu.gif"); background-repeat: no-repeat; background-position: right; } ps: ce qui est en gras dans le xhtml ce sont les 2 images qui se mettent en bas du cadre. va ver http://vistlip.free.fr -- .: itsuki power shunyuu ! :.

Atropa · Answer

bonjour,

tu devrais enlever les attribut style des balises et mettre remplacer #menu2 et #menu3 par ça :

#menu2 { width: 40px; height: 40px; background-image: url("menu.gif"); float:left; } #menu3 { width: 40px; height: 40px; background-image: url("menu.gif"); float:right; }

si tu change ton css comme ça tu n'as plus besoin des balises style

ensuite pour les div en bas il te suffit de rajouter margin-top: 40px;

sena-kaitani · Answer

Hay un problema cuando hago mi div mira (imagen) cuando escribo .. la palabra menú se pone en rojo. 
Y cuando añado 6: .. se pone en negro como si no funcionara.

sin el "6": http://ups.imagup.com/06/1259472237.jpg
con el "6": http://ups.imagup.com/06/1259472294.jpg

Así que lógicamente no funcionará... 
-- 
.: itsuki power shunyuu ! :.

notobe · Answer

[editar: error, sorry for the noise...]

sena-kaitani · Answer

?? -- .: itsuki power shunyuu ! :.

Atropa · Answer

mira esto y dime: archivo css : /*inicio del alineamiento... para la imagen de bienvenida */ body { width: 760px; margin: auto; margin-top: 20px; margin-bottom: 20px; } p { color:#1e90ff; } #entete { width: 700px; height: 300px; background-image: url("http://ups.imagup.com/06/1259315573.jpg"); background-repeat: no-repeat; background-position: center; /*fin para el alineamiento... de la imagen de bienvenida */ } ul {/* Mi lista tendrá viñetas con la apariencia de una foto */ list-style-image: url("sharingan.gif"); list-style-position: inside; } #menu {/* El menú */ float: left; /* El menú flotará a la izquierda */ width: 150px; /* Muy importante: darle un tamaño al menú */ background-repeat: repeat-x; background-color:#c0c0c0 ; border: 2px solid black; margin-bottom: 10px; /* Para evitar que los elementos del menú queden demasiado pegados */ } .menuImgR { width: 40px; height: 40px; background-image: url("menu.gif"); float:right; } .menuImgL { width: 40px; height: 40px; background-image: url("menu.gif"); float:left; } #menu4 { clear:both; height:60px ; background-image: url("menu2.gif"); background-repeat: no-repeat; background-position: center; } archivo html : accueil

accueil contacte video tuteur

bienvenue

ce site consite a parler de l'anime eyeshield 21. Vous y retrouverez tous sur cette anime.

au revoir

blaaablalaa

sena-kaitani · Answer

GRACIAS, funciona de maravilla. Creía que si ponía "class", cuando se hiciera clic en la imagen (manteniendo presionado) podría tomar la imagen, pero no, no sé muy bien cómo hacerlo.  Gracias a todos. .: itsuki power shunyuu ! :.

Dos imágenes lado a lado

22 respuestas

Problema de grabación y lectura de archivos jpg

Fusionar particiones

Conexión de audio de pc, enchufes jack para cadena hi-fi

Conducir a 110 km/h en autopista: ahorro de combustible y ganancia de seguridad

Problema de texturas en enshrouded

Meta renuncia a usar tus publicaciones de instagram para crear contenido ia

Dispositivos a renovar

Aplicación samsung smart switch

Impresora canon pixma no detectada por livebox 7

Mp3 con radio antiguo