A voir également:
- Image qui s'adapte à la taille de l'écran css
- Comment réduire la taille d'un fichier - Guide
- Double ecran - Guide
- Capture d'écran samsung - Guide
- Ecran noir pc - Guide
- Ecran d'accueil iphone - Guide
6 réponses
Voila un lien où c'est visible.
(pour IE biensur mais pas pour Mozilla)
http://pagesperso-orange.fr/biopanorama/pages/techniques_photos/workflow.html
KorriganVehuiah,
Que me conseil tu alors pour écrire un texte en face une photo. J'ai toujours utilisé les tableaux en me doutant que cette technique n'était pas top. Mais qu'utiliser d'autre ?
J'ai déjà essayé de mettre les styles dans une feuille CSS externe mais ça n'a rien changé.
Qu'elle serait la solution pour des photos et des images de bonne qualité (800 x 600 ?, hebergement chez un site tel que image shack ?).
(pour IE biensur mais pas pour Mozilla)
http://pagesperso-orange.fr/biopanorama/pages/techniques_photos/workflow.html
KorriganVehuiah,
Que me conseil tu alors pour écrire un texte en face une photo. J'ai toujours utilisé les tableaux en me doutant que cette technique n'était pas top. Mais qu'utiliser d'autre ?
J'ai déjà essayé de mettre les styles dans une feuille CSS externe mais ça n'a rien changé.
Qu'elle serait la solution pour des photos et des images de bonne qualité (800 x 600 ?, hebergement chez un site tel que image shack ?).
salut,
on peut avoir un lien vers ton site? et pourquoi utilisé des tableaux? perso j'ai toujours eu que des problèmes avec
on peut avoir un lien vers ton site? et pourquoi utilisé des tableaux? perso j'ai toujours eu que des problèmes avec
KorriganVehuiah
Messages postés
171
Date d'inscription
jeudi 2 octobre 2008
Statut
Membre
Dernière intervention
22 mars 2009
69
9 mars 2009 à 22:33
9 mars 2009 à 22:33
Salut !
Je suis désolé, mais je pense qu'IE a beaucoup de mal avec les tailles en %...
Attention toutefois à deux choses :
- Attention à l'utilisation de tableaux pour ton design ! Ce n'est pas accessible. La balise <table> est conçue pour afficher des données tabulaires, pas pour réaliser le design d'un site ! Les attributs border, cellspacing et cellpadding doivent désormais être envoyés vers le fichier CSS, de même que le positionnement des images de fond !
- (je suppose que tes images font 1024px, et pas 10024px...) Quand on réduit la taille des images dans le code, le fichier source n'est pas réduit. Le poids à charger pour une image de 1024px ou pour la même image réduite dans le code à 10px est le même ! Si ton image n'est pas optimisée, fais attention à son poids, tout le monde n'a pas l'ADSL !
As-tu essayé de passer tous tes attributs de mise en forme dans un fichier CSS externe ? Ce sera déjà plus clair et peut-être mieux interprété par le navigateur. On peut rêver... mais IE a du mal avec ces propriétés...
Au fait, IE6 ou IE7 ?
Je suis désolé, mais je pense qu'IE a beaucoup de mal avec les tailles en %...
Attention toutefois à deux choses :
- Attention à l'utilisation de tableaux pour ton design ! Ce n'est pas accessible. La balise <table> est conçue pour afficher des données tabulaires, pas pour réaliser le design d'un site ! Les attributs border, cellspacing et cellpadding doivent désormais être envoyés vers le fichier CSS, de même que le positionnement des images de fond !
- (je suppose que tes images font 1024px, et pas 10024px...) Quand on réduit la taille des images dans le code, le fichier source n'est pas réduit. Le poids à charger pour une image de 1024px ou pour la même image réduite dans le code à 10px est le même ! Si ton image n'est pas optimisée, fais attention à son poids, tout le monde n'a pas l'ADSL !
As-tu essayé de passer tous tes attributs de mise en forme dans un fichier CSS externe ? Ce sera déjà plus clair et peut-être mieux interprété par le navigateur. On peut rêver... mais IE a du mal avec ces propriétés...
Au fait, IE6 ou IE7 ?
KorriganVehuiah
Messages postés
171
Date d'inscription
jeudi 2 octobre 2008
Statut
Membre
Dernière intervention
22 mars 2009
69
10 mars 2009 à 07:24
10 mars 2009 à 07:24
Pour le texte en face d'une photo, il y a plusieurs solutions :
Commence par mettre tes balises <img> et <p> dans une <div>.
- La balise <img> est une balise inline. Tu peux donc l'imbriquer dans ta balise <p>
<p><img src="image.jpg" alt="texte de remplacement" />Texte de ton paragraphe</p>
- Soit tu les gardes séparées dans ton html, et tu les mets côte à côte en css avec
p {
display: inline;
}
Il existe d'autres solutions, comme {display: table}{display: table-cell} mais IE ne les supporte pas encore (qui a dit comme d'hab ?)...
Pour les images, pas de solution miracle. Soit opter pour des images de largeur fixe, soit les optimiser à crever, au risque de perdre en qualité.
Sur le site que tu donnes en lien, l'image "type" fait au moins 85Ko... et il y en a plein. Le problème est résolu en utilisant un preload javascript. As-tu essayé d'aller sur cette page en désactivant le javascript et en vidant le cache du navigateur ? Je viens de faire le test et il m'a fallu une dizaine de secondes pour que la page ne lagge plus, alors que j'ai une bonne connection... Idéalement, les images web ne devraient pas dépasser les 20 Ko à tout péter (en moyenne 10-15 Ko, c'est bien). Rien ne t'empèche d'utiliser une version réduite et de proposer un lien vers l'image "haute qualité", c'est la meilleure solution à mon sens pour concilier les deux ;)
C'est un site que tu as fait ou alors dont tu t'inspires ?
Commence par mettre tes balises <img> et <p> dans une <div>.
- La balise <img> est une balise inline. Tu peux donc l'imbriquer dans ta balise <p>
<p><img src="image.jpg" alt="texte de remplacement" />Texte de ton paragraphe</p>
- Soit tu les gardes séparées dans ton html, et tu les mets côte à côte en css avec
p {
display: inline;
}
Il existe d'autres solutions, comme {display: table}{display: table-cell} mais IE ne les supporte pas encore (qui a dit comme d'hab ?)...
Pour les images, pas de solution miracle. Soit opter pour des images de largeur fixe, soit les optimiser à crever, au risque de perdre en qualité.
Sur le site que tu donnes en lien, l'image "type" fait au moins 85Ko... et il y en a plein. Le problème est résolu en utilisant un preload javascript. As-tu essayé d'aller sur cette page en désactivant le javascript et en vidant le cache du navigateur ? Je viens de faire le test et il m'a fallu une dizaine de secondes pour que la page ne lagge plus, alors que j'ai une bonne connection... Idéalement, les images web ne devraient pas dépasser les 20 Ko à tout péter (en moyenne 10-15 Ko, c'est bien). Rien ne t'empèche d'utiliser une version réduite et de proposer un lien vers l'image "haute qualité", c'est la meilleure solution à mon sens pour concilier les deux ;)
C'est un site que tu as fait ou alors dont tu t'inspires ?
Tout d'abord merci pour votre aide aussi rapide que précis.
Effectivement KorriganVehuiah, il va falloir que je reprenne toute les images de mon site et que je les compresse à mort.
J'ai essayé :
<div id="2 colones">
<p>
<img src="../../image/techniques_photos/workflow/fichiers_image.jpg" alt="classement des fichiers" width="30%" />
blablablablablablablablablabla
</p>
</div>
Mais le problème c'est qu'il me met la première ligne en face de l'image, alignée en bas puis ensuite il écrit en bas de l'image sur toute la largeur de la page.
j'ai fait une (longue) recherche sur internet où j'ai tout vu du javascript, des tableau soit disant indispensables et obligatoire pour un texte en deux colonnes puis je suis tombé la dessus :
http://therapidpage.free.fr/faq/q55/q55.html
du coup j'ai essayé ça et sa semble fonctionner :
<div style="float:left">
<img src="../../image/techniques_photos/workflow/fichiers_image.jpg" alt="classement des fichiers" width="300" />
</div>
<p align="justify">blablablablablabla
</p>
Effectivement KorriganVehuiah, il va falloir que je reprenne toute les images de mon site et que je les compresse à mort.
J'ai essayé :
<div id="2 colones">
<p>
<img src="../../image/techniques_photos/workflow/fichiers_image.jpg" alt="classement des fichiers" width="30%" />
blablablablablablablablablabla
</p>
</div>
Mais le problème c'est qu'il me met la première ligne en face de l'image, alignée en bas puis ensuite il écrit en bas de l'image sur toute la largeur de la page.
j'ai fait une (longue) recherche sur internet où j'ai tout vu du javascript, des tableau soit disant indispensables et obligatoire pour un texte en deux colonnes puis je suis tombé la dessus :
http://therapidpage.free.fr/faq/q55/q55.html
du coup j'ai essayé ça et sa semble fonctionner :
<div style="float:left">
<img src="../../image/techniques_photos/workflow/fichiers_image.jpg" alt="classement des fichiers" width="300" />
</div>
<p align="justify">blablablablablabla
</p>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
KorriganVehuiah
Messages postés
171
Date d'inscription
jeudi 2 octobre 2008
Statut
Membre
Dernière intervention
22 mars 2009
69
10 mars 2009 à 10:21
10 mars 2009 à 10:21
Pour des raisons de clarté et de bonne interprétation, je te conseille de passer tout le style dans un fichier CSS externe.
Voici ce que ça donnerait :
En HTML :
<div id="flottant">
<img id="img_flottant" src="../../image/techniques_photos/workflow/fichiers_image.jpg" alt="classement des fichiers" />
<p id="texte">Ton texte</p>
</div>
En CSS :
#flottant {
float: left;
}
#img_flottant {
width: 30%;
}
#texte {
text-align: justify;
}
Voici ce que ça donnerait :
En HTML :
<div id="flottant">
<img id="img_flottant" src="../../image/techniques_photos/workflow/fichiers_image.jpg" alt="classement des fichiers" />
<p id="texte">Ton texte</p>
</div>
En CSS :
#flottant {
float: left;
}
#img_flottant {
width: 30%;
}
#texte {
text-align: justify;
}
