Optimisation code page web !!!

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
dans ta CSS :

-evite les % (mets des px)
-vire tous les trucs dont les valeurs sont en auto (par defaut ça devrait se placer en auto si pas de precisions.)

fais un essai et dis nous ce que ça donne.
:zen:
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Merci pour les conseils ;)

J'ai viré les auto qui ne servent a rien et suprimé seulement un width : 25%; dans le menu qui en faite sert a rien !

voila ce que ca donne au niveau du code :

#banniere
{
background-image: url("http://sadhanaforum.free.fr/img/baniereSiteOptiTxt.jpg");
background-repeat: no-repeat;
width: 612px;
height: 102px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

.cadreleft
{
float: left;
width: 35%;
height: 866px;
text-align: left;
margin-left: 20px;
}

.menu
{
margin-left: auto;
margin-right: auto;
height: 0px;
text-align: center;
margin-top: 80px;
}

.cadreright
{
float: right;
width: 35%;
height: 866px;
text-align: left;
margin-right: 20px;
}
Par contre au niveau de l'affichage ca na pas bougé sous IE ( et sous FireFox non plus d'ailleur ! )

EDIT :tout les:
margin-left: auto;
margin-right: auto;
Je ne peux pas les suprimer puisque ils me permettent de centrer mes elements au milieu de ma page.
Les deux width: 35%; ne peuvent pas non plus etre remplacés par une valeur fixe en px car mon site perdrai son extensibilité.
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
remplace toutes tes valeurs en pourcentage par leur valeur en pixel (IE a du mal avec les pourcentages ).
et vire tous les =auto (margin-left: auto; margin-right: auto; etc.)
 

Niconemo

Modo (toujours vivant !)
Modérateur
Club MacG
26 Juin 2001
6 447
455
Rhône-Alpes
Oui, enfin si on enlève tous les % et tous les "auto" il ne reste qu'un site fixe aussi ;) ... ces attributs fonctionnent très bien avec tous les navigateurs, il suffit de les utiliser à bon escient
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
non, l'idée est de n'avoir que des % ou que des px (voire des em), cela simplifie beaucoup la vie d'IE 5.5 PC :)mad:).
quant aux auto, ils n'ont aucune utilité, vu que c'est la valeur par defaut, et complique la tache de ce pauvre brouteur microsoft pourri.


Edith : c'est qu'une piste hein. ;)
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Si je supr tout les margin-left: auto; ca signifie soit :
_ que je trouve une facon pour centrer les div de mon site
_ soit que je change la structure de mon site.

Changé la structure ca me fait un peu **** parce que justement je trouve ca assé original d'avoir le menu au centre. ( meme si cette croix rose est hideuse et qu'il faut absolument que je trouve autre chose ! )
Alors si tu connais une autre facon de centrer des div je suis preneur !

Quand au width: 35%; si je l'ai vire comme le dis Niconemo mon site deviens fixe et c'est un peu génant.
Quoi qu'a la limitte ca peu se faire meme si c'est mieux d'avoir un site extensible. En tout cas si ca suprime le prob d'affichage sous IE pourquoi pas.
J'eserai ca demain, la j'ai plus accé au PC !

EDIT : les <br /> c'est du code XHTML 1.0 strict
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
ok, dejà je vois un prob dans ton code html :

ton :
<div class="menu">...</div>
se trouve dans ton <div class="cadreright">
il faudrait qu'il soit juste dans "corp", celà permettrait à ton menu d'etre centré sous explorer.


(edit : sans doute te faut-il une div de plus pour "Est libre penseur quiconque -que..." de façons à ce que ton menu ne soit pas imbriqué dans cadre right ou cadreleft)


edith : ok pour les <br/>, merci.
(je n'utilise pas xhtml 1.0 strict ;)
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Je crois pas que mon <div class="menu">...</div> soit dans mon <div class="cadreright">...</div>
Ou peut etre que je comprend pas bien !

J'ai viré tout le blabla qu'il y a des les div pour y voir plus clair. Voici la structure de <div class="corps"> :

corps a dit:
<div id="corps">
<div class="cadreleft">
</div>

<div class="menu">
</div>

<div class="cadreright">r/>
</div>
</div>
Je me trompe ??

EDIT :
Grug a dit:
(edit : sans doute te faut-il une div de plus pour "Est libre penseur quiconque -que..." de façons à ce que ton menu ne soit pas imbriqué dans cadre right ou cadreleft)
DSL mais je ne comprend pas ou il faudrai que je rajoute un div puisque cette sitation est déja dans une div et que juste apres il y a un div qui contient la banniére.
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
oui, mais en faisant comme ça :
Posté par corps
<div id="corps">
<div class="menu">
</div>
<div class="cadreleft">
</div>
<div class="cadreright">r/>
</div>
</div>

ton menu est centré sous IE mac.
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
EDIT :

DSL mais je ne comprend pas ou il faudrai que je rajoute un div puisque cette sitation est déja dans une div et que juste apres il y a un div qui contient la banniére.

au temps pour moi, j'ai essayé avec les elements de la feuille de style qui etaient publiés sur ce fil, et du coup n'avais pas de class pou cette div ;)
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Merci breaucoup Grug de ton aide.
C'est déja enorme que sous IE mac le menu soit centré !

Je regarde ce que ca donne demain sous IE PC. Je vous tiens au courant.
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
mageli a dit:
Merci breaucoup Grug de ton aide.
C'est déja enorme que sous IE mac le menu soit centré !

Je regarde ce que ca donne demain sous IE PC. Je vous tiens au courant.
ok, avec ça dans la feuille de style ça marche sous IE mac (enfin je crois que c'est ce que ça doit donner ;)
(sinon ton menu decalait le reste vers le bas )



.menu {
margin-left: auto;
margin-right: auto;
width: 30%;
text-align: center;
margin-top: 80px;
position: absolute;
right: 35%;
left: 35%;

}
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Arf ca marche pas !
J'ai esseyé pas mal de chose mais rien ne marche ! En faite si, le menu est centré mais le prob c'est que les deux blocs texte qui sont a droite et a gauche du menu sont alligné sous le forum au lieu d'etre au meme niveau.

Mon code actuel pour le CSS est le meme que celui que je site dans l'un des message précédent. Ce qui fait que mon menu est centré c'est simplement de changer dans ma page XHTML l'ordre des div. ( comme l'indique Grug. )margin-right: auto;

J'ai testé :
_ .menu {
margin-left: auto;
margin-right: auto;
width: 30%;
text-align: center;
margin-top: 80px;
position: absolute;
right: 35%;
left: 35%;
}
Et d'autre varriante...
Mais les deux blocs textes sont la aussi allignés sous le menu.

_ J'ai testé de mettre une
position: absolute;
top: 10px puis j'ai testé -50%; ( je sais pas si ca existe mais bon pourquoi pas ! )
dans les deux cadreright et cadreleft.
Toujours le meme prob.

_ J'ai testé de mettre dans la page XHTML la div du menu apres les deux div du cadreright et cadreleft.
Meme prob...

_ etc...

Bref de mettre dans la page XHTML la div du menu devant les deux div cadreright et cadreleft permet de centrer le menu mais décalle les deux div cadreright et cadreleft sous le menu.
Ca remplace un prob par un autre !

Une idée ? Je ne vois vraiment pas comment faire pour indiquer a cadreright et cadreleft de s'alligner au meme niveau que le menu.
Je me demande meme si ca serai pas plus simple de replacer la div menu entre les deux div cadreleft et cadreright parce qu'en plus de ne pas etre alligné au meme niveau que le menu, les deux div cadreright et cardreleft "s'aute" quand on survolle les liens du menu.

Pour voir le prob !
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Oui mais sur une version mac de IE ou sur une version Pc ?

il y a de grosse dif entre les deux je crois parce que sous mac on est a la bourre ! ( normal et tens mieux ! )
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
effectivement :zen:

chez moi j'ai juste testé sur IE mac.

Même si le tout CSS est une solution elegante qui me plait beaucoup, quand je fais des trucs un poil complexe, je suis l'avis de mes développeurs (qui sont surPC), je fais la mise en place globale à coup de tables :(

desolé, pas de IE PC sous la main pour te filer un coup de main ce soir. :(
à+ ;)
 

Mage-Li

Membre confirmé
29 Mai 2004
399
14
37
www.ouf-web.com
Je viens d'avoir une idée !
Es que je ne pourai pas créer un grand tableau avec trois colonne qui aurait les bordure non visible ?

Pour que les bordures ne soit pas visible il sufirai quelle soit toutes blanche ( sans reflet ) ou une autre astuce.

Je ne me suis jamais servie des tableaux, es que tu pense que ca peut le faire ?
 

Grug

poisson rouge
Modérateur
Club MacG
18 Octobre 2002
10 323
2 700
48
Lyon
grug.be
oui, ça doit le faire ;)

le truc pour ne pas avoir de bordure c'est <table border="0" cellspacing="0" cellpadding="0">

si tu n'as jamais utilisé les tables sache qu'il est plus sur d'avoir des tables dans des tables (jusqu'à 7 max) plutot que de reunir des cellules.

mais bon, pour ton site c'est plutot simple. ;)

bonne soirée. :)
 

molgow

Vétéran
Club MacG
4 Janvier 2002
5 493
612
36
Suisse
www.monts-chevreuils.ch
Hello,

Je n'ai pas le temps de regarder précisément ton problème, je ne suis d'ailleurs pas sûr d'avoir compris le problème que tu as ? Tu veux 3 colonnes, avec celle du milieu qui est à largeur fixe, c'est ça ?
Si oui, je pense que tu devrais regarder cet exemple et t'en inspirer pour faire ce que tu souhaites. (je pense qu'il suffit simplement de mettre la largeur des boites gauche et droite à auto plutôt qu'à une largeur fixe, et modifier aussi les margin de la boite du milieu)