[Résolu] [Résolu] Aligner en hauteur 2 éléments différents

bonjour
question de débutant
je veux aligner en hauteur un "menu du post" (fait de lien internes) sur une galerie, une vidéo, ou une image dans un container de 715px de large
exemple ici http://www.marcferrante.com/test
1 je suis allé voir sur les tutos et j'ai tapé ce html dans le post

[gallery=11]
<div class="menudupost">
<ul class="menudupost">
    <li><a title="la danse de Saint-Guy" href="http://www.marcferrante.com/la-danse-de-saint-guy">présentation</a></li>
    <li><a title="la danse de Saint-Guy (photo)" href="http://www.marcferrante.com/test">photo</a></li>
    <li><a title="la danse de Saint-Guy (vidéo)" href="http://www.marcferrante.com/p985">vidéo</a></li>
    <li><a title="the dance of St. Vitus (photo)" href="http://www.marcferrante.com/p4322"><span style="color: #ccffff;">english</span> </a><a title="der Veitstanz (foto)" href="http://www.marcferrante.com/p4324"><span style="color: #ccffff;">deutsch</span></a></li>
</ul>
</div>
<p style="text-align: justify;">texte[code]

[b]et ceci dans le css[/b]

[code]#ngg-galleryoverview,.ngg-galleryoverview {position: relative; width: 715px;}

#menudupost { float: right; vertical-align:top; width: 200px; list-style: none; text-align: right ; margin: 0; padding: 0; }

#menudupost li { background: #666 ; color: #ddd ; margin-bottom: 1px ; }

#menudupost li a { display: block ; background: #666 ; color: #ddd ; font: 1em " Trebuchet MS ",Lucida Grande,Arial,sans-serif; line-height: 1em ; text-align: right ; text-decoration: none ; padding: 4px 0 ; }

#menudupost li a:hover, #navigation li a:focus, #navigation li a:active { color: #fff ; text-decoration: underline ; }

mais cela ne marche pas : comment faire pour aligner le haut du "menu du post" sur le haut de la galerie ?
merci d'avance
Modifié par tatiana g (15 Mar 2012 - 09:01)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

suite au message précedent
j'ai modifié la galerie le nggallery css pour reduire la largeur du bloc de la galerie :

.ngg-galleryoverview {
    clear: both;
    display: block !important;
    margin-top: 10px;
    overflow: hidden;
    width: 70%;

mais cela ne s'aligne toujours pas sur le haut
http://www.marcferrante.com/test
je desepère !
merci d'avance
Modifié par tatiana g (15 Mar 2012 - 13:27)

Salut

Je souhaite très bien aider mais je n'arrive pas à comprendre ta problématique, qu'est ce que tu veux dire par aligner en haut ?!. Si le résultat souhaité est trop compliqué pour être décri par des mots, tu pourra peut être fournir un petit dessin illustratif

jaimerais faire quelque chose qui ressemble a ça :
Modifié par tatiana g (15 Mar 2012 - 15:24)

bonjour,

tu peux mettre la galerie en float: left, et le menu en float: right;
puis tu termines par ton texte en clear: both;

Tu peux aussi utiliser display: inline-block, ou positionner ton menu en absolu.

Si tu ne comprends pas, je t'invite à lire cet excéllent article sur les notions de bases en positionnement css.
Modifié par kustolovic (15 Mar 2012 - 15:40)

Lol c'est la première fois que je remarque ce menu, je croyais que tu parlais de celui à gauche de la page

Toute fois voilà, je vois que tu as eu un ensemble de solutions. Mais je te recommande celle du positionnement absolu car les deux autres sont un peu plus compliqué à mettre en place si notre savoir est un peu limité dans les Css.

Donc je te propose de mettre le #content .entry en position:relative; et pour le .menudupost tu rajoutes ça aussi: position:absolute; top:0; right:0; et tu lui définis un width je crois que 150px sera assez suffisante. Cela c'est pour te débloquer pour le moment mais tu profites de l'article proposé par kustolovic pour comprendre mieux le positionnement.

Bonne courage

non cela ne marche pas car le menu part au limite de la fenetre
voici ce que j'ai change dans le css style :

#ngg-galleryoverview,.ngg-galleryoverview { position: relative; width: 500px; }

.menudupost { position:absolute; top:0; right:0; width: 150px; text-align: right; }

et dans le html

[gallery=11]
<div class="menudupost">
<ul class="menudupost" style="text-align: right;">
	<li><a title="la danse de Saint-Guy" href="http://www.marcferrante.com/la-danse-de-saint-guy">présentation</a></li>
	<li><a title="la danse de Saint-Guy (photo)" href="http://www.marcferrante.com/test">photo</a></li>
	<li><a title="la danse de Saint-Guy (vidéo)" href="http://www.marcferrante.com/p985">vidéo</a></li>
	<li><a title="the dance of St. Vitus (photo)" href="http://www.marcferrante.com/p4322"><span style="color: #ccffff;">english</span></a> <a title="der Veitstanz (foto)" href="http://www.marcferrante.com/p4324"><span style="color: #ccffff;">deutsch</span></a></li>
</ul>
</div>

<p style="text-align: justify;"><strong>Jeux de mains...

Bizzar car je l'ai tester sur ton site avant de te répondre tu es sûr que tu as mis ce que nous avions demandé, car il est impossible que le menu part à la fin de la page car tu as le #content qui un width de 715px.

#content .entry {
padding: 20px 0;
position:relative;
}
.menudupost{
position:absolute;
top:30px;
right:0;
width:150px;
}

Et je viens de le retester sur le lien fourni en changeant le nom de la class de la div navigationmenucont (car tu l'as mis aussi pour une liste contenu dans le conteneur du menu) qui contient tes listes en menudupost et ça marche super.

Toute fois pour ce que tu viens de faire maintenant c'est ça the hard way en débutant les css, et malheureusement tu ne l'as pas fait correctement: tu as fait sortir la galerie du flux et ça fait semblant que tu es proche de régler le problème au temps qu'il y a bcp d'autres contraintes à prendre en considération:
Si tu veux travailler par les float, tu gardes ton float left sur la galerie et pour la suite:

.menudupost{
float:right;
width:150px;
}
.spacer{
height:0;
font-size:0;
visiblilty:hidden;
clear:both;
}

Et dans ce cas tu dois rajouter un div après la div menu, et avant le paragraphe qui portera la class spacer: <div class="spacer"></div>

J'espère que cela règlera ton problème

Bonne courage pour le reste.

oui cela marche merciiii...mais il y a encore un petit ecart de hauteur entre la galerie et le menu est-ce un probleme de marge ? comment changer ça ?
upload/43764-ecran3.jpg" alt="upload/43764-ecran3.jpg" />
le css

#ngg-galleryoverview,.ngg-galleryoverview { display: inline; float:left; width: 500px; }

.navigationmenucont { float:right; width:200px; }

.spacer{ height:0; font-size:0; visiblilty:hidden; clear:both; }

html

[gallery=11]
<div class="navigationmenucont">
<ul class="navigationmenucont" style="text-align: right;">
	<li><a title="la danse de Saint-Guy" href="http://www.marcferrante.com/la-danse-de-saint-guy">présentation</a></li>
	<li><a title="la danse de Saint-Guy (photo)" href="http://www.marcferrante.com/test">photo</a></li>
	<li><a title="la danse de Saint-Guy (vidéo)" href="http://www.marcferrante.com/p985">vidéo</a></li>
</ul>
<ul class="langues" style="text-align: right;">
	<li><a title="the dance of St. Vitus (photo)" href="http://www.marcferrante.com/p4322"><span style="color: #ccffff;">english</span></a> <a title="der Veitstanz (foto)" href="http://www.marcferrante.com/p4324"><span style="color: #ccffff;">deutsch</span></a></li>
</ul>
</div>

<div class="spacer"></div><strong>Jeux de mains</strong>… 2005-2012. 6 séries...

merci bcp en tout cas
Modifié par tatiana g (15 Mar 2012 - 17:49)

re

la marge est dû à la propriété margin-top que tu as spécifié pour le .ngg-galleryoverview, tu l'as supprime de tes css et ta galerie va monter.

Bonne courage

merciiiii

merciiiii