Page 1 sur 1
[Résolu] Superposer et centrer 2 images
Publié : 09 mars 2006, 12:15
par Pipo Crusoe
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
Publié : 09 mars 2006, 12:39
par Do-IT
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
Publié : 09 mars 2006, 13:31
par Pipo Crusoe
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.
Publié : 09 mars 2006, 14:16
par Do-IT
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.
Re: Superposer et centrer 2 images
Publié : 09 mars 2006, 16:33
par Pipo Crusoe
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
Publié : 12 oct. 2008, 17:55
par Invité
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
Publié : 12 oct. 2008, 18:03
par Lasavane
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
Publié : 12 oct. 2008, 18:07
par Gagea
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
Publié : 12 oct. 2008, 18:30
par Fabrice.Tres.Net
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) !
Publié : 12 oct. 2008, 18:36
par Lasavane
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
Publié : 12 oct. 2008, 18:51
par Fabrice.Tres.Net
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...
Publié : 12 oct. 2008, 18:54
par Lasavane
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
Publié : 12 oct. 2008, 19:00
par Fabrice.Tres.Net
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?
Publié : 12 oct. 2008, 19:24
par Gagea
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
Publié : 12 oct. 2008, 19:38
par Fabrice.Tres.Net
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]