28172 sujets

CSS et mise en forme, CSS3

bonjour

J'ai retouché le fichier global.css afin de placer les éléments "votre compte" et "panier" avec des icones personnalisés.

sur firefox l'affichage est impeccable mais sur safari et chrome c'est décalé. Je n'ai pas essayé sur internet explorer

j'ai utilisé firebug afin de bien les placer sur firefox

Avez vous une solution pour avoir une compatibilité ?

merci d'avance

#header_right #header_user {
float:right;
font-size:14px;
margin-right:2px;
text-align:right;
width:535px;


[code]#header_user #your_account a {
background-image:url("../img/user.png");
}
global.css (ligne 831)
#header_user #shopping_cart a, #header_user #your_account a {
background-position:left top;
background-repeat:no-repeat;
height:20px;
padding-bottom:30px;
padding-left:60px;
padding-right:0;
padding-top:30px;
text-decoration:none;

upload/17044-1.png

upload/17044-2.png
Modifié par phil3001 (17 Oct 2010 - 08:31)
Salutation phil3001

As-tu un reset sur body ? du genre

body { margin:0; padding:0; . . . autres instructions . . . }

Les enfants de body en hériterons et tu pourras t'ajuster par la suite dépendamment des balises HTML utilisées.

Aussi je vois que tu nous présente global.css à la ligne 831.
Tu peut écrire ainsi sur une seule ligne

 /* top - right - bottom - left | Dans le sens des aiguilles d'une montre */
 #tonID { padding:30px 0 30px 60px; . . . autres instructions . . . }

Comme ça c'est 22 caractères : à ta façon c'est 69 caractères une différence de 47 pour une seule propriété.
C'est pour ton bien personnel, ce n'est qu'une suggestion qui porte à la réflexion.

Ce qui devrais te permettre d'optimisé ton code mais aussi la tâche de développement.
Plusieurs propriétés pourront profité de ce genre d'écriture comme border ou margin par exemple.

  div#2342 { border:1px solid #333; . . . autres instructions . . . }
  div#globale { margin:0 auto; . . . autres instructions . . . }


++
Modifié par zardoz (17 Oct 2010 - 20:36)