28172 sujets
CSS et mise en forme, CSS3
Bonsoir Remay,
Tu peux peut-être t'inspirer de ce tutoriel ? Mais cela peut dépendre de ce que tu entends par boutons, et de ce que tu dois fire au final...
Un peu de code ou une page en ligne pourrait nous "éclairer"
Cdt,
Sylvain
Tu peux peut-être t'inspirer de ce tutoriel ? Mais cela peut dépendre de ce que tu entends par boutons, et de ce que tu dois fire au final...
Un peu de code ou une page en ligne pourrait nous "éclairer"
Cdt,
Sylvain
Merci pour ton aide.
voila ou j'en suis: http://mismouc.free.fr
comme tu peu le voir le rollover est composé de deux images (l'une noir l'autre bleu, elles sont légèrement transparentes et ne se superposent pas).
Donc en fait jusque la tout va bien.
Mon problème : quand je met cette ligne la dans mon code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
la div jaune remonte et se place juste sous la flèche du bouton, alors qu'elle devrait être à 200px du haut comme actuellement sur mon site.
que faire ??
Code HTML actuel :
CSS actuel :
Merci d'avance.
voila ou j'en suis: http://mismouc.free.fr
comme tu peu le voir le rollover est composé de deux images (l'une noir l'autre bleu, elles sont légèrement transparentes et ne se superposent pas).
Donc en fait jusque la tout va bien.
Mon problème : quand je met cette ligne la dans mon code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
la div jaune remonte et se place juste sous la flèche du bouton, alors qu'elle devrait être à 200px du haut comme actuellement sur mon site.
que faire ??
Code HTML actuel :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NAV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<a href="index.html"><div id="about_the_film"><img src="images/about.png" onmouseover="this.src='images/about_hover.png'" onmouseout="this.src='images/about.png'"/></a></div>
</div>
<div id="content"></div>
</body>
CSS actuel :
body {background-image: url(images/wood_bg.jpg); padding: 0px; margin: 0px;}
img {border: none;}
#menu{width: 900px; height: 200px; margin: auto; padding: auto;}
#content{width: 900px; height: 200px; margin: auto; padding: auto; background-color: e7c800;}
Merci d'avance.
Salut,
il faut toujours mettre un DOCTYPE. Si quelque chose ne fonctionne plus lorsque tu en mets un... c'est que ta page contient des erreurs qu'il faut corriger !
En particulier :
* l'élément A est de type 'en-ligne' et ne ne peut pas contenir d'éléments de type 'bloc' comme DIV (voir le tuto correspondant). D'ailleurs la structure <a><div></a></div> est incorrecte.
il faut donc remplacer
* il faut également remplacer e7c800 par #e7c800
* pour finir une image doit obligatoirement posséder un attribut alt même vide qui permettra de fournir une information si les images sont désactivées (dans ton cas il faudrait mettre alt="About The Film").
A+
il faut toujours mettre un DOCTYPE. Si quelque chose ne fonctionne plus lorsque tu en mets un... c'est que ta page contient des erreurs qu'il faut corriger !
En particulier :
* l'élément A est de type 'en-ligne' et ne ne peut pas contenir d'éléments de type 'bloc' comme DIV (voir le tuto correspondant). D'ailleurs la structure <a><div></a></div> est incorrecte.
il faut donc remplacer
<a href="index.html"><div id="about_the_film"><div id="about_the_film"><a href="index.html">* il faut également remplacer e7c800 par #e7c800
* pour finir une image doit obligatoirement posséder un attribut alt même vide qui permettra de fournir une information si les images sont désactivées (dans ton cas il faudrait mettre alt="About The Film").
A+
Merci beaucoup pour ton aide.
En fait j'ai pas mal d'autres questions, je me permet de les poser ici :
- La méthode que j'ai utilisé pour faire mon bouton est elle conforme ? en cherchant pour faire un effet de rollover j'ai trouver que c'était la plus simple. Cependant je me suis contenté de copier le code, je le comprend mais je ne sais pas de quel langage il s'agit, java script ?
- Est-il possible de rajouter un attribut pour mon bouton qui lui dise de rester en bleu quand on est sur la page du lien ?
- Dans la DIV "content" se trouve le contenu principal de mon site. J'utilise des coins arrondis qui sont des images. J'aimerai savoir si la structure de cette DIV est correcte, sinon de qu'elle manière je doit la structurer ?
Mon site : http://mismouc.free.fr
J'aurai d'autres questions par la suite. Merci d'avance pour vos conseils.
Modifié par Remay (03 Sep 2008 - 10:30)
En fait j'ai pas mal d'autres questions, je me permet de les poser ici :
- La méthode que j'ai utilisé pour faire mon bouton est elle conforme ? en cherchant pour faire un effet de rollover j'ai trouver que c'était la plus simple. Cependant je me suis contenté de copier le code, je le comprend mais je ne sais pas de quel langage il s'agit, java script ?
- Est-il possible de rajouter un attribut pour mon bouton qui lui dise de rester en bleu quand on est sur la page du lien ?
- Dans la DIV "content" se trouve le contenu principal de mon site. J'utilise des coins arrondis qui sont des images. J'aimerai savoir si la structure de cette DIV est correcte, sinon de qu'elle manière je doit la structurer ?
Mon site : http://mismouc.free.fr
J'aurai d'autres questions par la suite. Merci d'avance pour vos conseils.
Modifié par Remay (03 Sep 2008 - 10:30)
Remay a écrit :Cette méthode est effectivement conforme (sauf que tu n'as toujours pas mis de alt à tes images) et il s'agit bien de Javascript (une petite recherche sur Google avec "onmouseover" te l'aurait confirmé
- La méthode que j'ai utilisé pour faire mon bouton est elle conforme ? en cherchant pour faire un effet de rollover j'ai trouver que c'était la plus simple. Cependant je me suis contenté de copier le code, je le comprend mais je ne sais pas de quel langage il s'agit, java script ?
). Attention de ne pas le confondre avec Java...Sinon dans ce cas bien précis tu aurais pu utiliser un rollover full CSS en mettant le texte directement dans le code html et en ne faisant varier que le background sur le :hover ce qui aurait l'avantage de fonctionner même si le JS est désactivé.
a écrit :Il faudrait commencer par utiliser les bonnes balises (il en existe d'autre que <div>
- Est-il possible de rajouter un attribut pour mon bouton qui lui dise de rester en bleu quand on est sur la page du lien ?
). D'ailleurs il ne s'agit pas d'un bouton (BUTTON) mais d'un lien (A) et lorsque l'on fait un menu on utilise généralement une liste (UL + LI + A) : voir les tutos sur la création de menus. Pour marquer la page active il suffit ensuite d'affecter un id au bon LI (voir ce point de la FAQ).Remay a écrit :Comme la largeur est fixe c'est le cas le plus simple. Tu t'y es bien pris sauf que tu as 2 DIV en trop : tu aurais pu n'utiliser que 2 images sur #content et #corps (voir cet article qui explique comment faire).
- Dans la DIV "content" se trouve le contenu principal de mon site. J'utilise des coins arrondis qui sont des images. J'aimerai savoir si la structure de cette DIV est correcte, sinon de qu'elle manière je doit la structurer ?
Pour ce qui est de continuer à poser d'autres questions : un sujet correspond... à un sujet ! Cela permet à un visiteur de retrouver une réponse plus facilement en effectuant une recherche sur les titres (et mieux encore lorsqu'ils ont le tag [Résolu]).
D'autre part il me semble que tu devrais reprendre du début : un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.
En cas de problème sur un point particulier il sera toujours temps de venir poser une question sur le forum.
Bonne continuation
.J'ai suivi l'article en question
Il y a a peu être une solution mais je ne suis malheureusement pas assez calé pour la connaître.
Modifié par Remay (03 Sep 2008 - 22:51)
a écrit :Cependant les images que j'utilise étant translucide, cela ne fonctionne pas car l'image "milieu-bas" passe sous l'image "haut" et la couleur obtenue n'est donc plus la même.
Heyoan a écrit :
- Comme la largeur est fixe c'est le cas le plus simple. Tu t'y es bien pris sauf que tu as 2 DIV en trop : tu aurais pu n'utiliser que 2 images sur #content et #corps (voir cet article http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html qui explique comment faire).
Il y a a peu être une solution mais je ne suis malheureusement pas assez calé pour la connaître.
Modifié par Remay (03 Sep 2008 - 22:51)