[résolu] Superposition de div

bonjour

je sèche sur un problème de superposition de div et je sollicite votre aide.

je réalise un thème pour le script zenphoto.
il y a un plugin de zenphoto qui permet d'afficher des drapeaux pour choisir la langue du visiteur.
je voudrais que ces drapeaux s'affichent sur la bannière du site.

j'ai lu que pour arriver à faire ça, il fallait passer avec des position: relative et z-index, mais je ne n'arrive pas à obtenir ce que je veux, sachant que j'ai 2 contraintes majeures à respecter :
- le plugin peut ou pas être activer : la bannière doit s'afficher normalement dans les 2 cas de figure.
- la bannière peut être modifiée par l'utilisateur (et sa hauteur peut donc être variable). dans tous les cas, les drapeaux doivent s'afficher par rapport au coin haut à droite de la div <div id="site-title"> qui englobe des mes 2 div.


voici le code

<div id="site-title" class="clearfix">
	<!-- banniere -->
	<?php if (function_exists('printLanguageSelector')) { ?>
		<div id="flag"><?php printLanguageSelector('langselector'); ?></div>
	<?php } ?>
	<div id="ban"<a href="<?php echo html_encode(getMainSiteURL()); ?>" title="<?php echo gettext('Home'); ?>"><img id="zplogo" src="<?php echo $_zp_themeroot; ?>/images/<?php echo getOption('use_image_logo_filename'); ?>" alt="<?php echo getGalleryTitle(); ?>" /></a></div>
</div>

voici le css :

#site-title {
	background: url(../images/hr.gif) repeat-x 0 50%;
	margin-top: 0;
	text-align: center;
}
#flag{
    float: right;
    margin-right: 10px;
    position: relative;
    z-index: 100;
}
#ban {
    float: left;
    position: relative;
    z-index: 99;
}

et voici le résultat : http://test.vincentbourganel.fr/

merci de toute l'aide que vous pourrez m'apporter
Modifié par vincent3569 (04 Dec 2011 - 17:44)

Salut,

N'utilise pas les float dans ce cas de figure mais les margin.

je veux bien quelques explications supplémentaires

préambule:
- z index
- float

Ces deux articles m'ont bien aidé, je pense qu'il en sera de même pour toi.
Ensuite dans ton cas en fait tu veux que tes drapeaux se positionnent en top right de ta div site-title, quoi qu'il arrive, c'est cela?

J'aurais tendance à mettre un positionnement absolu qui placerait les drapeaux par rapport au dernier parent positionné.

#flag{
    top:10px;
    right:10px;
    position: absolute;
}

Modifié par jmlapam (04 Dec 2011 - 06:41)

bonjour

dans le principe, c'est bien un positionnement par rapport au div parent que je recherche.

si je suis ton exemple

#flag{
    top:10px;
    right:10px;
    position: absolute;
}

les drapeaux se positionnent bien en absolu, mais par rapport à la page (donc en dehors de mon div parent)


si je mets simplement

#flag{
    position: absolute;
}

les drapeaux se positionnent bien en absolu par rapport mon div parent et se retrouve bien sur l'image, mais en haut à droite (sans que je puisse le mettre ailleurs)

on y est presque, mais ce n'est pas encore tout à fait ça...

bon, je crois que j'ai trouvé :
en fait il faut mettre le div parent en relatif pour que le div enfant puisse se positionner en absolu par rapport au parent et non pas par rapport au document.
c'est compliqué des fois le css...

ce doc explique ça très bien :
http://www.commentcamarche.net/forum/affich-8514916-de-l-absolu-dans-du-relatif-en-css

et ça marche sur mon site :
http://dev.vincentbourganel.fr/

merci de votre aide

Bah oui c'est ce que je disais mais je ne savais pas vraiment quel était ton parent d'où ma question.

a écrit :
un positionnement absolu qui placerait les drapeaux par rapport au dernier parent positionné.

Mettre [résolu] dans le titre du topic s'il te plaît.
Modifié par jmlapam (04 Dec 2011 - 15:55)