Aller au contenu

Centrage et position absolute


alicvb

Sujets conseillés

Bonjour,

Voilà mon souci : je suis en train de créer pour mes besoins persos quelques scripts de galleries d'images.

Pour l'instant, tout baigne, et mes images s'affichent aux positions désirée et définies dans un fichier texte.

Pour les positionner, j'utilise position : abolute dans un fichier css séparé.

Maintenant, chacun ayant un écran de taille différente, j'aimerai pouvoir faire en sorte que ma jolie disposition s'affiche toujours au milieu de l'écran et non en haut à gauche.

J'ai essayé d'inclure toutes mes images dans un div lui même inclu dans un autre div avec align="center", mais rien ne bouge...

voici un exemple simplifié de code :

<body>
<div style="width:100%; height:100%" align="center">
<div align="center">
<div class="TitreDiv00">
<p align="center" class="Titre00">

texte du titre

</p></div>

<div class="Div00">
<a href="pe.php?i=00&dos=2007/madere1" alt="" target="_blank">
<img class="Im00" src="2007/madere1/00_vign.jpg" usemap=""/>
</a>
<br/><span class="De00">
legende de image 00
</span></div>

avec un fichier css :

body {background-color: RGB(0,0,0);
color: RGB(255,255,255);
}
.TitreDiv00 {
position: absolute;
width: 259px;
height: 99px;
top: 31px;
left: 374px;
}
.Titre00 {
color: RGB(255,255,255);
font-family: Arial, sans-serif;
font-size: 26pt;
font-weight: bold;
}
.Div00 {
position: absolute;
text-align: center;
width: 252px;
height: 192px;
top: 175px;
left: 378px;
}
.Im00 {
width: 252px;
height: 192px;
border-width: thin;
border-color: RGB(255,255,255);
color: RGB(255,255,255);
}
.De00 {
color: RGB(80,80,80);
font-family: Arial, sans-serif;
font-size: 10pt;
}

Si quelqu'un peut m'aider...

Merci d'avance !

AlicVB

Lien vers le commentaire
Partager sur d’autres sites

Là on ne voit que le CSS pas la disposition en Html, toutefois le bon code est le suivant :

width: 500px;
margin-left: auto;
margin-right: auto;

Après tu place un <div class="monstyle">Ta galerie</div>

Lien vers le commentaire
Partager sur d’autres sites

tribords : je ne sais pas si ça marchera vu que son div est en positionnement absolu.

De mémoire, quelque chose du genre fonctionne (avec largeur/2 la largeur du div... divisée par 2) :

#div {
left:50%;
margin-left:-largeur/2;
width:largeur;
}

Lien vers le commentaire
Partager sur d’autres sites

En effet, Loupilo, la solution de Tribords ne marche pas telle quelle, car je suis en positionnement absolu.

Cependant, c'est bien en adaptant la solution de Tribords que j'ai réussi :

position : relative
width: 500px;
margin-left: auto;
margin-right: auto;

En fait, la position relative ne sert qu'à faire comprendre à mes div "enfants" qu'ils doivent se positionner par rapport à leur parent et non par rapport à la page.

En tout cas, ça marche !

Merci beaucoup !

AlicVB

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...