Re-bonjour tout le monde,
Je suis toujours entrain de trifouiller et de farfouiller pour avoir un site à ma convenance, et là le truc du jour c'est que j'ai installé un blog dotclear.
Alors pour centrer mon menu ça a été, mais depuis ce matin je bloque sur un truc :
Voilà l'adresse provisoire : http://lejoyeuxbordel.free.fr/dotclear/
Quand je réduis la fenêtre sous IE, l'image de fond du body est centrée par rapport à la largeur "réelle" de la page, même si on ne voit pas toute la largeur. Voir photo ci dessous pour comprendre :
Par contre, quand je réduis la fenêtre sous Mozilla Firefox, l'image de fond du body est centrée par rapport à la largeur visible de la page réduite, et du coup mon design tombe à plat. Voir photo ci dessous pour comprendre :
Qui a raison ? Qui a tort ? Est-ce que si ça marche bien sous IE c'est parce que IE déconne mais pour une fois ça m'arrange, ou est-ce que j'ai oublié un truc dans la css pour que Firefox fasse pareil que IE ?
Je vous montre ci dessous le css que j'ai modifié :
Modifié par Louna Lou (03 Nov 2008 - 13:27)
Je suis toujours entrain de trifouiller et de farfouiller pour avoir un site à ma convenance, et là le truc du jour c'est que j'ai installé un blog dotclear.
Alors pour centrer mon menu ça a été, mais depuis ce matin je bloque sur un truc :
Voilà l'adresse provisoire : http://lejoyeuxbordel.free.fr/dotclear/
Quand je réduis la fenêtre sous IE, l'image de fond du body est centrée par rapport à la largeur "réelle" de la page, même si on ne voit pas toute la largeur. Voir photo ci dessous pour comprendre :
Par contre, quand je réduis la fenêtre sous Mozilla Firefox, l'image de fond du body est centrée par rapport à la largeur visible de la page réduite, et du coup mon design tombe à plat. Voir photo ci dessous pour comprendre :
Qui a raison ? Qui a tort ? Est-ce que si ça marche bien sous IE c'est parce que IE déconne mais pour une fois ça m'arrange, ou est-ce que j'ai oublié un truc dans la css pour que Firefox fasse pareil que IE ?
Je vous montre ci dessous le css que j'ai modifié :
/* ***** BEGIN LICENSE BLOCK *****
#
# This is part of Aorakits, a set of themes for DotClear.
# Copyright (c) 2006 Kozlika and contributors. All rights
# reserved.
#
* ***** END LICENSE BLOCK *****
STRUCTURE POUR TROIS COLONNES, BLOGNAV ET BLOGEXTRA À DROITE, LARGEUR FIXE
--------------------------------------------------------------
AVANT TOUTE CHOSE
remise a zero de toutes les marges des grands blocs pour que
tous les navigateurs calculent depuis le meme point de depart
--------------------------------------------------------------- */
html, body, #page, #top, #prelude, #wrapper, #footer,
#main, #content, #sidebar, #blognav, #blogextra {
margin : 0;
padding : 0;
}
/* --------------------------------------------------------------
CENTRAGE DE LA PAGE DANS LA FENETRE DU NAVIGATEUR.
(supprimer ces lignes si on ne veut pas centrer)
Note : on peut remplacer la valeur (ici 0) des marges au-dessus
et en dessous de la page par la valeur de son choix (px ou em).
--------------------------------------------------------------- */
body {
width : 100%;
/*margin: 0 auto;je teste*/
/*text-align : center;ça change rien que je le garde ou pas*/
/*background : #ffffff;*/
font-size : 76%; /*je veux voir ce que ça change avec 100%, je l'ai fait, ça change juste la grosseur des écritures : rien ne depasse de
la croix mais elles sont plus grosses à 100%*/
font-family : "lucida grande", "gill sans", arial, sans-serif;
background-image:url('http://lejoyeuxbordel.free.fr/fond-croix-nounours.PNG'); /* J'indique l'adresse de mon image de fond. Sa dimension est de 1280X1024 pixels */
background-position: center top; /*je demande à ce que mon image de fond soit centrée tout en restant collée au plafond*/
background-attachment:scroll; /* mon fond bouge avec le texte */
background-repeat:no-repeat; /* si un écran est plus grand que mon image de fond, aucun souci esthétique, l'image ne se répètera pas, restera centrée, y'aura juste du blanc autour */
text-align:center; /*j'indique que le corps du site (body) est sauf exception centré */
}
#page {
margin : 0 auto; /*je pense que c'est ICI qu'il faut que je cherche, pour que ma page soit centrée sous firefox meme si je la réduit.
la valeur 0 ne change rien que je la supprime ou non.*/
text-align : justify;/*si je met center ça centre les écritures mais ça ne change rien à l'image de fond*/
}
/* -------------------------------------------------------------
STRUCTURE FIXE - 3 COLONNES - BLOGNAV ET BLOGEXTRA A DROITE
Vous pouvez modifier 940px par la valeur de votre choix. (j'ai modifie par 1280)
Vous pouvez modifier 320px par la valeur de votre choix (j'ai modifié par 151) mais
attention aux repercussions sur les autres valeurs des boites
incluses dans le sidebar !
--------------------------------------------------------------- */
#page {
width : 1300px;/*1280px parce que c'est la largeur de mon fond + 10 de marge de chaque coté*/
}
#top {
height : 151px; /* a modifier par la valeur de votre choix - j'ai pris 151 pour que "aller au contenu, au menu et à la recherche" se
retrouvent sur la ligne horizontale de ma croix. Et puis j'ai squizzé ces 3 fonctions donc finalement... Le chiffre
permet de faire monter ou descendre le commencement du blog (les écrits + les menus). */
text-align : center;/*je met le titre du blog au centre et je le squizze dans le fichier top.html au profit de mon bouton*/
margin-top : 15px; /*je le rajoute parce que sinon mon bouton il reste collé tout en haut sous ie*/
}
#top h1 {
margin : 0;
padding : 0;
height : 151px; /* idem que pour #top */
}
#wrapper {
margin : 0 10px;/* le 10px indique la marge à respecter à droite et à gauche du cadre principal, celui qui contient les textes à gauche et
la menu à droite.*/
}
#main {
width : 1280px; /*100%; la valeur qu'il y avait ct 100%*/
margin : 0 -740px 0 0; /*la deuxième valeur, c'est combien j'enlève de la largeur de la page (qui est de 1280) pour obtenir ce qu'il me faut
pour le coté ecriture. Le main, c'est le bloc du texte. La valeur, c'est la valeur additionnée des deux colonnes
du menu de droite. Si je veux que la première colonne sur la droite soit une colonne centrale, avec comme valeur
la largeur de mon nounours (soit 200px), alors 1280-200=1080. Et 1080/2= 540px+200px=740px. (je veux 540 à
gauche puis 200 au milieu puis 540 à droite, ce qui fait bien 1280). */
float : left;
}
#content {
margin : 0 740px 0 0;/*c'est la valeur des deux menus de droite. On peut rajouter 10 pour une marge, mais je ne le fais pas, vu que mes
boutons du centre sont déjà moins large.*/
margin-top : 40px; /*c'est la marge en hauteur de la partie écritures*/
padding : 0px; /*c'est la marge en haut, en bas, à droite et à gauche */
}
#footer {
clear : both;
text-align:right;
height : 30px;
}
#sidebar {
width : 740px;/*je redonne la valeur que j'ai enlevée tantot, soit la valeur du menu central (200) + la valeur du menu totalement à droite
(540) soi un total de 740px.*/
float : right;
}
/* Attention au calcul si vous modifiez ces valeurs.
Le total doit être inférieur à la largeur du sidebar.
Ici, 6 + 146 + 6 + 6 + 146 + 6 = 316 < 320 */
#blognav {
width : 120px;/*alors ça c'est mon bloc central*/
float : left;/*je dois le laisser comme ça, si je met center ça bouge le blogextra (le bloc totalement à droite)*/
margin-top : 107px; /*la marge par rapport au haut pour le menu central*/
padding : 0 40px; /*je met 40px pour centrer mes boutons */
/*overflow:hidden;*/
}
#blogextra {
width : 200px;/*c'est mon bloc totalement à droite*/
margin-top : 77px;/*la marge par rapport au haut pour le menu totalement à droite*/
padding : 0 170px; /*ça devrait centrer mon menu totalement à droite*/
float : right;
/*overflow:hidden;*/
}
Modifié par Louna Lou (03 Nov 2008 - 13:27)
(Ne te méprend pas, je touche les codes en général une fois par an, et j'oublie le reste de l'année, donc parfois je me dis que je me prend bien la tête pour pas grand chose, juste un caprice de vouloir un menu central...)