Aller au contenu
alicvb

Centrage et position absolute

Noter ce sujet :

Recommended Posts

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

Partager ce message


Lien à poster
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>

Partager ce message


Lien à poster
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;
}

Partager ce message


Lien à poster
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

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×
×
  • Créer...