18041 sujets

Questions générales et questions de débutants

Conversion pixel en pourcentage probleme

bonjour j'aissé de convertir un fichier css dons les valeur son en pixel pour la mise en page et je voudré les passé en pourcent tout va bien sauf pour le header qui est une image jpg
pour le width: tout va bien je le convertie en pourcentage mes lorsque je convertie le height: l'image du header disparé

j'ai retourné tout le net a la recherche d'info impossible

voici le code complet du css

/* Mise en forme du body */

body { background-color:#323232; background-image:url('../images/bg.gif'); background-repeat: repeat-x; margin: 0px;; background-position-y:50%}



/* ID(#) - Mise en forme de la page en DIV -  */

#header { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; [#red]height: 170px; [#darkblue]width: 84.85%;[#black] background-image:url('../images/header.jpg'); padding: 0px; margin-top: 22px}

#menu { margin:0 auto; height: 5.03%; width: 63.19%; background-image:url('../images/bgMenuH.jpg'); padding-left: 107px; padding-right: 108px}

#sheader { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height: 27px; width: 84.97%; background-image:url('../images/sheader.gif'); padding: 0px;}

#contenuBg {margin:0 auto; height:auto; width: 84.97%; background-image:url('../images/contenuBg.gif'); background-repeat: repeat-y; padding: 0px;}

#boiteMenuG{float: left; width: 159x; height: auto; margin-top: 0px 0px 0px 0px; padding-left: 25px;}
#boiteMenuG a:link {color: #ffffff; text-decoration: none;}
#boiteMenuG a:visited {color: #ffffff; text-decoration: none;}
#boiteMenuG a:hover {color: #ffffff; text-decoration: underline;}

#boiteTexte{float: left; width: 41.75%; height: auto; padding: 0px 0px 0px 0px; margin-left: 27px;  margin-right: 35px;}

#boiteMenuD{float: left; width: 15.99%; height: auto; margin: 0px 0px 0px 0px; padding-right: 25px;}
#boiteMenuD a:link {color: #ffffff; text-decoration: none;}
#boiteMenuD a:visited {color: #ffffff; text-decoration: none;}
#boiteMenuD a:hover {color: #ffffff; text-decoration: underline;}

#footer {margin:0 auto; height: 5.53%; width: 84.97%; background-image:url('../images/footer.jpg'); background-repeat: no-repeat; text-align:center; background-color: #fff}

.spacer {
  clear: both;
}

/* CLASS - Mise en forme des textes */

p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #556074;}

ul { padding:0; margin:auto; margin: 0px 0px 0px 0px;}
ul li { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; display:inline; list-style-type: none; }

/* Titre */

.titre {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #2e82e0; font-weight: bold;}
.titreMenu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold;}

/* Autre textes */

.texte {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #556074;}
.textePetit {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #6f6f6f;}
.bouton {background-image:url('../images/bouton.gif'); background-repeat:no-repeat; height:19px; width: 129px; color: #fff; font-size: 10px; padding-left: 30px; padding-top: 5px; font-weight: bold; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:10px}
.elementMenu {background-color: #000; background: url('../images/bgMenuG.gif') no-repeat; height: 20px; width: 129px; margin: 0px; padding-top:4px; padding-left: 30px; padding-bottom: 0px}

/* Liens par défault */

a:link {color: #2e82e0; text-decoration: underline;}
a:visited {color: #2e82e0; text-decoration: underline;}
a:hover {color: #2e82e0; text-decoration: none;}

/* Liens pour MENU DES ONGLETS - Doir être appliqué sur la cellule <td> ou tableau est non sur le texte*/

.menu a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #fff; text-decoration: none;}
.menu a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #fff; text-decoration: none;}
.menu a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #76c3ff; text-decoration: none;}
.menu{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #76c3ff; text-decoration: none; text-align:center;}

.menuPadding {padding-top: 15px; margin: 0px 0px 0px 0px; vertical-align:top;}
.menuSeparateur {padding: 0px; margin: 0px; background: url('../images/separateurH.gif') no-repeat; width: 2px}

/* Liens pour le menu vertical RUBRIQUE - Doir être appliqué sur la cellule <td> ou tableau ou DIV est non sur le texte*/

.rubriqueD a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #5e7a1c; text-decoration: none; font-weight: bold;}
.rubriqueD a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #5e7a1c; text-decoration: none; font-weight: bold;}
.rubriqueD a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #383c47; text-decoration: none; font-weight: bold;}
.rubriqueD{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #383c47; text-decoration: none; text-align:left; font-weight: bold;}


/* A appliquer a form */

.formulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #4e4e4e; border: 0px; background-color: #fff; margin: 0px 0px 0px 0px; padding-top: 15px; padding-left:17px;}
.boiteFormulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #dddddd; border: 1px solid #929292; background-color: #474747; padding-top:1px; padding-bottom:1px; padding-left: 5px; font-weight:normal;}
.formMenu {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#dddddd; font-weight:normal; margin: 0px 0px 0px 0px}
/



mille merci pour l'aide que vous pouvez m'apporté
Modifié par krank (02 Jul 2007 - 17:39)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
bonjour

désolé j'avais pas vue cette fonction

voila qui est corigé
et je vien de lire "Voici votre case départ pour bien débuter."

merci de ne pas avoir suprimé mon post Smiley cligne
krank
Modifié par krank (02 Jul 2007 - 17:44)
Bonsoir krank,

Attention, quand on parle de site fluide, on parle de largeurs en pourcentages, mais pas forcément de hauteur.

Pour la hauteur, on utilisera le plus souvent :
- pas de hauteur du tout, pour que le bloc reste extensible en hauteur (important si on a un contenu textuel dans le bloc !) ;
- ou bien une hauteur en pixels ;
- ou bien, à la rigueur, une hauteur en EM.

Pour le reste... j'ai du mal à lire ton code CSS, et je ne sais pas à quel code HTML il correspond. L'idéal serait d'avoir un lien vers la page en ligne (ou une page de test reproduisant le problème).
bonsoir

sa ne pose pas de probleme que les hauteur reste en pixel si ses le qu'a sa me convien
640 x 480 pixels
800 x 600 pixels
1024 x 768 pixels
1280 x 1024 pixels
1600 x 1200 pixels et plus
si sa met pas le site dans tout les sens ses parfait

il me plait bien ce forum

krank
Krank, pourrais tu essayer de tenir compte de cette règle s'il te plaît:
a écrit :
11- Conventions d'écriture
...
Le forum n'étant pas équipé d'un vérificateur d'orthographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux.
Il est rappelé également que ce forum est... un forum, et non un tchat ou un support SMS. Vous êtes donc priés de respecter un minimum ce langage qu'est le français.
Sujet clos
Aller à