HTML :Comment centré une image dans un cadre?

Utilisateur anonyme -  
kadeh Messages postés 341 Statut Membre -
Bonjour,

J'ai un problème en HTML

J'aimerai connaître le code pour centré une image dans un cadre d'une table sans quel soit étiré ou modifier, juste pour que les excédent de l'image soit caché.

Voila mon code :

<td rowspan="5" valign="top" width="379" height="265" background="0007.jpg"></td>

Mon image fait 379 de largeur x 284 de hauteur

Donc je veux que 19 pixel soit enlever en hauteur (haut et bas en proportion).

Merci

A voir également:

7 réponses

Réponse 1 / 7
kadeh Messages postés 341 Statut Membre 92
 
Bonjour, 
<td style="background:url(0007.jpg) no-repeat center"></td>

@+
Bonnes fêtes et bonne année à tout le monde.
0
Réponse 2 / 7
Utilisateur anonyme
 
Merci ça fonctionne à merveille! :)

J'ai une autre question, je ne sait pas si je suis mieux de commencer un autres sujet..

Quand je suis sur internet explorer et je vais de page en page de mon site web tout est stable et bien fait mais quand je vais sur firefox, et bien dans mes page web il y a un bug : dès que ma page web fait apparaitre la flèche de défilement a droite quand il y a plus de contenu, et bien ma page web (la table principale et tout le contenu qui s'y attache, et non mon arrière plan qui lui reste stable) se déplace un petit peu vers la gauche. c'est pas trop gênant mais ça fait un peu bizarre.

Comment faire pour que tout reste stable comme dans internet explorer?

Merci
0
JooS Messages postés 2705 Statut Membre 228
 
Salut, surement un problème des standards...comme d'habitude...
Sinon, peut être que ton code source n'est pas assez juste pour être interprété de la même façon par tout les navigateurs...
0
kadeh Messages postés 341 Statut Membre 92
 
Bonjour,
effectivement, Firefox et les anciennes versions d'ie n'interprètent pas les choses de la même façons. normalement l'inverse: l'affichage sera correct sur Firefox.
il faut voir le code source.
@
0
Réponse 3 / 7
Utilisateur anonyme
 
Merci pour les réponse.

Mon code source est très pauvre. Il a le head le body et mes table. Il y a vraiment rien de spécial que j'ai ajouter à part un css dans le head :

<link rel="stylesheet" type="text/css" href="exemple.css">)

Sinon c'est uniquement des table avec des cellule, aucun script.
0
kadeh Messages postés 341 Statut Membre 92
 
pas question de pauvre ou riche, il ya des Standards à respecter pour avoir un affichage correct sur les différents navigateurs,
si vous pouvez poster le code source de ta page et le code css, on peut vous aider, sinon on ne pourra rien faire pour vous.
@+
0
Réponse 4 / 7
Utilisateur anonyme
 
Voici le code de ma page HTML :

<html>

<head>
<link rel="stylesheet" type="text/css" href="mapageweb.css">
<title>mapageweb</title>
</head>

<body topmargin="0" leftmargin="0" bgcolor="#7F7F7F" background="background.jpg">
<div align="center"><center>

<table border="0" cellspacing="0" cellpadding="0" width="746" height="100%"
bgcolor="#FFFFFF">
<tr>
<td width="1" bgcolor="#585858" rowspan="10"></td>
<td width="744" height="101" colspan="3"><img src="2_haut1.jpg" width="744" height="101"></td>
<td width="1" bgcolor="#585858" rowspan="10"></td>
</tr>
<tr>
<td width="744" height="20" colspan="3"><table border="0" width="100%" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%"><a href="1.htm"><img src="menu1x1off.jpg" width="61" height="48" border
"0"></a><a href="2.htm"><img src="menu1x2.jpg" width="125" height="48" border "0"></a><a
href="3.htm"><img src="menu1x3.jpg" width="85" height="48" border "0"></a><img
src="menu1x4off.jpg" width="114" height="48"><a href="4.htm"><img src="menu1x5.jpg"
width="112" height="48" border "0"></a><a href="5.htm"><img src="menu1x6.jpg" width="113"
height="48" border "0"></a><img src="menu1x7.jpg" width="134" height="48"></td>
</tr>
<tr>
<td width="100%"><a href="1.htm"><img src="menu2x1.jpg" width="61" height="24" border "0"></a><a
href="6.htm"><img src="menu2x2.jpg" width="125" height="24" border "0"></a><img
src="menu2x3.jpg" width="424" height="24"><img src="menu2x4.jpg" width="134" height="24"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="8" height="39" background="barre2.jpg"></td>
<td width="627" height="39" valign="middle" background="barre2.jpg"><small><font
face="Calibri">test</font></small></td>
<td width="109" height="39" background="barre2.jpg"></td>
</tr>
<tr>
<td width="8"></td>
<td width="627" height="20" colspan="2" valign="top"></td>
</tr>
<tr>
<td width="8" height="95%" rowspan="2"></td>
<td width="627" colspan="2" valign="top"><table border="0" width="734" cellspacing="0"
cellpadding="0" height="100%">
<tr>
<td width="396" rowspan="4" valign="top"><font face="Calibri">test</font></td>
<td width="20" rowspan="4"></td>
<td width="296" valign="top" height="150">photo</td>
<td width="8" rowspan="4"></td>
</tr>
<tr>
<td width="296" valign="top" height="30"></td>
</tr>
<tr>
<td width="296" valign="top" height="150">photo</td>
</tr>
<tr>
<td width="296" valign="top" height="100%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="627" height="100%" colspan="2" valign="top"></td>
</tr>
<tr>
<td width="8" height="39" background="barre.jpg"></td>
<td width="627" height="39" colspan="2" valign="top" background="barre.jpg"></td>
</tr>
<tr>
<td width="8" height="1" bgcolor="#000000"></td>
<td width="627" height="1" colspan="2" valign="top" bgcolor="#000000"></td>
</tr>
<tr>
<td width="8" height="15" bgcolor="#F9F0C1"></td>
<td width="627" height="15" colspan="2" valign="top" bgcolor="#F9F0C1"></td>
</tr>
<tr>
<td width="744" height="1" bgcolor="#585858" colspan="3"></td>
</tr>
</table>
</center></div>
</body>
</html>


Et voici mon code du fichier mapageweb.css :

body{
cursor: default;
}
a:link{
cursor: pointer;
}
MARGIN-TOP: 0px;
FONT-SIZE: 12pt;
MARGIN-BOTTOM: 0px;
COLOR: black;
FONT-FAMILY: Arial, Verdana;
BACKGROUND-COLOR: white
}
INPUT
{
FONT-SIZE: 12pt;
COLOR: navy
}
A.BlueUnder:link
{
COLOR: blue;
TEXT-DECORATION: none
}
A.BlueUnder:visited
{
COLOR: blue;
TEXT-DECORATION: none
}
A.BlueUnder:active
{
COLOR: navy;
TEXT-DECORATION: none
}
A.BlueUnder:hover
{
COLOR: blue;
TEXT-DECORATION: underline
}
A:link
{
FONT-SIZE: 12pt;
COLOR: #000000;
TEXT-DECORATION: none
}
A:visited
{
COLOR: #000000;
TEXT-DECORATION: none
}
A:active
{
COLOR: navy;
TEXT-DECORATION: none
}
A:hover
{
COLOR: black;
TEXT-DECORATION: underline
}
A.LeftNav:active
{
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
COLOR: black;
TEXT-DECORATION: none
}
0
JooS Messages postés 2705 Statut Membre 228
 
Salut, ton code est vraiment....comment dire!!!, pas BEAU a voir...tros encombré...
Et ça sera pire avec le nombre d'image que tu compte insérer...

Conseil : Mieux vaut que t'apprenne a maîtriser le css, c'est plus pratique pour la mise en forme de tes pages, mieux que d'utiliser des tableaux encombrés les uns dans les autres...
a bientôt...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Utilisateur anonyme
 
up
0
Réponse 6 / 7
Utilisateur anonyme
 
UP
0
Réponse 7 / 7
kadeh Messages postés 341 Statut Membre 92
 
Bonjour,

J'ai quelques remarques qui peuvent vous aider:
- Utiliser la balise code "<>" pour poster le code source sur CCM.
- Bien renseigner le "DOCTYPE" de vos pages.
- Utiliser les div pour la mise en page, les tableaux HTML sont faits pour des données tabulaires.
- Séparer le contenu de la présentation, vous avez une feuille de style css externe (mapageweb.css), pourquoi vous utilisez le HTML.
- L'indentation rend le code source plus clair et plus lisible. avec un code de quelques lignes ça passe, mais pour un code un peu long, c'est la galère!
un exemple d'erreur dans votre code css:
a:link{ 
cursor: pointer; 
} 
MARGIN-TOP: 0px; 
FONT-SIZE: 12pt; 
MARGIN-BOTTOM: 0px; 
COLOR: black; 
FONT-FAMILY: Arial, Verdana; 
BACKGROUND-COLOR: white 
}
avec un code indenté vous pouvez facilement remarquer que vous avez oublier le nom de la classe et le crochet d'ouverture(avant MARGIN-TOP):
a:link{ 
   cursor: pointer; 
} 

   MARGIN-TOP: 0px; 
   FONT-SIZE: 12pt; 
   MARGIN-BOTTOM: 0px; 
   COLOR: black; 
   FONT-FAMILY: Arial, Verdana; 
   BACKGROUND-COLOR: white 
}

- en réponse à votre question, ie affiche toujours la barre de défilement alors que Firefox ne l'affiche qu'en cas de besoin.
pour avoir le même comportement sur firefox mettez dans votre feuille de style css:
html { 
 overflow-y: scroll; 
}

Quelques articles à consulter:
Apprenez à créer votre site web !
Sur CCM: Fiches pratiques > Webmestre
Les problèmes de la mise en page par tableaux
Construire un site sans tableaux

Bonne chance.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse