Bonjour,
Je poste ici pour vous énoncer mes problèmes de conception web en html et CSS, dans le but d'avoir des pistes, solutions, conseils, etc. pour les corriger.
Je ne vous cache pas que je suis débutant en la matière et que j'ai du mal a appliquer les codes (encore moins à les connaître).
J'ai fais un site web concernant la photographie il y a 1 an, aujourd'hui je le retravaille complètement pour la 4ème et dernière fois car je veux un design plus jolie mais je veux surtout qu'il soit le plus accessible et le mieux construit possible selon les normes W3C. Je vais donc changer mon ancien menu entièrement en javascript, arrêter l'utilisation des table pour la mise en page, etc.
Pour partir sur la meilleur base possible, j'ai décidé d'apprendre en utilisant le tutoriel "Réalisation d'un design complet (XHTML / CSS) en 5 étapes" d'Alsacréation, j'ai ensuite supprimé, rajouté et modifié certains détails pour l'adapter à mes idées que 'avais en tête.
Le premier problème que j'ai rencontré : le PNG sous IE! Je crois que c'est un vrai casse tête... J'ai longuement cherché mais je n'ai pas trouvé de solution qui fonctionne. Si vous jetez un oeil au tutoriel que j'ai cité précédemment, à l'étape 4 est montré comment utilisé une image lien pour le titre en haut de la page, j'ai fais de même et ça fonctionne. Le problème étant que la page principale est fluide (80%), que le background derrière a un dégradé, et que mon image titre est en PNG car il me faut plusieurs niveau de transparence (ombrage sur l'image), Cette image titre ne s'affiche pas correctement sous IE6 malheureusement. J'ai déjà fais des tentatives de corrections en utilisant des script mais ça ne fonctionne pas puisque ce PNG est appelé dans la page CSS externe. Donc voilà si vous avez une solution car je n'ai rien trouvé qui a fonctionnait...
Mon deuxième problème... J'aimerai dans ma page d'accueil inclure 6 petites vignettes pour présenter un peu ce que je fais. J'aimerai que ces 6 vignettes soient centrer sur la page (qui est fluide rappelons le, 80%), réparti en 2 lignes, donc 2 x 3 vignettes, ensuite le plus dur c'est que j'aimerai inclure en dessous les descriptions correspondantes et que ces 6 vignettes ont un espace égal l'une de l'autre.
Et pour finir j'aimerai aussi entourer tout ça dans un petit cadre.
Il faut dire que je ne suis pas arrivé à faire cette mise en page en CSS, j'ai du recourir au table pour vous montrer mes attentes, et je ne pense pas que ce soit la meilleure solution. Je n'ai d'ailleurs pas du tout réussi à faire des espacements entre les vignettes ni autour du cadre. Si vous pouviez me dire comment améliorer ça ou comment m'y prendre "en douceur" (attention en tant que débutant j'ai du mal à comprendre les choses encore)
Concernant ces vignettes, voilà ce qui correspond au html :
Et voilà pour ce qui est du code CSS :
Voilà pour les bouts de codes, si vous voulez visualisez le problème en profondeur, j'ai envoyer mon travail actuel sur un serveur, vous pouvez donc visualiser cette page d'accueil avec le PNG et les 6 vignettes à cette page : http://myrmecophoto.free.fr/test/accueil.htm
Le CSS c'est http://myrmecophoto.free.fr/test/commun.css
Voilà j'espère ne pas avoir été trop long, mais c'est pour mieux vous faciliter la tache car je sais que ça doit être un chiant pour vous...
Je vous remercie d'avance,
Cédric R.
Je poste ici pour vous énoncer mes problèmes de conception web en html et CSS, dans le but d'avoir des pistes, solutions, conseils, etc. pour les corriger.
Je ne vous cache pas que je suis débutant en la matière et que j'ai du mal a appliquer les codes (encore moins à les connaître).
J'ai fais un site web concernant la photographie il y a 1 an, aujourd'hui je le retravaille complètement pour la 4ème et dernière fois car je veux un design plus jolie mais je veux surtout qu'il soit le plus accessible et le mieux construit possible selon les normes W3C. Je vais donc changer mon ancien menu entièrement en javascript, arrêter l'utilisation des table pour la mise en page, etc.
Pour partir sur la meilleur base possible, j'ai décidé d'apprendre en utilisant le tutoriel "Réalisation d'un design complet (XHTML / CSS) en 5 étapes" d'Alsacréation, j'ai ensuite supprimé, rajouté et modifié certains détails pour l'adapter à mes idées que 'avais en tête.
Le premier problème que j'ai rencontré : le PNG sous IE! Je crois que c'est un vrai casse tête... J'ai longuement cherché mais je n'ai pas trouvé de solution qui fonctionne. Si vous jetez un oeil au tutoriel que j'ai cité précédemment, à l'étape 4 est montré comment utilisé une image lien pour le titre en haut de la page, j'ai fais de même et ça fonctionne. Le problème étant que la page principale est fluide (80%), que le background derrière a un dégradé, et que mon image titre est en PNG car il me faut plusieurs niveau de transparence (ombrage sur l'image), Cette image titre ne s'affiche pas correctement sous IE6 malheureusement. J'ai déjà fais des tentatives de corrections en utilisant des script mais ça ne fonctionne pas puisque ce PNG est appelé dans la page CSS externe. Donc voilà si vous avez une solution car je n'ai rien trouvé qui a fonctionnait...
Mon deuxième problème... J'aimerai dans ma page d'accueil inclure 6 petites vignettes pour présenter un peu ce que je fais. J'aimerai que ces 6 vignettes soient centrer sur la page (qui est fluide rappelons le, 80%), réparti en 2 lignes, donc 2 x 3 vignettes, ensuite le plus dur c'est que j'aimerai inclure en dessous les descriptions correspondantes et que ces 6 vignettes ont un espace égal l'une de l'autre.
Et pour finir j'aimerai aussi entourer tout ça dans un petit cadre.
Il faut dire que je ne suis pas arrivé à faire cette mise en page en CSS, j'ai du recourir au table pour vous montrer mes attentes, et je ne pense pas que ce soit la meilleure solution. Je n'ai d'ailleurs pas du tout réussi à faire des espacements entre les vignettes ni autour du cadre. Si vous pouviez me dire comment améliorer ça ou comment m'y prendre "en douceur" (attention en tant que débutant j'ai du mal à comprendre les choses encore)
Concernant ces vignettes, voilà ce qui correspond au html :
<div id="test" class="relsample">
<div class="top_left"></div>
<div class="top_right"></div>
<table border="0" cellspacing="0" >
<tr>
<td><p class="textthumb"><img src="bouton/male200.jpg" alt="Mâle de Messor capitatus" width="200" height="150" /><br />
Mâle de Messor capitatus</p></td>
<td><p class="textthumb"><img src="bouton/essaimage200.jpg" alt="Essaimage de Lasius fuliginosus" width="200" height="150" /><br />
Essaimage de Lasius fuliginosus</p></td>
<td><p class="textthumb"><img src="bouton/tete200.jpg" alt="Major de Camponotus ligniperdus" width="200" height="150" /><br />
Major de Camponotus ligniperdus</p></td>
</tr>
<tr>
<td><p class="textthumb"><img src="bouton/pheidole200.jpg" alt="Pheidole pallidula en élevage" width="200" height="150" /><br />
Pheidole pallidula en élevage</p></td>
<td><p class="textthumb"><img src="bouton/tete2200.jpg" alt="Ouvrière de Ponera coarctata" width="200" height="150" /><br />
Ouvrière de Ponera coarctata</p></td>
<td><p class="textthumb"><img src="bouton/gyne200.jpg" alt="Gyne de Laius fuliginosus" width="200" height="150" /><br />
Gyne de Laius fuliginosus</p></td>
</tr>
</table>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>Et voilà pour ce qui est du code CSS :
.relsample { position: relative; }
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right { height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; }
.relsample .top_left { top: -2px; left: -2px; background-image: url("bouton/corner_top_left.gif"); z-index: 0; }
.relsample .top_right { top: -2px; right: -2px; background-image: url("bouton/corner_top_right.gif"); z-index: 1; }
.relsample .bottom_left { bottom: -2px; left: -2px; background-image: url("bouton/corner_bottom_left.gif"); z-index: 2; }
.relsample .bottom_right { bottom: -2px; right: -2px; background-image: url("bouton/corner_bottom_right.gif"); z-index: 3; }
.relsample .content { position: relative; padding: 12px; z-index: 4; }
/* Le positionnement des coins du cadre principal */
.textthumb
{
text-align: center ;
margin: 0 auto;
padding: 0;
}
div#test
{
width: 61%;
height: 350px;
margin: 0 auto ;
text-align: center ;
border: 2px solid #600000 ;
background: #eaeaea ;
}Voilà pour les bouts de codes, si vous voulez visualisez le problème en profondeur, j'ai envoyer mon travail actuel sur un serveur, vous pouvez donc visualiser cette page d'accueil avec le PNG et les 6 vignettes à cette page : http://myrmecophoto.free.fr/test/accueil.htm
Le CSS c'est http://myrmecophoto.free.fr/test/commun.css
Voilà j'espère ne pas avoir été trop long, mais c'est pour mieux vous faciliter la tache car je sais que ça doit être un chiant pour vous...
Je vous remercie d'avance,
Cédric R.
.
) :
.
. Et je ne voyais pas de problème concernant la disparition d'item...
.