28172 sujets

CSS et mise en forme, CSS3

Images superposées

Pages :
Bonjour,

Sur une page html je voudrais superposer deux images
La première à un fond gris avec les angles arrondis la
Deuxième c’est une photo avec à un fond transparent.

Mais j’ai un problème de centrage des photos Png qui ont un format de 150x113
Et l’image de fond 250x175.

Merci pour votre aide.

Salutations

#conteneur {
    margin-top:7%;
    text-align:center;
}
 
 .Ma1erImg {
    display:block;
    margin:4% auto 0;
    background-image: url(CadrePhoto.bmp);
    background-repeat: no-repeat;
}
 
.conteneurImg {
    margin-top:2%; /* Un peu d'espace entre le conteneur des img */
}
 
.conteneurImg img {
    background-image: url(CadrePhoto.bmp);
    background-repeat: no-repeat;
}


<div id="conteneur">
    <img class="Ma1erImg" src="Photos-1.png" width="150" height="113" alt="" />
  
<div class="conteneurImg"> 
    <img src=" Photos-2.png" width="150" height="113" />
    <img src=" Photos-3.png" width="150" height="113" />
    <img src=" Photos-4.png" width="150" height="113" />
</div>

<div class="conteneurImg">
   <img src=" Photos-5.png" width="150" height="113" />
   <img src=" Photos-6.png" width="150" height="113" />
   <img src=" Photos-7.png" width="150" height="113" />
</div>

<div class="conteneurImg">
   <img src=" Photos-8.png" width="150" height="113" />
   <img src=" Photos-9.png" width="150" height="113" />
<img src=" Photos-10.png" width="150" height="113" />

<div class="conteneurImg">
   <img src=" Photos-11.png" width="150" height="113" /> 
</div>
</div>
Salut,

Perso, j'ai du mal à voir le lien entre ce que tu expliques et le code que tu donnes Smiley ohwell . Entre autres, tu parles de superposer deux images, et ton code en contient onze...
Je crois que l'idéal serait de mettre une page en ligne, ou au moins de donner ton code entier (avec le chemin complet pour les images). Là, ce serait peut-être plus parlant.
Bonsoir Marcv,

Toutes mes excuses pour mes explications pas très claires.

Je voudrais présenter ma page de cette façon.

En haut de page :
un cadre « CadrePhoto.bmp » et une photo « Photos-1.png »
qui se superpose.

Sur les lignes du dessous trois rangées de :
Trois cadres « CadrePhoto.bmp » et Trois photos « Photos- ?.png »
qui se superpose, et qui sont côte à côte.

Et sur la dernière :
un cadre « CadrePhoto.bmp » et une photo « Photos-11.png »
qui se superpose.

Le code fonctionne avec des photos de dimensions identiques au cadre
250x175, mais pas avec des photos de 150x113.

Si tu veux m’aider j’aimerais aussi pouvoir mettre au dessus et au bas
de la photo un texte.

Salutations.
Alors selon ce que tu dis, le code HTML devrait plutôt être le suivant :
<ul class="conteneurImg"> 
    <li>
        <img src="Photo.png" alt="">
        <p>légende</p>
    </li>
</ul>

<ul class="conteneurImg"> 
    <li>
        <img src="Photo.png" alt="">
        <p>légende</p>
    </li>
    <li>
        <img src="Photo.png" alt="">
        <p>légende</p>
    </li>
    <li>
        <img src="Photo.png" alt="">
        <p>légende</p>
    </li>
</ul>

<ul class="conteneurImg"> 
    <li>
        <img src="Photo.png" alt="">
        <p>légende</p>
    </li> 
</ul>

Ensuite, pour le code CSS, on pourrait commencer par :
.conteneurImg {
height:<au moins la hauteur de CadrePhoto.bmp>;
margin-top:2px;
background:url(CadrePhoto.bmp) 50% no-repeat;
}
.conteneurImg li {
float:left;
list-style:none;
}
.conteneurImg li p {
margin:0;
}
Il s'agit d'un base CSS très simple, la suite dépend de ce que tu souhaites exactement. Donc je t'invite à tester ça, à l'arranger comme tu le souhaites, et à mettre une page en ligne pour qu'on puisse la voir et t'aider de manière plus productive.
Bonjour Marcv,

Merci pour ta réponse.

Je ne peux pas mettre de lien pour le moment,
mais je joins un document de présentation.

Salutations upload/15219-Exemple.JPG
Le code suivant fait-il ton affaire ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css" media="screen">
        * { /*  http://www.alsacreations.com/astuce/lire/36-reset-css.html  */
        margin:0;
        padding:0;
        }
        ul {
        width:810px; /* 3 cadres + marges */
        margin:20px auto;
        }
        li {
        float:left;
        width:250px;
        height:175px;
        margin:20px 10px;
        list-style:none;
        text-align:center;
        background: orange url(CadrePhoto.bmp) no-repeat;
        }
        li.firstChild,
        li.lastChild {
        margin:0 11px 0 280px;
        }
    </style>
</head>

<body>

    <ul>
        <li class="firstChild">
            <h2>Titre</h2>
            <img src="photo.png" alt="">
            <p>Nom</p>
        </li>
        <li>
            <h2>Titre</h2>
            <img src="photo.png" alt="">
            <p>Nom</p>
        </li>
        <li>
            <h2>Titre</h2>
            <img src="photo.png" alt="">
            <p>Nom</p>
        </li>
        <li>
            <h2>Titre</h2>
            <img src="photo.png" alt="">
            <p>Nom</p>
        </li>
        <li class="lastChild">
            <h2>Titre</h2>
            <img src="photo.png" alt="">
            <p>Nom</p>
        </li>
    </ul>

</body>

</html>
Bonjour Marcv,

Un grand merci pour le code qui me convient parfaitement.

J’ai un cas ou dans une page je dois mettre plusieurs rangées de 3 photos,
Et seulement deux photos pour l’avant dernière rangée.

A-tu une solution pour ce cas ?

Salutations
Il n'y a rien à faire, il te suffit de t'assurer que la dernière photo a toujours la classe "lastChild". Tu aurais pu essayer, tu t'en serais rendu compte tout seul Smiley langue
Modifié par marcv (02 May 2009 - 08:09)
Bonjour Marcv,

Désolé, mais si j'ai posté la question si tard (+1h du matin)c'est que
j'ai essayé de trouver une solution.

Donc ont ne peut pas terminer une page comme cela:

Trois photos
--------- --------- ----------
! PHOTOS ! ! PHOTOS! ! PHOTOS !
--------- --------- ----------

Deux photos centrées
--------- ---------
! PHOTOS ! ! PHOTOS!
--------- ---------

La dernière photos centrée
---------
! PHOTOS !
---------

Salutations
À chaque nouveau post, j'ai l'impression d'en apprendre un peu plus sur ce que tu veux vraiment faire, et je crois que je suis encore assez loin du compte Smiley smile .

Jusqu'à présent, je pensais qu'il s'agissait d'une simple liste de photos, et que tu voulais simplement que la première de la liste ainsi que la dernière soient seules sur la ligne. Maintenant je commence à douter : possibilité d'avoir moins de trois photos sur l'avant dernière ligne, sans que la dernière photo remonte... Maintenant j'apprends qu'elles doivent être centrées...

Donc plutôt que de continuer à procéder à tâtons en modifiant le code à chaque nouveau post, peux-tu répondre à ces questions stp :

1) quel va être le contenu de cette page ? (Photos de vacances ? Page de navigation ? autre... )
2) la première photo (seule sur sa ligne) est-elle une photo parmi tant d'autres, sans différence par rapport à la deuxième ou à la troisième, ou porte-t-elle un sens spécial (sert de titre à la page, de navigation, autre...) ?
3) même question pour la dernière photo
4) les rangées n° 2, 3, 4 ... jusqu'à l'avant-dernière, représentent-elles une seule et même liste de photos étalée sur plusieurs lignes, ou plutôt une liste par ligne (ou autre).

Bref, en gros, j'ai besoin que tu expliques le contenu de ta page et, de manière détaillée, comment tu souhaites l'organiser sur la page.
Re Bonjour Marcv,

Tous d’abord je te remercie pour ta patience et je t’assure que n’avais pas prévu le cas d’avoir une ligne de deux photos sur l’avant dernière ligne, et tu l’auras compris ces échanges me servent en même temps de formation.

Donc promis plus de surprise, sauf sur le code du positionnement d’un bouton
« Accueil « que je voudrais aborder à la fin bien entendu si tu es d’accord.

Bien maintenant je te décris l’organisation de ma page.

Ma page me permettra de présenter le Comité de mon association

1-Donc la première photo est le Président,
2-Puis trois Vice-présidents,
3-Trois Secrétaires,
4-Deux Trésoriers,
5-Et un Contrôleur.

Salutations
C'est quand même beaucoup plus simple une fois qu'on sait où on va ! Smiley cligne

Vu que la réalisation n'est pas très compliquée, et que tu dis en profiter pour te former, je vais pas te pondre le code une deuxième fois. Voilà quelques lignes directrices qui devraient te permettre d'arriver à quelque chose :

HTML
Une div.organigramme qui contient une ul#presidents (même s'il n'y en a qu'un), une ul#vicePresidents, une ul#secretaires, etc.

CSS
Floates tes <li>, clear tes <ul>. Ensuite, vu qu'on peut pas centrer des éléments floatés, que display:inline-block est buggué sous IE6-7, et que l'organisation de ton asso n'est pas appelée à changer toutes les deux heures, on va centrer à la mano avec un padding-left sur les <ul> qui ont moins de 3 éléments.

Voilà pour les plans, à toi de construire.
Et reviens nous montrer ce à quoi tu es arrivé (je commence à m'attacher à ton organigramme Smiley biggrin )
Modifié par marcv (03 May 2009 - 09:35)
Bonjour Marcv,

Tu m’as bien piégé avec ma phrase «….ces échanges me servent en même temps de formation.».

Mais tu as eu raison car j’ai appris beaucoup de cette façon, et je suis enfin arrivé à faire ma page comme je le désirais. J’ai complété cette page par un Sigle et un titre fixe elle fonctionne très bien en local sous IE mais sous Mozilla-Firefox l’ascenseur a disparu et je me retrouve avec deux photos côte à côte sur la 1er ligne et les autre photos sont dispersées.

Peux-tu me dire où se situe mon erreur ?

Je voudrais aussi avoir en bas de la page et de chaque côté un bouton fixe,
mais le code que j’utilise ne fonctionne pas, seul « Accueil » sans l’image de
fond apparaît sur la page.

Peux-tu m’aider ?

Salutations.


.Sigle {
    position : fixed; 
    top: 8%; 
    left: 0.5%; 
    right: 0px; 
    width: 120px; 
    height:120px;
    z-index:1;  
       }

h1 {
    margin-top:0.5%;
    margin-left:15%;
    width:70%;
    text-align: center;
    color:#808080;
    font-family: Calligraphic;	
    font-size: 30px; 
    z-index:25;
    }

h3 { margin-top:4%; color: #0000FF; }

 p { margin-top:-1%; color:#0000FF;}

* { /*   http://www.alsacreations.com/astuce/lire/36-reset-css.html   */
    margin:0;
    padding:0;
    }
		
#organigramme {
     margin-top:0.5%;
     }
		
 li {
    float:left;
    width:250px;
    height:175px;
    margin:20px 10px;
    list-style:none;
    text-align:center;
    background:url(../Outils/Fond-Photo/Onde.png) no-repeat;
    }

 ul#president,
 ul#derniere {
   width:270px; /* 3 cadres + marges */
   margin:20px auto;
    }		
		
ul#vice-president,
ul#secretaire {
   width:810px; /* 3 cadres + marges */
   margin:20px auto;
    }
	
 ul#tresorier {
   width:540px; /* 2 cadres + marges */
   margin:20px auto;
    }		

a.bouton-relief {
      position : fixed; 
      top: 92%; 
      left: 0.5%;
      color: white;
      text-decoration: none;
      font-weight: bold;
      text-align: center;
      padding: 5px;
     background-image: url(../Comite/Bouton-Arrondi-Rouge.png);
      z-index:1;
      }
     a.bouton-relief:hover {
     background-image: url(../Comite/Bouton-Arrondi-Bleu.png);
     z-index:1;
     }	   

<!-- Fixation du sigle -->
<img class="Sigle" src="../Outils/Logo.gif" alt="" width="200" height="200" />
<div class="Sigle">

<a href="javascript:Fermer();"class="bouton-relief">Accueil</a>
</div>

<div id="organigramme">
        <ul div id="president">
		<li>   
            <h3>PRESIDENT</h3>
            <img src=" Ma1erImg.png " alt="" width="150" height="113" />
            <p>Rang 1</p>
        </li>
	</ul> 
		 
        <ul div id="vice-president">
		<li> 
            <h3>VICE PRESIDENT</h3>
            <img src=" Photos-2.png" alt="" width="150" height="113" />
            <p>Rang 2</p>
        </li>
        <li>
            <h3>VICE PRESIDENTE</h3>
            <img src=" Photos-3.png" alt="" width="150" height="113" />
            <p>Rang 2</p>
        </li>
        <li>
            <h3>VICE PRESIDENT</h3>
            <img src=" Photos-4.png" alt="" width="150" height="113" />
            <p>Rang 2</p>
        </li>
       
        </ul> 
		
	<ul div id="secretaire">
        <li>
            <h3>SECRETAIRE</h3>
            <img src=" Photos-5.png" alt="" width="150" height="113" />
            <p>Rang 3</p>
        </li>
	<li>
            <h3>SECRETAIRE</h3>
            <img src=" Photos-6.png" alt="" width="150" height="113" />
            <p>Rang 3</p>
        </li>
	<li>
            <h3>SECRETAIRE</h3>
            <img src=" Photos-7.png" alt="" width="150" height="113" />
            <p>Rang 3</p>
        </li>
	</ul> 
		
	<ul div id="tresorier">
	<li>
            <h3>TRESORIERE</h3>
            <img src=" Photos-8.png" alt="" width="150" height="113" />
            <p>Rang 4</p>
        </li>
	<li>
            <h3>TRESORIERE</h3>
            <img src=" Photos-9.png" alt="" width="150" height="113" />
            <p>Rang 4</p>
        </li>
	</ul> 
		
	<ul div id="derniere">
	<li>
            <h3>INFORMATIQUE</h3>
            <img src=" Photos-10.png" alt="" width="150" height="113" />
            <p>Rang 10</p>
        </li>
        </ul> 
</div>
Salut jmde1,

Dans le désordre :
- le reset CSS doit se situer au début de ta feuille de style.
- en commentaire du reset CSS, justement, le lien que je t'ai donné ne doit pas rester dans ta feuille de styles. C'était juste pour ton information, pour que tu ailles jeter un oeil sur l'article correspondant afin de comprendre le pourquoi de cette déclaration CSS (je t'en conseille à nouveau la lecture).
- les <li> sont floatés à gauche, donc ils se mettent pour ainsi dire en "file indienne". Pour casser cette file indienne et "revenir à la ligne" (et avoir donc une <ul> par ligne), utilise la propriété CSS "clear". C'est pour ça que je te disais "Floates tes <li>, clear tes <ul>". (Pour comprendre un peu mieux tout ça, je te conseille la lecture du tutoriel Initiation au positionnement CSS partie 2)
- a priori, il n'y a pas de raison que ton logo ainsi que les images d'arrière-plan du bouton accueil n'apparaissent pas. Vérifie les chemins d'accès.
- pour ton logo, justement :
.Sigle {
left: 0.5%; ==> logo placé à 0.5% du côté gauche
right: 0px;  ==> logo collé au côté droit
}
Il faut choisir [smile]
- la propriété z-index n'est prise en compte pour les éléments déclarés en position absolute, fixed ou relative. Tu peux donc la supprimer de ton h1 (qui est d'ailleurs absent de ton code html)
- hors sujet : met donc des accents à tes majuscules. Certes, le clavier français facilite pas les choses, mais pour un document qui va rester en ligne pas mal de temps, tu peux te permettre de perdre quelques secondes à aller chercher un "É" ou un "È" dans la table de caractères Windows (dans Démarrer/Tous les programmes/Accessoires/Outils systèmes).
Modifié par marcv (06 May 2009 - 18:54)
Hop,

<mode type="je mets le bazar">

Moi j'aurais fait une série de tableaux. Smiley smile
(À une, deux ou trois cellules suivant le nombre de portraits à montrer).

</mode>
Modifié par Florent V. (06 May 2009 - 21:59)
@jmde1 :
<ul div id="vice-president">
<ul div id="secretaire">
etc...
ul ou div, là aussi il faut choisir Smiley smile

Florent a écrit :
Moi j'aurais fait une série de tableaux. smile
<abstention objet="troll">

Oui, il y a comme souvent plusieurs moyens d'arriver au même résultat.

</abstention> Smiley cligne
Bonjour Marcv,

Tout d'abord merci à ForentV pour sa réponse j'en prend bien note.

Ma page fonctionne correctement sous IE et Firevox, c'était bien
le clear both qui manquait.

En ce qui concernne le bouton j'ai du rajouter dans le CSS les dimensions 80x40,mais je n'arrive pas à centrer le texte, sous firefox le cadre rouge
ne se transforme pas en bleu, et le retour à la page d'accueil ne se fait pas.

Je joins une image du résultat.
Suite à une mauvaise manipulation de ma part ci-joint l'image
du bouton.

Merci pour votre aide.

Salutations upload/15219-Boutons.JPG
a écrit :
En ce qui concernne le bouton j'ai du rajouter dans le CSS les dimensions 80x40, mais je n'arrive pas à centrer le texte
Si ton bouton a une hauteur de 40px, et que tu veux centrer le texte verticalement, il suffit de lui dire que la ligne de texte doit elle aussi faire 40px de haut (line-height:40px);
a écrit :
sous firefox le cadre rouge ne se transforme pas en bleu
Je pense toujours que cela doit être un problème de mauvais chemin d'accès.
a écrit :
le retour à la page d'accueil ne se fait pas
Un clic sur "Accueil" est censé exécuter une fonction Javascript nommée Fermer(). Sans voir le code de cette fonction, ni comment ta page est intégrée au site dans son ensemble, cela risque d'être assez difficile de t'aider.

Ne peux-tu vraiment pas mettre une page de test en ligne ? Cela faciliterait grandement le travail de ceux qui veulent t'aider, et te permettrait d'avoir des réponses bien plus efficaces.
Modifié par marcv (07 May 2009 - 15:28)
J'ose pas trop, c'est vraiment un travail d'amateur que j'ai fait.

Mais bon des que je termine ma page je la mettrais en ligne.

Salutations.
Pages :
Sujet clos
Aller à