Centrage et position absolute

alicvb · 12 Mai 2007

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

buzzistic · 12 Mai 2007

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>

Loupilo · 13 Mai 2007

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;
}

alicvb · 13 Mai 2007

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

Connexion

Centrage et position absolute

Sujets conseillés

alicvb

buzzistic

Loupilo

alicvb

Veuillez vous connecter pour commenter

Parcourir

Activité