[Résolu] Superposer et centrer 2 images

Pipo Crusoe · Message par **Pipo Crusoe** » 09 mars 2006, 12:15

Bonjour. Je suis débutant dans la conception de site web avec Nvu. J'aimerais superposer 2 images (un jpeg et un gif animé) et je voudrais que le tout soit centré sur la page, quelle que soit la largeur d'écran. J'ai déjà réussi à les superposer en les insérant dans des <div>. Pouvez-vous m'aider pour le centrage SVP. (les deux images en question sont sur la page d'accueil du site evavincent.be)
Merci

Do-IT · Message par **Do-IT** » 09 mars 2006, 12:39

http://css.alsacreations.com/Faire-une- ... web-en-CSS

Exemple

Tiens c'est tellement beau que je vais le mettre en pratique pour mon site de blague
c'est que ca commence a devenir utilisable nvu avec toutes ces extensions

Pipo Crusoe · Message par **Pipo Crusoe** » 09 mars 2006, 13:31

Y'a du progrès : les images sont centrées; mais maintenant elles ne sont plus superposées...

edit: en définissant une marge négative (égale à la hauteur du premier <div>) pour le <div> qui contient la seconde image, je suis parvenu à les superposer tous les 2.

Merci pour votre aide rapide et efficace.

Do-IT · Message par **Do-IT** » 09 mars 2006, 14:16

Ca l'air bon là. Bon, faire mise en page en tableau pour les deux liens !!! Faut juste encore donner un titre a page. Parceque index c'est pas beau.

Pipo Crusoe · Message par **Pipo Crusoe** » 09 mars 2006, 16:33

Do-IT a écrit :Bon, faire mise en page en tableau pour les deux liens !!!

Heu... c'est bien ou c'est pas bien d'utiliser un tableau pour la mise en page des deux liens ? Merci de m'éclairer. Pour rappel

Pipo Crusoe a écrit :Je suis débutant

D'autres idées pour améliorer la mise en page ou pour faire un joli fond de page ? (pour le menu, je trouve que c'est pas mal, non ?)

Vincent

Invité · Message par **Invité** » 12 oct. 2008, 17:55

Bonjour, je suis vraiment apprentie et j'essaie de faire ce qui est dit plus haut, soit mettre vspace="-120" afin de positionner une image sur une autre
mais à l'enregistrement, cela revient à zéro et mes images restent l'une en dessous de l'autre.

Quelqu'un peut m'expliquer svp ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Lasavane · Message par **Lasavane** » 12 oct. 2008, 18:03

Désolée, je ne m'étais pas connectée

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Gagea · Message par **Gagea** » 12 oct. 2008, 18:07

Ceux qui aident ont besoin de connaître l'URL de ta page si elle est publiée, sinon tu colles le code source dans le message.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 oct. 2008, 18:30

2 méthodes:

A. créer un div, y mettre l'image d'avant-plan (insérer une image) et mettre en fond l'image d'arrière plan (sélectionner le div dans la barre d'état, style interne> background).

B. insérer tes 2 images par "insérer image", puis positionner les 2 images au même endroit via les styles internes (positionnement absolue) !

Lasavane · Message par **Lasavane** » 12 oct. 2008, 18:36

voilà les codes

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Le mandala en art-thérapie</title>
</head>
<body style="background-image: url(Images/fondpapier1.jpg);">
<img style="width: 967px; height: 122px;" alt=""
src="Images/Bandeau2.png" hspace="16" vspace="9"><br>
<img style="width: 242px; height: 213px;" alt=""
src="Images/LOGO2.gif" hspace="18" vspace="0">
</body>
</html>

je voudrais l'image logo sur le bandeau

les styles internes, je trouve ça où?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 oct. 2008, 18:51

Gagea,

Pourrais-tu ajouter ton site dans ta signature? C'est bon pour son référencement et pour nous y rendre.

Une correction s'impose dans http://josar.free.fr/tutoKompozer/miseEnForme1.html / Ordre de priorité: ce n'est pas "l'ordre chronologique" mais l'ordre de lecture des sources des définitions citées précédemment...

Lasavane · Message par **Lasavane** » 12 oct. 2008, 18:54

Je commence tout juste mon site et il n'est pas en ligne encore

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 oct. 2008, 19:00

Lasavane,

Je suppose que tu utilises Kompozer, la barre d'état apparait si son affichage est coché dans la rubrique Affichage ! Quand ton curseur est dans un bloc, un lien, le "DOM" correspondant est affiché dans la barre d'état, et on peut sélectionner à la souris un de ces éléments.

Je t'invite à parcourir les tutos suivants:
http://josar.free.fr/tutoKompozer/
et
http://info.sio2.be/kpz

A priori tu veux mettre un logo sur ta bannière (comme dans "mon" site)?
C'est bien cela?

Gagea · Message par **Gagea** » 12 oct. 2008, 19:24

Fabrice.Tres.Net a écrit :Gagea,
Pourrais-tu ajouter ton site dans ta signature? C'est bon pour son référencement et pour nous y rendre.
Une correction s'impose dans http://josar.free.fr/tutoKompozer/miseEnForme1.html / Ordre de priorité: ce n'est pas "l'ordre chronologique" mais l'ordre de lecture des sources des définitions citées précédemment...

OK - Fabrice. J'ai mis l'URL de mon site dans ma signature. Je pensais qu'il suffisait de la mettre dans la case www à côté de mp.
J'ai apporté la correction "ordre de lecture" à la place de chronologique. C'est vrai que ça se comprend mieux.
Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 oct. 2008, 19:38

Merci.

Gagea a écrit :OK - Fabrice. J'ai mis l'URL de mon site dans ma signature

Tu peux y mettre ceci:

Code : Tout sélectionner

[url=http://josar.free.fr/tutoKompozer/index.html]Tutoriel Kompozer[/url] et   [url=http://josar.free.fr/index.html]Site web, css référencement[/url] [url=http://josar.free.fr/index.html]Tutoriel Kompozer[/url]

Geckozone

[Résolu] Superposer et centrer 2 images

[Résolu] Superposer et centrer 2 images

Re: Superposer et centrer 2 images

Qui est en ligne ?