[Résolu] Div avec position à centrer

Question

Scriptiz

26 Nov 2007 à 03:16

Bonjour,

Voilà je me retrouve devant un facheux problème, j'ai découpe mon design de façon a pouvoir faire des background-repeat: repeat-x; ou repeat-y;. Mais le seul problème est que j'aimerai centrer mes calques sur ma page (automatiquement).

J'y suis arrivé en faisant un width: 1000px et un margin: auto; dans le body du css, mais j'ai été obligé de mettre mes calques div avec position en relative pour qu'ils soient centrés.

Du coup je me suis mit à décalé tout mes div positionné vers des position y négatives...

Maintenant le résultat est bon, mais ma page reste super longue (comme si les div étaient toujours présent en bas mais qu'il se positionnaient en haut.

Voici le code de ma page html et de mon css, merci d'avance pour votre aide qui me sera précieuse car c'est un problème que je rencontre à chaque fois.

xHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>image.png</title>
<meta http-equiv="Content-Type" content="text/html;iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" title="image" media="screen" />
</head>
<body>
<div id="image-r1c1"></div>
<div id="image-r1c2"></div>
<div id="image-r1c3"></div>
<div id="image-r1c5"></div>
<div id="image-r1c7"></div>
<div id="image-r1c11"></div>
<div id="image-r1c12"></div>
<div id="image-r1c14"></div>
<div id="image-r2c2"></div>
<div id="image-r2c5"></div>
<div id="image-r2c7"></div>
<div id="image-r2c10"></div>
<div id="image-r2c13"></div>
<div id="image-r2c16"></div>
<div id="image-r3c2"></div>
<div id="image-r3c3"></div>
<div id="image-r3c7"></div>
<div id="image-r3c13"></div>
<div id="image-r4c2"></div>
<div id="image-r4c4"></div>
<div id="image-r4c8"></div>
<div id="image-r4c13"></div>
<div id="image-r5c2"></div>
<div id="image-r5c3"></div>
<div id="image-r5c4"></div>
<div id="image-r5c8"></div>
<div id="image-r5c9"></div>
<div id="image-r5c10"></div>
<div id="image-r5c13"></div>
<div id="image-r5c15"></div>
<div id="image-r6c3"></div>
<div id="image-r6c6"></div>
<div id="image-r6c7"></div>
<div id="image-r6c11"></div>
<div id="image-r6c12"></div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body 
{
	background-color: #F3F3F3;
	margin: auto;
	width: 1000px;
}

#image-r1c1 
{
	/*background-image: url("images/image_r1_c1.png");*/
	background-color: #F3F3F3;
	position: relative;
	left: 0px;
	top: 0px;
	width: 16px;
	height: 750px;
	z-index: 1;
	visibility: visible;
}

#image-r1c2 
{
	/*background-image: url("images/image_r1_c2.png");*/
	background-color: #F3F3F3;
	position: relative;
	left: 16px;
	top: -750px;
	width: 29px;
	height: 28px;
	z-index: 2;
	visibility: visible;
}

#image-r1c3 
{
	background-image: url("images/image_r1_c3.png");
	position: relative;
	left: 45px;
	top: -778px;
	width: 25px;
	height: 28px;
	z-index: 3;
	visibility: visible;
}

#image-r1c5 
{
	background-image: url("images/image_r1_c5.png");
	background-repeat: repeat-x;
	position: relative;
	left: 70px;
	top: -806px;
	width: 595px;
	height: 28px;
	z-index: 4;
	visibility: visible;
}

#image-r1c7 
{
	background-image: url("images/image_r1_c7.png");
	position: relative;
	left: 665px;
	top: -834px;
	width: 56px;
	height: 28px;
	z-index: 5;
	visibility: visible;
}

#image-r1c11 
{
	background-image: url("images/image_r1_c11.png");
	position: relative;
	left: 721px;
	top: -862px;
	width: 202px;
	height: 28px;
	z-index: 6;
	visibility: visible;
}

#image-r1c12 
{
	background-image: url("images/image_r1_c12.png");
	position: relative;
	left: 923px;
	top: -890px;
	width: 26px;
	height: 28px;
	z-index: 7;
	visibility: visible;
}

#image-r1c14 
{
	/*background-image: url("images/image_r1_c14.png");*/
	background-color: #F3F3F3;
	position: relative;
	left: 949px;
	top: -918px;
	width: 51px;
	height: 28px;
	z-index: 8;
	visibility: visible;
}

#image-r2c2 
{
	background-image: url("images/image_r2_c2.png");
	position: relative;
	left: 16px;
	top: -918px;
	width: 54px;
	height: 28px;
	z-index: 9;
	visibility: visible;
}

#image-r2c5 
{
	background-image: url("images/image_r2_c5.png");
	position: relative;
	left: 70px;
	top: -946px;
	width: 595px;
	height: 28px;
	z-index: 10;
	visibility: visible;
}

#image-r2c7 
{
	background-image: url("images/image_r2_c7.png");
	position: relative;
	left: 665px;
	top: -974px;
	width: 47px;
	height: 28px;
	z-index: 11;
	visibility: visible;
}

#image-r2c10 
{
	background-image: url("images/image_r2_c10.png");
	position: relative;
	left: 712px;
	top: -1002px;
	width: 222px;
	height: 202px;
	z-index: 12;
	visibility: visible;
}

#image-r2c13 
{
	background-image: url("images/image_r2_c13.png");
	position: relative;
	left: 934px;
	top: -1204px;
	width: 60px;
	height: 28px;
	z-index: 13;
	visibility: visible;
}

#image-r2c16 
{
	/*background-image: url("images/image_r2_c16.png");*/
	background-color: #F3F3F3;
	position: relative;
	left: 994px;
	top: -1232px;
	width: 6px;
	height: 722px;
	z-index: 14;
	visibility: visible;
}

#image-r3c2 
{
	background-image: url("images/image_r3_c2.png");
	position: relative;
	left: 16px;
	top: -1926px;
	width: 29px;
	height: 145px;
	z-index: 15;
	visibility: visible;
}

#image-r3c3 
{
	background-image: url("images/image_r3_c3.png");
	position: relative;
	left: 45px;
	top: -2071px;
	width: 620px;
	height: 145px;
	z-index: 16;
	visibility: visible;
}

#image-r3c7 
{
	background-image: url("images/image_r3_c7.png");
	position: relative;
	left: 665px;
	top: -2216px;
	width: 47px;
	height: 145px;
	z-index: 17;
	visibility: visible;
}

#image-r3c13 
{
	background-image: url("images/image_r3_c13.png");
	position: relative;
	left: 934px;
	top: -2361px;
	width: 60px;
	height: 145px;
	z-index: 18;
	visibility: visible;
}

#image-r4c2 
{
	background-image: url("images/image_r4_c2.png");
	position: relative;
	left: 16px;
	top: -2361px;
	width: 44px;
	height: 29px;
	z-index: 19;
	visibility: visible;
}
#image-r4c4 
{
	background-image: url("images/image_r4_c4.png");
	position: relative;
	left: 60px;
	top: -2390px;
	width: 616px;
	height: 29px;
	z-index: 20;
	visibility: visible;
}

#image-r4c8 
{
	background-image: url("images/image_r4_c8.png");
	position: relative;
	left: 676px;
	top: -2419px;
	width: 36px;
	height: 29px;
	z-index: 21;
	visibility: visible;
}

#image-r4c13 
{
	background-image: url("images/image_r4_c13.png");
	position: relative;
	left: 934px;
	top: -2448px;
	width: 60px;
	height: 29px;
	z-index: 22;
	visibility: visible;
}

#image-r5c2 
{
	/*background-image: url("images/image_r5_c2.png");*/
	background-color: #F3F3F3;
	position: relative;
	left: 16px;
	top: -2448px;
	width: 29px;
	height: 520px;
	z-index: 23;
	visibility: visible;
}

#image-r5c3 
{
	background-image: url("images/image_r5_c3.png");
	background-repeat: repeat-y;
	position: relative;
	left: 45px;
	top: -2968px;
	width: 15px;
	height: 495px;
	z-index: 24;
	visibility: visible;
}

#image-r5c4 
{
	/*background-image: url("images/image_r5_c4.png");*/
	background-color: #FFFFFF;
	position: relative;
	left: 60px;
	top: -3463px;
	width: 616px;
	height: 495px;
	z-index: 25;
	visibility: visible;
}

#image-r5c8 
{
	background-image: url("images/image_r5_c8.png");
	background-repeat: repeat-y;
	position: relative;
	left: 676px;
	top: -3958px;
	width: 18px;
	height: 495px;
	z-index: 26;
	visibility: visible;
}

#image-r5c9 
{
	background-image: url("images/image_r5_c9.png");
	position: relative;
	left: 694px;
	top: -4453px;
	width: 18px;
	height: 495px;
	z-index: 27;
	visibility: visible;
}

#image-r5c10 
{
	background-image: url("images/image_r5_c10.png");
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	position: relative;
	left: 712px;
	top: -4948px;
	width: 222px;
	height: 495px;
	z-index: 28;
	visibility: visible;
}

#image-r5c13 
{
	background-image: url("images/image_r5_c13.png");
	position: relative;
	left: 934px;
	top: -5443px;
	width: 19px;
	height: 495px;
	z-index: 29;
	visibility: visible;
}

#image-r5c15 
{
	/*background-image: url("images/image_r5_c15.png");*/
	background-color: #F3F3F3;
	position: relative;
	left: 953px;
	top: -5938px;
	width: 41px;
	height: 520px;
	z-index: 30;
	visibility: visible;
}

#image-r6c3 
{
	background-image: url("images/image_r6_c3.png");
	position: relative;
	left: 45px;
	top: -5963px;
	width: 26px;
	height: 25px;
	z-index: 31;
	visibility: visible;
}

#image-r6c6 
{
	background-image: url("images/image_r6_c6.png");
	background-repeat: repeat-x;
	position: relative;
	left: 71px;
	top: -5988px;
	width: 594px;
	height: 25px;
	z-index: 32;
	visibility: visible;
}

#image-r6c7 
{
	background-image: url("images/image_r6_c7.png");
	position: relative;
	left: 665px;
	top: -6013px;
	width: 56px;
	height: 25px;
	z-index: 33;
	visibility: visible;
}

#image-r6c11 
{
	background-image: url("images/image_r6_c11.png");
	background-repeat: repeat-x;
	position: relative;
	left: 721px;
	top: -6038px;
	width: 202px;
	height: 25px;
	z-index: 34;
	visibility: visible;
}

#image-r6c12 
{
	background-image: url("images/image_r6_c12.png");
	position: relative;
	left: 923px;
	top: -6063px;
	width: 30px;
	height: 25px;
	z-index: 35;
	visibility: visible;
}

Merci de votre aide.
Modifié par Scriptiz (27 Nov 2007 - 18:36)

fvsch

26 Nov 2007 à 10:23

Bonjour,

Scriptiz a écrit :
Du coup je me suis mit à décalé tout mes div positionné vers des position y négatives...

Argh.

Scriptiz a écrit :
mais ma page reste super longue (comme si les div étaient toujours présent en bas mais qu'il se positionnaient en haut.

C'est normal, le positionnement relatif fonctionne comme ça.

Je ne sais pas quelle est la mise en page que tu veux faire au juste, mais le positionnement relatif n'est pas adapté au positionnement d'une série de blocs.

Un peu de lecture:
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Bonne continuation. Smiley smile

Scriptiz

26 Nov 2007 à 12:40

Merci de ta réponse Smiley smile

J'ai lut tes deux articles en diagonales mais je connaissais déjà tout ceci, le problème c'est que je ne parvient pas à utiliser ces outils pour centrer ma découpe que voici :

http://users.skynet.be/cadenza/decoupe.png
(si vous vous demandez pourquoi ma découpe est aussi barbare, c'est que j'ai prit toute les zones pouvant se répétées afin d'en faire des images de 1 pixel de largeur ou hauteur afin de faire des background-repeat et d'ainsi alléger le chargement des images (mes images qui se répètent sont 10fois plus légères que si je mettait l'image totale).

Avec des tableaux ça irait tout seul mais j'aimerais utiliser des div pour une fois Smiley lol

Et je ne voit pas d'autres façon que de positionner mes div's avec des positions absolute, mais si je fait ça je ne sais pas les centrer pour chaque utilisateur car leurs résolutions sont différentes Smiley sweatdrop

J'espère vraiment pouvoir résoudre ce problème facheux Smiley ravi

Modifié par Scriptiz (26 Nov 2007 - 12:41)

fvsch

26 Nov 2007 à 13:24

Scriptiz a écrit :
(si vous vous demandez pourquoi ma découpe est aussi barbare

Découpe barbare = difficulté d'intégration multipliée par dix pour gain de performances non avéré.

Raisonner en termes de découpe, c'est déjà avoir loupé quelque chose de la démarche d'intégration HTML/CSS. Smiley ohwell

Encore un peu de lecture:
http://blog.alsacreations.com/2007/04/07/344-demarche-integration-html-css

Si tu veux tout de même partir sur cette découpe, à tout prendre, le positionnement absolu sera plus adapté que le positionnent relatif ou que l'utilisation des flottants. Mais bon, si vraiment on veut travailler avec une démarche de découpe dans ce genre, autant faire ça avec des tableaux de mise en page, ça sera plus simple et le résultat sera de meilleure qualité.

Si tu le souhaites, tu peux nous présenter ton design, et on te dira comment on l'intègrerait sans tout découper en minuscules rectangles. Smiley cligne

Scriptiz

26 Nov 2007 à 19:28

Merci, j'ai lut ton article mais j'aimerai bien que tu me dise comment faire ma découpe pour qu'elle soit la plus optimale possible, en voici l'image :

Design du site
L'idéal serait que la partie centrale et le menu gris à droite soient extensibles verticalement Smiley smile

Si tu pouvait me tracer les lignes de ma découpe et me faire une structure de base en xhtml avec des divs, ce serait vraiment sympa, sinon je me débrouillerai Smiley smile

Merci à tous pour votre aide, je ne pensai pas trouvé autant d'aide ici pour ce problème qui me traine depuis longtemps (avant je faisais mes découpes en tableaux Smiley langue

ps: quelle largeur serait optimale, sachant que les visiteurs sont des jeunes aux pc plutôt modernes (j'ai pour l'instant mit une largeur de 1000 pour l'image en visant un publique majoritaire ayant une résolution de 1024*768) Smiley smile

Merci pour tout.
Modifié par Scriptiz (03 May 2008 - 12:42)

fvsch

26 Nov 2007 à 20:13

Scriptiz a écrit :
ps: quelle largeur serait optimale, sachant que les visiteurs sont des jeunes aux pc plutôt modernes (j'ai pour l'instant mit une largeur de 1000 pour l'image en visant un publique majoritaire ayant une résolution de 1024*768)

La notion de «largeur optimale» est difficile à définir et dépend également de tes objects.
Si tu pars sur une largeur fixe en pixels, il faut au moins viser la compatibilité (voire un rendu «optimal») en 1024px de large. Pour cela, tabler sur 1000px est un peu juste, mieux vaut ne pas trop dépasser 980px, voire prendre plus de marge (900px...) si graphiquement ça rend bien.

Pour les questions de découpage (je hais ce mot...), voilà ce que ça pourrait donner:

- une image de fond pour l'en-tête (largeur fixe, hauteur fixe), image qui ne comprend pas les logos;
- une image répétée en hauteur dessinant les deux colonnes (technique des colonnes factices, bloc en largeur fixe, hauteur fluide)... au passage, ne pas faire une image de 1px de haut, ça indispose certains navigateurs de devoir répéter une même image 2000 fois sur le canevas... 20px ou 50px de haut, c'est très bien;
- une image de fond sur un bloc qui vient dessiner la fin des colonnes.

Il faudra juste faire attention à bien placer le bloc d'info sur la connexion (peut-être à découper en deux images si on veut qu'il soit fluide en largeur).

Il faudra faire attention à l'optimisation des images, notamment celle du fond de l'en-tête qui risque d'être un peu lourde. Mais ça devrait pouvoir s'optimiser convenablement.

Une chose: sur ce genre de design, le PNG donne souvent de bons résultats pour des images de fond assez géométriques et/ou avec de grands dégradés ou effets d'ombrages. Attention cependant à Photoshop qui n'optimise pas correctement le PNG (il produit des fichiers 30-50% plus lourd que des fichiers optimisés).

fvsch

26 Nov 2007 à 20:16

Correction: il faut caser une image de fond en plus pour la colonne de droite. Le principe: on laisse l'image de fond du bloc central dessiner les colonnes (la colonne de droite ayant un fond blanc), et pour la div de la colonne de droite on lui attribue une image de fond non répétée en largeur, qui dessine le dégradé gris vers blanc.

Il faudra caler la div du menu de droite au pixel près, pour que ça marche. Ça ne devrait pas être bien méchant.

Scriptiz

26 Nov 2007 à 20:57

Merci pour toutes vos informations, je m'attèle tout de suite à refaire ça correctement Smiley smile

puis je vous montrerai pour que vous puissiez jugez Smiley smile

Juste une dernière petite question en rapport avec ta remarque sur Photoshop Florent, quel programme utiliser pour avoir une meilleure optimisation des png si photoshop ne fait pas bien ça? Pour l'instant moi je fonctionne avec FireWorks CS3... est-ce mieux?

Scriptiz

26 Nov 2007 à 22:17

Voilà je pense avoir plutôt bien fait tout ça :
Aperçu

Il me reste cependant un petit problème quant au dégradé du menu
Dégradé menu

Car je ne sais pas comment faire pour qu'il se positionne au bon endroit Smiley decu

Ou alors faire plusieurs div pour ma partie centrale et faire des float pour qu'ils se mettent sur la même ligne?

Voici les sources :
index.html
style.css
Modifié par Scriptiz (26 Nov 2007 - 22:19)

fvsch

27 Nov 2007 à 02:14

Scriptiz a écrit :
Il me reste cependant un petit problème quant au dégradé du menu
Dégradé menu

Car je ne sais pas comment faire pour qu'il se positionne au bon endroit

En plaçant div#menu avant la div de contenu principal (bloc de gauche), on peut faire ceci:

div#menu {
	float: right;
	width: 232px;
	min-height: 491px;
	margin-right: 61px;
	display: inline; /* correction doubled margin bug IE6 */
	background: url(images/menu.png) no-repeat left top;
}

Si on veut placer le code du bloc de gauche en premier, il faudra faire flotter ce bloc.

Attention à deux choses:
1. À partir du moment où on utilise des flottants, on fera attention au dépassement des flottants et aux moyens de l'éviter (overflow: hidden; width: 100% sur conteneur div#main, par exemple). Faire une recherche sur "dépassement flottants" pour en savoir plus.

2. Ne pas utiliser de hauteurs fixes pour les blocs. Utiliser min-height lorsque nécessaire, et pourquoi pas dégrader en height pour Internet Explorer 6 (qui ne fige pas les hauteurs) via un commentaire conditionnel.
Voir la FAQ du forum pour les commentaires conditionnels.

fvsch

27 Nov 2007 à 02:21

Scriptiz a écrit :
Juste une dernière petite question en rapport avec ta remarque sur Photoshop Florent, quel programme utiliser pour avoir une meilleure optimisation des png si photoshop ne fait pas bien ça? Pour l'instant moi je fonctionne avec FireWorks CS3... est-ce mieux?

Pour ma part je travaille surtout avec The Gimp, qui est très bon sur ce format.

Je trouvais tes images PNG un peu lourdes, à tout hasard je les ai ouvertes dans The Gimp, et simplement réenregistrées (en PNG-32, avec couche alpha, donc le format PNG potentiellement le plus lourd).

J'ai obtenu les tailles d'image suivantes (taille d'origine -> taille obtenue):
- header.png = 94,3Ko -> 15,6Ko
- main.png = 55,1Ko -> 477 octets!
- footer.png = 52,4Ko -> 1,7 Ko!

Je trouve ça assez saisissant.

Scriptiz

27 Nov 2007 à 03:22

Je te remercie pour toutes tes réponses Florent, je m'appliquerai à les mettre en pratique demain car là la nuit est déjà bien entamée Smiley cligne

En tout cas c'est certain que je vais réinstaller The Gimp, bien que je ne l'ai plus utilisé depuis les versions CS3 de la gamme Adobe (qui m'ont coutées bien cher Smiley confused

).

Un tout grand merci pour tout, je pense que demain tout fonctionnera grâce à tout ceci.

Je tacherai de participer aux forum d'Alsacreations de temps à autres car l'aide qui m'a été fournie m'a vraiment bien aidée et cela me fait plaisir à voir une communauté aussi rapide et précise.

Encore merci.

Ps: Je mettrai "Résolu" demain dans le titre de mon post si tout marche bien Smiley smile

Modifié par Scriptiz (27 Nov 2007 - 03:24)

Scriptiz

27 Nov 2007 à 12:15

C'est génial, tout marche, enfin presque, sur Firefox, tout est parfait et je vais pouvoir continuer, mais sous IE7, j'ai un fameux problème de décalage avec le menu... Smiley sweatdrop

Regardez par vous-mêmes : Bug IE

Ce même lien fonctionne pourtant bien sur Firefox et Safari 3... Smiley eek

J'ai cherché mais je n'ai toujours pas trouvé de solutions :S

C'est donc le dernier petit coup de main que je vous demande en espérant qu'il soit corrigible Smiley smile

Modifié par Scriptiz (27 Nov 2007 - 12:16)

fvsch

27 Nov 2007 à 12:28

Déjà, pense à ces deux points:
- supprimer le height: 100% de div#main;
- optimiser les images PNG (je ne sais pas quel éditeur produit du PNG obèse comme ça, mais c'est assez exceptionnel).

Pour le problème dans IE, il vient en partie d'un problème de structure: div#menu devrait être le premier enfant de div#main, et non pas le précéder!
Par ailleurs, il serait bien de supprimer le height utilisé pour div#menu (si besoin d'une compatibilité IE 6, faire une feuille de correctifs CSS appelée via un commentaire conditionnel qui va bien).

Ici le problème vient à priori du fait que div#main a le layout dans IE Windows (voir la FAQ pour le concept de HasLayout), ce qui fait qu'il ne peut pas être survolé par un flottant, et donc se retrouve rejeté en bas un peu comme si on avait mis un clear: both sur div#main...

Je n'ai pas testé de version corrigée, mais ça devrait améliorer les choses.

Scriptiz

27 Nov 2007 à 18:36

Tout fonctionne, encore merci pour votre aide !

Au fait, l'optimisation des png avec The Gimp c'est merveilleux ils sont tellement plus légers Smiley ravi

Merci

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Div avec position à centrer