Centrage horizontal d'images dans une DIV

7 janvier 2006 à 18:53:52

Bonsoir à tous,

Je tourne en rond sur un petit problème : si quelqu'un pouvait m'aider, ce serait super sympa !
Mon site est composé d'un head, d'un conteneur central divisé en une partie droite et une partie gauche, et d'un pied.
Le problème se situe dans le conteneur central : partie droite

J'ai une ligne de texte et dessous une DIV qui contient 3 images de découpe (c'est un design) .
Je voudrais centrer horizontalement ce bloc de 3 images et je n'y arrive pas !!!!

Je précise que je voudrais que ce bloc d'image soit centré selon la résolution d'écran du visiteur !!! et non pas selon la seule définition de mon écran...

Si quelqu'un a une idée car je n'ai rien trouvé qui me convienne ni dans le forum, ni sur le site d'Alsa... et je bloque complètement

Voici un extrait de mes codes

<body>

<div id="page">

<div id="corpsgauche">
<div class="textegauche">
 
</div>
</div>

<div id="corpsdroit">
<h1>Texte</h1>

<div class="textedroit">
<a id="image1" href="image1.html"></a>
<a id="image2" href="image2.html"></a>
<a id="image3" href="image3.html"></a>
</div>
</div>

</div>

body
{
margin: 0;padding: 0;
width: 100%;
height: 100%;
background: url('menu/fond.jpg') repeat;
overflow: auto;
}

#page /* conteneur de page */
{
position: absolute;
width: 100%;
height: 93%;
margin: auto;
}

#corpsgauche
{
position: absolute;
left: 0px;
top: 220px;
height: 50%;
width: 260px;
padding: 0;
}

#corpsdroit
{
position: absolute;
left: 260px;
top: 150px;
height: 76%;
width: 72%;
padding: 0;
}

.textegauche
{
position: absolute;
left: 0;
top: 40px;
height: 85%;
width: 95%;
padding: 10px 10px 0 20px;
margin: 0;
overflow: auto;
text-align: left;
}

.textedroit
{
position: relative;
left: 200px;
top: 50px;
height: 80%;
width: 99%;
margin: 0;
padding: 0;
overflow: auto;
}

h1
{
font: bold 18px "Comic Sans MS", arial, serif;
text-align: center;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing : 3px;
}

#image1
{
position: absolute;
left: 0;
top: 0;
width: 127px;
height: 295px;
padding: 0;
margin: 0;
background: url('image1.jpg') no-repeat;
}

#image2
{
position: absolute;
left: 127px;
top: 0;
width: 99px;
height: 295px;
padding: 0;
margin: 0;
background: url('image2.jpg') no-repeat;
}

#image3
{
position: absolute;
left: 226px;
top: 0;
width: 112px;
height: 295px;
padding: 0;
margin: 0;
background: url('image3.jpg') no-repeat;
}

Merci d'avance pour votre aide

jp949

8 janvier 2006 à 10:02:42

avec les position:absolute partout tu n'es pas sorti de l'auberge pour centrer une image .
Le mieux si tu n'es pas trop avancé c'est de refaire en abandonnant les position:absolute et meme relative

eckory

8 janvier 2006 à 18:10:55

Bonsoir JP949, et merci de m'avoir répondu !
Je pige pas pourquoi trop de position: absolute gène !!!
J'ai un design très précis en prime, et je suis bien obligée d'utiliser position: absolute pour positionner toutes mes images sinon le site ne fonctionne pas (c'est un design en image découpe sur un thème bien précis)
J'ai essayé de suivre ton conseil mais ça me foire tout....

En prime, je viens de réaliser en testant sur FF que mes images dans le corps de mon design n'apparaissent pas, et mes balises de formattage de texte ne donnent aucun résultat... Alors que sous IE ça marche nickel chrome !
Que peut il bien se passer.......

jp949

8 janvier 2006 à 18:31:57

desolé ce soir je dois partir je m'en occupe demain matin si tu n'as pas trouvé de soluce

eckory

8 janvier 2006 à 19:15:20

Pas de problème "jp" je continue a chercher et j'envisage de refaire mon CSS ! je vais repotasser les cours de Mateo en attendant car il y a sûrement des choses que j'ai zappées tant l'information est dense pour une débutante comme moi....
C'est très sympa de ta part de m'aider... Je repasserais demain soir sur le pic, car je bosse dans la journée sans accès à internet !
a+ et merci

---
Petit add dans la soirée : jp j'ai trouvé pourquoi FF n'affichait rien comme IE ! c'était une question de déclaration de mes CSS
en effet j'ai plusieurs feuilles de style liées à une page XHTML et je me suis rendue compte qu'il ne fallait déclarer qu'un seul attibut TITLE dans le head avec les link=rel stylesheet !
Ce problème là est résolu

Par contre le reste est toujours d'actualité et je ne vois pas comment faire sans utiliser autant de position: absolute; ayant quand même pas mal de .jpg à positionner exactement en respect de mon design
sans compter que pour corser les choses, non content d'avoir un head plein de jpg, j'ai également un foot qui doit rester en bas de page quelque soit la résolution du visiteur et l'espace utilisé dans mon corps central !!!

Si tu veux plus d'informations, est il possible de communiquer en MP ou par mail ?
A ce soir, j'espère !

jp949

9 janvier 2006 à 15:47:04

envoie moi 1 mp avec un lien si ta page est en ligne ce sera plus pratique