position:relative augmente la taille du conteneur ?
Bonjour à tous !
Bon, j'essaie d'être sage et d'être un bon programmeur HTML/CSS (je précise que je suis un total noob, j'ai commencé il y a quelques semaines à peine), et du coup je suis en train de virer tous les <table> que je peux avoir dans mon code.
Pour l'instant c'est allé, et j'ai réduit le poids de mes pages de moitié (:!: ).
Mais là je m'attaque à la partie la plus dure (pour moi) : l'affichage des résultats de la recherche (je précise aussi que je suis en train de TENTER de faire un site de rencontres).
Dans cette page de résultats, il y a pleiiiiin d'infos, comme le montre cette image :
http://renaud.lideln.free.fr/test/Image40.jpg
Je suis parvenu à tout bien agencer (comme le prouve le screenshot), mais un détail plutôt gênant :
Je sais pas si c'est lié, mais cette page d'affichage de résultats de recherche se trouve dans un iframe.
Quoiqu'il en soit, mon cadre de iframe est super agrandi dans tous les sens, et je pense que les positions:relative ne sont qu'un "mirage" car FF (je teste pas encore sous IE, trop de soucis) agrandit l'iframe en fonction de ce qu'on met dedans AVANT de faire les position:relative (alors qu'en plus je fixe bien la taille de mes div conteneurs pour être sûr... mais non !)
Enfin en tous cas on dirait ! Car avec la solution des <table> tout marche bien, mais avec les span et les position relative, j'ai ce problème qui vient tout gâcher :cry:
Si quelqu'un sait comment résoudre ce ptit problème, toute aide sera la bienvenue :)
Voilà un ptit bout de code au cas où...
Page php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class="Recherche2_Ultra_Container">
<span class="Recherche_Photo_Container"><img src="img/containers/profil_photo_cadre_<?php echo $r["iSexe"] ?>.png" width="152" height="136" /></span>
<span class="Recherche2_Photo">
<?php
echo '<a class="CImage" href="affiche_image.php?pseudo='.$r["sPseudo"].'" target="_blank"><img src="affiche_image.php?pseudo='.$r["sPseudo"].'" border="1" width="128" height="128" /></a>';
?>
</span>
<div class="Rech2_Age_Cpt"><span class="<?php echo $PROFIL_TEXTE ?>">Age</span></div>
<div class="Rech2_Dpt_Cpt"><span class="<?php echo $PROFIL_TEXTE ?>">Département</span></div>
<div class="Rech2_Rech2_Cpt"><span class="<?php echo $PROFIL_TEXTE ?>">Recherche</span></div>
<div class="Rech2_Pour_Cpt"><span class="<?php echo $PROFIL_TEXTE ?>">Pour</span></div>
<div class="Rech2_Inscr_Cpt"><span class="<?php echo $PROFIL_TEXTE ?>">Inscription le</span></div>
<div class="Rech2_Connec_Cpt"><span class="<?php echo $PROFIL_TEXTE ?>">Dernière connexion le</span></div>
<div class="Rech2_Age_Val"><span class="<?php echo $PROFIL_TEXTE ?>"><?php echo $r["iAge"] ?>ans</span></div>
<div class="Rech2_Dpt_Val"><span class="<?php echo $PROFIL_TEXTE ?>"><?php echo $r["iDpt"] ?></span></div> |
Et dans le .css :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.Recherche2_Ultra_Container{height:190px; width:630px;}
.Recherche_Photo_Container{height:136px; position:relative; top:0px; left:0px;}
.Recherche2_Photo{position:relative; top:-4px; left:-145px;}
.Recherche2_Actions_Container{height:22px; position:relative; top:-245px; left:10px;}
.Rech2_Age_Cpt{position:relative; top:-140px; left:160px;}
.Rech2_Dpt_Cpt{position:relative; top:-140px; left:160px;}
.Rech2_Rech2_Cpt{position:relative; top:-140px; left:160px;}
.Rech2_Pour_Cpt{position:relative; top:-140px; left:160px;}
.Rech2_Inscr_Cpt{position:relative; top:-120px; left:160px;}
.Rech2_Connec_Cpt{position:relative; top:-120px; left:160px;}
.Rech2_Age_Val{position:relative; top:-260px; left:330px;}
.Rech2_Dpt_Val{position:relative; top:-260px; left:330px;}
.Rech2_Rech2_Val{position:relative; top:-260px; left:330px;}
.Rech2_Pour_Val{position:relative; top:-260px; left:330px; width:300px; height:20px;}
.Rech2_Inscr_Val{position:relative; top:-240px; left:330px;}
.Rech2_Connec_Val{position:relative; top:-240px; left:330px;} |
Merci encore à vous :)
Lideln
