Probleme dimension image sous ie
Résolu
ced3c
Messages postés
237
Date d'inscription
Statut
Membre
Dernière intervention
-
ced3c Messages postés 237 Date d'inscription Statut Membre Dernière intervention -
ced3c Messages postés 237 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'essaie de faire un site qui prends en compte la résolution de l'utilisateur. Je l'ai conçu sous
forme de tableau.
Le problème viens de l'affichage des liens-images du menu
sous firefox aucun souci mais sous ie les images gardent leurs dimensions d'origine à la place
de se limiter à celle de la cellule ou elles sont
http://www.vtt-pyrenees.fr/vtt-pyrenees.fr3/index.html
J'ai essayer de jouer sur le width mais je n'y arrive pas.
Quelqu'un pourrait-il m'aider svp ?
j'essaie de faire un site qui prends en compte la résolution de l'utilisateur. Je l'ai conçu sous
forme de tableau.
Le problème viens de l'affichage des liens-images du menu
sous firefox aucun souci mais sous ie les images gardent leurs dimensions d'origine à la place
de se limiter à celle de la cellule ou elles sont
http://www.vtt-pyrenees.fr/vtt-pyrenees.fr3/index.html
J'ai essayer de jouer sur le width mais je n'y arrive pas.
Quelqu'un pourrait-il m'aider svp ?
A voir également:
- Probleme dimension image sous ie
- Image iso - Guide
- Dimension a5 - Guide
- Réduire dimension image - Guide
- Dimension bbox must - Accueil - Guide box et connexion Internet
- Acronis true image - Télécharger - Sauvegarde
11 réponses
Bonsoir Ced3c,
Réalise ton site avec feuilles de style (CSS). Tu donnes une dimension à une div ("container" hight et width, plus une valeur margin "auto", et tu mets le reste dedans..; (mais avec des div). La vlaleur margin auto a pour effet de centrer le conteneur. Tu peux aussi donner une valeur de "%" au lieu de px sur width, ainsi, ton conteneur restera centré , mais avec une valeur ajustée à la fenêtre du client.
Réalise ton site avec feuilles de style (CSS). Tu donnes une dimension à une div ("container" hight et width, plus une valeur margin "auto", et tu mets le reste dedans..; (mais avec des div). La vlaleur margin auto a pour effet de centrer le conteneur. Tu peux aussi donner une valeur de "%" au lieu de px sur width, ainsi, ton conteneur restera centré , mais avec une valeur ajustée à la fenêtre du client.
merci de m avoir répondu jacobéo
J'ai fait mon site en xhtml et css et sous forme de tableau pour qu'il s'adapte automatiquement à la résolution de
chacun.
Si possible j'aimerai garder cette forme de tableau et trouver une solution pour ce satané et sombre "bip" de IE.
je met le code css et xhtml pour montrer
body table
{
width: 100%;
border-collapse: collapse;
}
#header
{
background-color: white;
border: 1px solid red;
}
#menu
{
vertical-align: top;
background-color: white;
border: 1px solid red;
}
#menu img
{
width: 100%;
margin: auto;
}
#corps
{
background-color: white;
padding: 1% 3% 3% 3%;
border: 1px solid red;
}
#info
{
vertical-align: top;
background-color: white;
border: 1px solid red;
text-align: justify center;
padding: 0 1% 0 1%;
overflow: scroll;
}
}
#footer
{
background-color: white;
border: 1px solid red;
}
.commentaire
{
font-style: italic;
}
.image_corps
{
border: 1px solid black;
}
et l'XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>VTT-PYRENEES.FR - La bande du 65</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="vtt, rando, randonnee, pyrenees, hautes-pyrenees, course, velo, 65, 64, 32, video vtt, video velo">
<meta name="Description" content="page d'accueil de vtt-pyrenees.fr, presentation du site">
<meta http-equiv="content-language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="index.css" />
</head>
<body>
<table>
<tr>
<th id="header" colspan="3" width="100%">header</th>
</tr>
<tr>
<th id="menu" width="10%" height="100%">
<div id="photos"></div>
<h2>Menu</h2>
<hr />
<table>
<td>
<a href="index.html">Accueil</a><br />
<a href="la_bande.html">La bande</a><br />
<a href="rando.html">Rando</a><br />
<a href="parcours.html">Parcours</a><br />
<a href="photos.html">Photos</a><br />
<a href="videos.html">Vidéos</a><br />
<a href="http://www.vtt-pyrenees.fr/forum/index.php?owner=vttpyrenees">Forum</a><br />
<a href="astuces.html">Astuces</a><br />
<a href="mailto:ced3c2@gmail.com">Contact</a><br />
</td>
</table>
<hr />
<h2>Liens</h2>
<hr />
<table>
<td>
<a href="http://www.google.com/toolbar/ff/index.html"><img border="0" alt="Firefox 3" title="Firefox 3 muni de la barre Google - Le meilleur navigateur web pour surfer sans souci" src="images/bouton/firefoxbig.gif" /></a>
<a href="https://openclassrooms.com/fr/"><img src="images/bouton/site_du_zero2.png" alt="site du zero" title="site du zéro - Tutoriaux débutant pour apprendre à créer un site web et forum d'entraide un MUST à découvrir" style="border: 1px solid black;"/></a>
<a href="http://www.intersport.fr/resources/home/"><img src="images/bouton/intersport.gif" alt="intersport" title="intersport" style="border: 1px solid black;"/></a>
<a href="https://meteofrance.com/"><img src="images/bouton/meteo_france.gif" alt="météo france" title="météo france" style="border: 1px solid black;"/></a>
</td>
</table>
<hr />
</th>
<th id="corps" width="75%">
</th>
<th id="info" width="15%">
<h2>News</h2>
<hr />
<h4>20 juillet 2008</h4>
<p> Changement de design du site.<br />Désormais le site s'adapte à la résolution de l'utilisateur.</p>
</th>
</tr>
<tr>
<th id="footer" colspan="3" width="100%">footer</th>
</tr>
</table>
</body>
</html>
je suis désolé j'espère que le message ne sera pas trop long
avec ce code les image du menu/liens ne s'adapte pas à la taille de la cellule ou elles sont alors que sous Firefox
il n'y a pas de souci
J'ai fait mon site en xhtml et css et sous forme de tableau pour qu'il s'adapte automatiquement à la résolution de
chacun.
Si possible j'aimerai garder cette forme de tableau et trouver une solution pour ce satané et sombre "bip" de IE.
je met le code css et xhtml pour montrer
body table
{
width: 100%;
border-collapse: collapse;
}
#header
{
background-color: white;
border: 1px solid red;
}
#menu
{
vertical-align: top;
background-color: white;
border: 1px solid red;
}
#menu img
{
width: 100%;
margin: auto;
}
#corps
{
background-color: white;
padding: 1% 3% 3% 3%;
border: 1px solid red;
}
#info
{
vertical-align: top;
background-color: white;
border: 1px solid red;
text-align: justify center;
padding: 0 1% 0 1%;
overflow: scroll;
}
}
#footer
{
background-color: white;
border: 1px solid red;
}
.commentaire
{
font-style: italic;
}
.image_corps
{
border: 1px solid black;
}
et l'XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>VTT-PYRENEES.FR - La bande du 65</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="vtt, rando, randonnee, pyrenees, hautes-pyrenees, course, velo, 65, 64, 32, video vtt, video velo">
<meta name="Description" content="page d'accueil de vtt-pyrenees.fr, presentation du site">
<meta http-equiv="content-language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="index.css" />
</head>
<body>
<table>
<tr>
<th id="header" colspan="3" width="100%">header</th>
</tr>
<tr>
<th id="menu" width="10%" height="100%">
<div id="photos"></div>
<h2>Menu</h2>
<hr />
<table>
<td>
<a href="index.html">Accueil</a><br />
<a href="la_bande.html">La bande</a><br />
<a href="rando.html">Rando</a><br />
<a href="parcours.html">Parcours</a><br />
<a href="photos.html">Photos</a><br />
<a href="videos.html">Vidéos</a><br />
<a href="http://www.vtt-pyrenees.fr/forum/index.php?owner=vttpyrenees">Forum</a><br />
<a href="astuces.html">Astuces</a><br />
<a href="mailto:ced3c2@gmail.com">Contact</a><br />
</td>
</table>
<hr />
<h2>Liens</h2>
<hr />
<table>
<td>
<a href="http://www.google.com/toolbar/ff/index.html"><img border="0" alt="Firefox 3" title="Firefox 3 muni de la barre Google - Le meilleur navigateur web pour surfer sans souci" src="images/bouton/firefoxbig.gif" /></a>
<a href="https://openclassrooms.com/fr/"><img src="images/bouton/site_du_zero2.png" alt="site du zero" title="site du zéro - Tutoriaux débutant pour apprendre à créer un site web et forum d'entraide un MUST à découvrir" style="border: 1px solid black;"/></a>
<a href="http://www.intersport.fr/resources/home/"><img src="images/bouton/intersport.gif" alt="intersport" title="intersport" style="border: 1px solid black;"/></a>
<a href="https://meteofrance.com/"><img src="images/bouton/meteo_france.gif" alt="météo france" title="météo france" style="border: 1px solid black;"/></a>
</td>
</table>
<hr />
</th>
<th id="corps" width="75%">
</th>
<th id="info" width="15%">
<h2>News</h2>
<hr />
<h4>20 juillet 2008</h4>
<p> Changement de design du site.<br />Désormais le site s'adapte à la résolution de l'utilisateur.</p>
</th>
</tr>
<tr>
<th id="footer" colspan="3" width="100%">footer</th>
</tr>
</table>
</body>
</html>
je suis désolé j'espère que le message ne sera pas trop long
avec ce code les image du menu/liens ne s'adapte pas à la taille de la cellule ou elles sont alors que sous Firefox
il n'y a pas de souci
Il semble:
-1 que la seule et unique div (<div id="photos"></div>) soit... vide !
-2 que ce nom de div ne figure pas dans la feuille de style.
-1 que la seule et unique div (<div id="photos"></div>) soit... vide !
-2 que ce nom de div ne figure pas dans la feuille de style.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
En fait, tu n'as, pour moi, pas utilisé les feuilles de styles.
Une feuille qui présente ceci:
body {
background-color :rgb(19, 15, 6);
}
#conteneur {
height : 000;
margin : auto;
width : 800px;
}
#date {
color : rgb(29, 45, 14);
font-family : arial,verdana,times-roman;
font-style : italic;
font-size : 0.8em;
font-variant : small-capps;
height : auto;
width : auto;
}
#top {
background-image : url(../structure/titre.png);
height : px;
width : px;
}
#user {
background-image : url(../structure/africa.png);
height : px;
width : px;
}
#left {
background-image : url(../structure/instrument1.png);
float : left;
height : px;
width : px;
}
--------
doit comporter cela :
</div>
<!-- div du titre -->
<div id="top"></div>
<!-- div de l'afrique -->
<div id="user"></div>
<!-- div de l'instrument -->
<div id="left"></div>
<!-- div du menu -->
<div id="mainmenu"></div>
<!-- div des vignettes "tourn over" -->
<div id="right"></div>
... avec bien entendu les information nécessaires ! Attention les infos ci-dessus sont une construction et les informations sont parfois manquantes.
Une feuille qui présente ceci:
body {
background-color :rgb(19, 15, 6);
}
#conteneur {
height : 000;
margin : auto;
width : 800px;
}
#date {
color : rgb(29, 45, 14);
font-family : arial,verdana,times-roman;
font-style : italic;
font-size : 0.8em;
font-variant : small-capps;
height : auto;
width : auto;
}
#top {
background-image : url(../structure/titre.png);
height : px;
width : px;
}
#user {
background-image : url(../structure/africa.png);
height : px;
width : px;
}
#left {
background-image : url(../structure/instrument1.png);
float : left;
height : px;
width : px;
}
--------
doit comporter cela :
</div>
<!-- div du titre -->
<div id="top"></div>
<!-- div de l'afrique -->
<div id="user"></div>
<!-- div de l'instrument -->
<div id="left"></div>
<!-- div du menu -->
<div id="mainmenu"></div>
<!-- div des vignettes "tourn over" -->
<div id="right"></div>
... avec bien entendu les information nécessaires ! Attention les infos ci-dessus sont une construction et les informations sont parfois manquantes.
Je te comprends bien Jacobéo mon ancien site avais une structure sous forme de div comme tu le suggères.
Le site que je veux concevoir ici est sous forme de tableau afin de le rendre compatible à la résolution de l'internaute
Je me trompe peut-être en utilisant cette structure mais c'est la seule façon que j'ai trouver pour la résolution automatique.
Le site que je veux concevoir ici est sous forme de tableau afin de le rendre compatible à la résolution de l'internaute
Je me trompe peut-être en utilisant cette structure mais c'est la seule façon que j'ai trouver pour la résolution automatique.
J'avoue que depuis que j'ai mis la main sur le CSS (merci à ce forum...) je ne puis plus m'en passer. On peux tout (enfin, presque) réaliser avec ce langage. Le graphisme est vraiment extra. Tu peux voir sur cette adresse (que tu connais peut-être) http://fr.selfhtml.org/ Pour les possibilités offertes, regarde ici ces 210 exemples http://www.mezzoblue.com/zengarden/alldesigns/
Tu retrouves ainsi tes cadres avec un avantage sérieux, le poids de l'ensemble et la facilité d'affichage sur les différents serveurs. De plus, tu entres dans la règle du W3c.
Quand tu parles de résolution, tu parles de quoi au juste ? de la taille de la police ou de la dimension de la page affichée ?
Tu retrouves ainsi tes cadres avec un avantage sérieux, le poids de l'ensemble et la facilité d'affichage sur les différents serveurs. De plus, tu entres dans la règle du W3c.
Quand tu parles de résolution, tu parles de quoi au juste ? de la taille de la police ou de la dimension de la page affichée ?
en fait je parle des 2 vu que mes width sont en % et mes font-style en em ce qui fait que la résolution écran et la police sont adaptés a l'utilisateur
merci pour les liens je ne les connaissais pas je ne me suis intéressé qu'aux tuto du site du zéro pour l'instant
Bonjour,
Je reviens ce matin avec cette proposition html et css (désolé, mais la page va être longue...!)
Pour le HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>VTT-PYRENEES.FR - La bande du 65</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="vtt, rando, randonnee, pyrenees, hautes-pyrenees, course, velo, 65, 64, 32, video vtt, video velo">
<meta name="Description" content="page d'accueil de vtt-pyrenees.fr, presentation du site">
<meta http-equiv="content-language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="index.css" />
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- début de la div container. A noter que la balise de </div> fin se trouve juste devant la fin de la balise </body>, ceci pour encadrer l'ensemble -->
<div id="container">
<!-- début de la div haeder -->
<div id="haeder">
<!-- texte, image de haeder..... -->
</div>
<div id="menu">
<!-- les liens du menu..... -->
</div>
<div id="photo">
<!-- images..... -->
</div>
<div id="liens">
<!-- liens hyper..... -->
</div>
<div id="main">
<!-- texte, image de la fenêtre principale..... -->
</div>
<div id="news">
<!-- infos des news..... -->
</div>
<div id="footer">
<!-- éléments du footer..... -->
</div>
<!-- Rappel : les div haeder,menu,photo,liens,main,news et footer doivent-être infermées dans la balise "container" -->
<!-- La feuille de style doit reprendre EXACTEMENT les mêmes titre que les div ci-dessus. Ces div seront dont mobiles et pourront être positionnées selon désir dans le même aspect que tes tables ci-dessous. (extrait...) -->
<table>
<tr>
<th id="header" colspan="3" width="100%">header</th>
</tr>
<tr>
<th id="menu" width="10%" height="100%"> <div id="photos"></div>
<h2>Menu</h2>
<hr />
<table>
<tr>
<td><a href="index.html">Accueil</a><br />
<a href="la_bande.html">La bande</a><br />
<a href="rando.html">Rando</a><br />
<a href="parcours.html">Parcours</a><br />
<a href="photos.html">Photos</a><br />
<a href="videos.html">Vidéos</a><br />
<a href="http://www.vtt-pyrenees.fr/forum/index.php?owner=vttpyrenees">Forum</a><br />
<a href="astuces.html">Astuces</a><br />
<a href="mailto:ced3c2@gmail.com">Contact</a><br />
</td>
------------------------------------------------------------------------
<th id="footer" colspan="3" width="100%">footer</th>
</tr>
</table>
</div>
<!-- fin de la div container -->
</div>
</body>
</html>
Pour le CSS :
body
{
margin: auto;
width: 80%;
border-collapse: collapse;
}
#header
{
background-color: white;
border: 1px solid red;
}
#menu
{
vertical-align: top;
background-color: white;
border: 1px solid red;
}
#menu img
{
width: 100%;
margin: auto;
}
J'ai modifé la body pour monter le centrage et l'alignement auto selon l'écran du client.
Pour la suite, désolé, mais je pars... dans cette région du Tarn et celles des Corbières jusqu'à fin septembre, et là... pas d'informatique selon mes connaissances...
Je reviens ce matin avec cette proposition html et css (désolé, mais la page va être longue...!)
Pour le HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>VTT-PYRENEES.FR - La bande du 65</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="vtt, rando, randonnee, pyrenees, hautes-pyrenees, course, velo, 65, 64, 32, video vtt, video velo">
<meta name="Description" content="page d'accueil de vtt-pyrenees.fr, presentation du site">
<meta http-equiv="content-language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="index.css" />
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- début de la div container. A noter que la balise de </div> fin se trouve juste devant la fin de la balise </body>, ceci pour encadrer l'ensemble -->
<div id="container">
<!-- début de la div haeder -->
<div id="haeder">
<!-- texte, image de haeder..... -->
</div>
<div id="menu">
<!-- les liens du menu..... -->
</div>
<div id="photo">
<!-- images..... -->
</div>
<div id="liens">
<!-- liens hyper..... -->
</div>
<div id="main">
<!-- texte, image de la fenêtre principale..... -->
</div>
<div id="news">
<!-- infos des news..... -->
</div>
<div id="footer">
<!-- éléments du footer..... -->
</div>
<!-- Rappel : les div haeder,menu,photo,liens,main,news et footer doivent-être infermées dans la balise "container" -->
<!-- La feuille de style doit reprendre EXACTEMENT les mêmes titre que les div ci-dessus. Ces div seront dont mobiles et pourront être positionnées selon désir dans le même aspect que tes tables ci-dessous. (extrait...) -->
<table>
<tr>
<th id="header" colspan="3" width="100%">header</th>
</tr>
<tr>
<th id="menu" width="10%" height="100%"> <div id="photos"></div>
<h2>Menu</h2>
<hr />
<table>
<tr>
<td><a href="index.html">Accueil</a><br />
<a href="la_bande.html">La bande</a><br />
<a href="rando.html">Rando</a><br />
<a href="parcours.html">Parcours</a><br />
<a href="photos.html">Photos</a><br />
<a href="videos.html">Vidéos</a><br />
<a href="http://www.vtt-pyrenees.fr/forum/index.php?owner=vttpyrenees">Forum</a><br />
<a href="astuces.html">Astuces</a><br />
<a href="mailto:ced3c2@gmail.com">Contact</a><br />
</td>
------------------------------------------------------------------------
<th id="footer" colspan="3" width="100%">footer</th>
</tr>
</table>
</div>
<!-- fin de la div container -->
</div>
</body>
</html>
Pour le CSS :
body
{
margin: auto;
width: 80%;
border-collapse: collapse;
}
#header
{
background-color: white;
border: 1px solid red;
}
#menu
{
vertical-align: top;
background-color: white;
border: 1px solid red;
}
#menu img
{
width: 100%;
margin: auto;
}
J'ai modifé la body pour monter le centrage et l'alignement auto selon l'écran du client.
Pour la suite, désolé, mais je pars... dans cette région du Tarn et celles des Corbières jusqu'à fin septembre, et là... pas d'informatique selon mes connaissances...