28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement et superposition

Bonjour !

Je suis en train d'intégrer une maquette de site web, mais j'ai des difficultés à positionner une liste d'images comme correctement.
Voici ce que je suis censé obtenir :

http://img77.xooimage.com/files/1/7/c/sans-titre2-340e977.png


Et voilà où j'en suis :

http://img83.xooimage.com/files/2/0/a/sans-titre-340e9a6.png


J'ai essayé pleins de choses, avec des position, des float, des z-index, etc... mais je n'ai rien trouvé qui conviennent.

Voici mon code HTML :
<div class="contenu-suite">
            <ul id="photos">
                <li id="clement"><a href="#clement-pres"><img src="images/contenu/clement.png" alt="Photo de Clément"></a></li>
                <li id="alexandre"><a href="#alex-pres"><img src="images/contenu/alexandre.png" alt="Photo d'Alexandre"></a></li>
                <li id="victor"><a href="#victor-pres"><img src="images/contenu/victor.png" alt="Photo de Victor"></a></li>
            </ul>
            <div id="bloc-presentation">
                <div class="contenu-pres">
                    <table class="presentation" id="clement-pres">
                        <caption>Clément</caption>
                        <tr>
                            <th>Âge :</th><td>18 ans</td>
                        </tr>
                        <tr>
                            <th>Ville :</th><td>Besançon</td>
                        </tr>
                        <tr>
                            <th>Contact :</th><td>clement-paris@orange.fr</td>
                        </tr>
                        <tr>
                            <th>Spécialités :</th><td>Développement et intégration web, gestion des bases de données.</td>
                        </tr>
                    </table>



Et le CSS :
ul#photos li{
    list-style-type: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

ul#photos li a{
    outline: none;
}

ul#photos{
    margin: 0;
    padding: 0;
    text-align: center;
}


A noter que les présentations dans le bloc blanc s'affichent au clic sur la photo correspondante, ceci étant géré en jQuery. Pour celà #bloc-presentation est en position: relative, donc si je met un position: absolute sur mon ul#photos, je doit utiliser un top négatif, ce qui me paraît pas très correct...


Merci d'avance pour votre aide !
Salut Clément,

Il n'y a rien de contre indiqué à l'utilisation d'un top négatif.
Tu peux le faire, il n'y a rien de gênant.

Par contre, il aurait été intéressant que tu mettes le code CSS du #bloc-presentation pour qu'on sache comment tu le positionne.

@+
Salut Clément,

Tout d'abord permet moi de te dire que ton utilisation des tableaux dans ce cas n'est pas des plus heureuse. En effet un tableau sert à baliser du contenu tabulaire, ici il n'y en a pas.

Pour ce qui est de ton problème voici ce que je te propose :

<ul id="photos">
      <li id="actif"><a href="#"><img src="#" alt="un alt pertinent"></a></li>
      <li><a href="#"><img src="#" alt="un alt pertinent"></a></li>
      <li><a href="#"><img src="#" alt="un alt pertinent"></a></li>
</ul>
<div id="bloc-presentation">
       ...
</div>

#photos {
      margin: 0; // un petit reset des marges
}

#photos li {
      position: relative;
      top: 50px;
      z-index: 0;
      display: inline-block;
      vertical-align: top;
}

#actif {
	top: 10px !important; // !important parce que j'ai fais ça vite fait // spécifie la photo active
}

#bloc-presentation {
      position: relative;
      z-index: 1;
      height: 100px;
      background-color: white; // avec un fond pour qu'on ne voit pas les photos derrière
}

Peut être as-tu omis de positionner le conteneur sur lesquels tu mettais un z-index ? sinon la propriété ne fonctionne pas.

En espérant t'avoir fourni une solution exploitable Smiley smile
Modifié par Gili (30 Apr 2012 - 18:07)
Merci pour cette réponse.

En fait, le problème est le suivant : avec un top négatif je peux effectivement positionner ma liste d'images (ul), à demi-cachée derrière le bloc de contenu.
Le problème c'est que l'animation jQuery est censée faire "monter" le li sur lequel on a cliqué. Or, en positionnant mon ul en absolute, mes li ne peuvent pas monter mais uniquement descendre (en fait ils sont en haut du bloc ul).

Voici le CSS de #bloc-presentation :
#bloc-presentation{
    margin: 100px auto;
    padding: 20px;
    background-color: white;
    border: 8px solid #CCCCCC;
    border-radius: 10px;
    box-shadow: 3px 3px 8px #555555;
}

.bloc-presentation{
    width: 550px;
    height: 220px;
    overflow: hidden;
    position: relative;
}


Je cherche toujours la solution ^^
J'ai juste réussi à placer les trois images derrière le bloc de contenu, elles dépassent à moitié.
Modifié par ClementParis (30 Apr 2012 - 18:11)
Gili a écrit :
Salut Clément,

Tout d'abord permet moi de te dire que ton utilisation des tableaux dans ce cas n'est pas des plus heureuse. En effet un tableau sert à baliser du contenu tabulaire, ici il n'y en a pas.

(...)

Peut être as-tu omis de positionner le conteneur sur lesquels tu mettais un z-index ? sinon la propriété ne fonctionne pas.

En espérant t'avoir fourni une solution exploitable Smiley smile


Sa ne fonctionne pas... Ma liste s'aligne à droite, le li actif est aligné avec les autres et le tout n'est pas derrière le bloc Smiley decu
Je n'ai pas centré les li dans mon exemple, je voulais juste te montrer comment cacher les photos derrière le bloc. Sinon un text-align: center sur le ul (à conditions que les li soient en inline-block ou inline). Sinon un screenshot est le bienvenu car j'ai testé le code et ça fonctionne bien.

De plus dans mon exemple je n'utilise pas le positionnement absolute donc à priori ça ne devrait pas poser de problème pour ton script jquery. Sinon tu peux éventuellement le faire en CSS3. Où ne pas utiliser un script Jquery tout fait sur lequel tu n'as (apparemment ?) pas la main mise et créer ce que tu souhaites toi même. Si c'est afficher le contenu dans le bloc en dessous et monter la photo c'est relativement simple à mettre en place.
J'ai repris intégralement ta réponse précédente avec un text-align: center sur le ul, voilà ce que sa me donne :

http://img85.xooimage.com/files/1/f/a/sans-titre-3411473.png

Mais le fait de changer le valeur "top" du li ayant la classe "active" ne s'effectue pas, le top affecté à l'ensemble des li prend le dessus sur celui du li actif (firebug barre le top du li actif).

Et bien sûr que j'ai accès au script, je l'ai créé moi-même. Le voici :


jQuery(function($){
    "use strict";
    
    //Variable réferençant l'élément de la présentation active
    //Initialisé avec la première
    var presCourante=$('#clement-pres');
    
    //Pour un affichage correct sans JS    
    $('#bloc-presentation').addClass("bloc-presentation");
    
    //Gestion des boutons directs
    $('#photos').on("click", "a", function(event){
        event.preventDefault();
        var selecteur=$(this).attr("href");
        var pres=$(selecteur);
        presCourante=pres;
        var gauche=pres.position().left;
        $('#bloc-presentation .contenu-pres').css(
            {left:-gauche}
        );
    });
});


EDIT : Enfin pour l'instant je n'ai encore pas écrit la partie qui gère le changement de position des photos, je souhaite déjà caler correctement le reste
Modifié par ClementParis (30 Apr 2012 - 19:33)
Salut,
a écrit :
le top affecté à l'ensemble des li prend le dessus sur celui du li actif (firebug barre le top du li actif).
Oui c'est un problème de priorité des sélecteurs. Pour éviter ce comportement j'ai utilisé le !important. L'as-tu également copié dans ton exemple ? Car je le répète, j'ai testé le code en direct et ça fonctionnait bien ^^

Bonne chance
Ah mince ! Non je n'avais pas vu ! Je ne connaissais pas cette propriété, j'ai pas fait attention j'ai cru que c'était un commentaire...

Et oui, cela fonctionne, merci beaucoup !

Gili a écrit :
Salut Clément,

Tout d'abord permet moi de te dire que ton utilisation des tableaux dans ce cas n'est pas des plus heureuse. En effet un tableau sert à baliser du contenu tabulaire, ici il n'y en a pas.



J'ai en effet pensé que c'était pas très correct, que me conseilles-tu d'utiliser à la place ?
A la base j'avais mis cela en me disant que j'allais changer le contenu du tableau en JS, mais finalement je n'ai pas fait comme ça.
En fait j'ai utilisé le !important parce que les sélecteurs ne sont pas optimal. Mais dans un code propre normalement on a pas à se servir de ce genre d'artifice tout pourri Smiley langue (à éviter donc).

Sinon pour le balisage des informations de ton bloc personnellement, je vois ça comme une liste d'information, j'aurai donc utilisé ul. Mais des paragraphes ça pourrait aller aussi, ou encore une dl. Avec « age, ville, contact, spécialités » dans des spans en display: inline-block avec une width.

Bonne continuation ^^
Sujet clos
Aller à