Menu graphique en css
Fermé
sylvain
-
17 févr. 2010 à 17:43
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 - 25 févr. 2010 à 21:04
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 - 25 févr. 2010 à 21:04
A voir également:
- Menu graphique en css
- Menu déroulant excel - Guide
- Changer carte graphique - Guide
- Windows 11 menu démarrer classique - Guide
- Graphique excel - Guide
- Canon quick menu - Télécharger - Utilitaires
24 réponses
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
17 févr. 2010 à 17:50
17 févr. 2010 à 17:50
Salut !
tu veux en fait un menu déroulant en CSS ?
Le principe est de prendre une liste <ul> et de mettre les <li> en ligne les un à coté des autres (à l'aide de float).
chaque <li> sera un élément du menu. Dans chacun d'eux, on mettre un autre <ul> qui sera les liens affichés au survol.
L'affichage uniquement au survol se fait avec ":hover".
voiçi mon exemple : http://lehollandaisvolant.net/tuto/css/exemple2.html
et mon tuto : https://lehollandaisvolant.net/errors/404.html#menu
tu veux en fait un menu déroulant en CSS ?
Le principe est de prendre une liste <ul> et de mettre les <li> en ligne les un à coté des autres (à l'aide de float).
chaque <li> sera un élément du menu. Dans chacun d'eux, on mettre un autre <ul> qui sera les liens affichés au survol.
L'affichage uniquement au survol se fait avec ":hover".
voiçi mon exemple : http://lehollandaisvolant.net/tuto/css/exemple2.html
et mon tuto : https://lehollandaisvolant.net/errors/404.html#menu
salut merci
pour ta réponse en fait c'est pas vraiment un menu déroulant c'est plus un menu avec des images de survol:
En fait actuellement j'ai des liens de texte comme sur cette page qui apparraissent sur le background de la div menu comme ici:
[url=https://www.hiboox.fr/][img]http://free0.hiboox.com/images/0710/5072d122f9e4094d0664dcd2254c7c47.png[/img][/url]
et je voudrais que mon menu ressemble à un truc plus comme ça:
[url=https://www.hiboox.fr/][img]http://free0.hiboox.com/images/0710/a1b39ff271acef24d8a03eb72fe5c626.jpg[/img][/url]
tout avec des images... Je suis débutant en css/xhtml et j'ai vu un paquet de tutoriaux que je n'arrive pas à adapter à mon site....
Peut-être dois-je réorganiser ma page, refaire ma découpe... j'ai besoin d'aide, je suis un peu pommé...
pour ta réponse en fait c'est pas vraiment un menu déroulant c'est plus un menu avec des images de survol:
En fait actuellement j'ai des liens de texte comme sur cette page qui apparraissent sur le background de la div menu comme ici:
[url=https://www.hiboox.fr/][img]http://free0.hiboox.com/images/0710/5072d122f9e4094d0664dcd2254c7c47.png[/img][/url]
et je voudrais que mon menu ressemble à un truc plus comme ça:
[url=https://www.hiboox.fr/][img]http://free0.hiboox.com/images/0710/a1b39ff271acef24d8a03eb72fe5c626.jpg[/img][/url]
tout avec des images... Je suis débutant en css/xhtml et j'ai vu un paquet de tutoriaux que je n'arrive pas à adapter à mon site....
Peut-être dois-je réorganiser ma page, refaire ma découpe... j'ai besoin d'aide, je suis un peu pommé...
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
19 févr. 2010 à 17:53
19 févr. 2010 à 17:53
Ah !
Pas de problèmes :-)
Ce que tu souhaites est en fait très simple. Il suffit de comprendre ce que tu veux :
Tu veux un menu.
Le menu possède plusieurs liens, les uns à coté des autres.
Chaque lien est une image cliquable.
À partir de là, c'est bon : les images et les liens se placent automatiquement les uns à coté des autres. Il te suffit d'avoir tes 5 images, puis de créer une <div> avec dedans :
Pas de problèmes :-)
Ce que tu souhaites est en fait très simple. Il suffit de comprendre ce que tu veux :
Tu veux un menu.
Le menu possède plusieurs liens, les uns à coté des autres.
Chaque lien est une image cliquable.
À partir de là, c'est bon : les images et les liens se placent automatiquement les uns à coté des autres. Il te suffit d'avoir tes 5 images, puis de créer une <div> avec dedans :
<a href="lien acceuil"><img scr="image acceuil" alt="acceuil"></a> <a href="lien service"><img scr="image service" alt="service"></a> <a href="lien actu"><img scr="image actu" alt="actu"></a> <a href="lien photo"><img scr="image photo" alt="photo"></a> <a href="lien contact"><img scr="image contact" alt="contact"></a>--
,-O O } `-O
Merci pour ton aide, ça à l'air tout simple comme ça...
en fait, j'ai déjà découpé mes 10 images, 5 pour l'état normal et 5 pour l'état survolé, j'arrive bien à les placer à la suite horizontalement mais je n'arrive pas à les placer de manière à ce qu'elles correspondent exactement au background de ma div. menu (qui comprend aussi le début de l'encadrement destiné à recevoir le corps) et qui est donc plus grande que la barre de menu elle-même (partie avec l'ombre portée...) j'espère être clair... mais c pas sur que je le soit...
Je te remercie d'avance pour ta réponse ;-)
en fait, j'ai déjà découpé mes 10 images, 5 pour l'état normal et 5 pour l'état survolé, j'arrive bien à les placer à la suite horizontalement mais je n'arrive pas à les placer de manière à ce qu'elles correspondent exactement au background de ma div. menu (qui comprend aussi le début de l'encadrement destiné à recevoir le corps) et qui est donc plus grande que la barre de menu elle-même (partie avec l'ombre portée...) j'espère être clair... mais c pas sur que je le soit...
Je te remercie d'avance pour ta réponse ;-)
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
20 févr. 2010 à 16:14
20 févr. 2010 à 16:14
Ah, en fait tu as une partie du fond de page dans chaque bouton ?
n'est-il pas mieux de faire les boutons transparents ?
n'est-il pas mieux de faire les boutons transparents ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
C'est bien ça,
les boutons transparents sont peut-être la solution (en png j'imagine)mais n'y a-t-il pas des pb de compatibilité avec certains navigateurs concernant la gestion de la couche alpha ???
les boutons transparents sont peut-être la solution (en png j'imagine)mais n'y a-t-il pas des pb de compatibilité avec certains navigateurs concernant la gestion de la couche alpha ???
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
20 févr. 2010 à 17:48
20 févr. 2010 à 17:48
Si.
Seul Internet Explorer 6 ne les gère pas. IE7 et 8 le gèrent.
Tous les autres navigateurs le gèrent depuis toujours. Il existe un petit scripte pour les faire marcher dans IE6. (je ne le connais pas, je l'utilise pas mais je peux le chercher si tu veux).
Franchement, je te conseil de laisser tomber IE6 : c'est le cauchemard de tous les webmasters et si on continues a le supporter, il sera encore là dans 20 ans.
Si tu veux t'en sortir avec les images non-transparents, il te faudra positionner les boutons aux pixel près. C'est tout à fait faisable, c'est pas dur, faut juste être un peu patient et perfectionniste, mais internet explorer risque encore de ne pas aimer, c'est bien la raison pour laquelle je propose les PNG avec Alpha…
Seul Internet Explorer 6 ne les gère pas. IE7 et 8 le gèrent.
Tous les autres navigateurs le gèrent depuis toujours. Il existe un petit scripte pour les faire marcher dans IE6. (je ne le connais pas, je l'utilise pas mais je peux le chercher si tu veux).
Franchement, je te conseil de laisser tomber IE6 : c'est le cauchemard de tous les webmasters et si on continues a le supporter, il sera encore là dans 20 ans.
Si tu veux t'en sortir avec les images non-transparents, il te faudra positionner les boutons aux pixel près. C'est tout à fait faisable, c'est pas dur, faut juste être un peu patient et perfectionniste, mais internet explorer risque encore de ne pas aimer, c'est bien la raison pour laquelle je propose les PNG avec Alpha…
salut,
les png et la transparence ça à l'air d'être parfait pour ce que je veux faire d'après mes tests, j'ai donc mes 10 png correspondant à mes 5 boutons et à leurs états survolés et normaux enregistrer dans mon dossier image il ne me manque plus qu'un petit (ou gros) coup de pouce pour que je puisse arriver au résultat voulu,
je ne sais pas comment faire pour créer mon menu roll over et le positionner où je veux exactement et le tout en gardant mes liens texte accessibles...
Mon code html est le suivant avec mes liens texte:
et concernant le css j'ai ça:
j'ai besoin d'aide svp j'suis pommé, je ne sais pas comment m'y prendre, faut-il créer une div. barrenavigation à l'intérieur de ma div. menu, ou bien redécouper mon design en distinguant mon menu et ma barre de navigation...
merci d'avance pour votre aide,
A +
les png et la transparence ça à l'air d'être parfait pour ce que je veux faire d'après mes tests, j'ai donc mes 10 png correspondant à mes 5 boutons et à leurs états survolés et normaux enregistrer dans mon dossier image il ne me manque plus qu'un petit (ou gros) coup de pouce pour que je puisse arriver au résultat voulu,
je ne sais pas comment faire pour créer mon menu roll over et le positionner où je veux exactement et le tout en gardant mes liens texte accessibles...
Mon code html est le suivant avec mes liens texte:
<!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>Deamouv</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
<link href="styles/monstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="menu">
<a href='index.html'>Accueil</a> <a href='index.html'>Services</a> <a href='index.html'>Actus</a> <a href='index.html'>Photos</a> <a href='index.html'>Contact</a> </div>
<div id="corps">
</div>
<div id="footer">
Nawak Copyright - Tous droits réservés © 2008-2009
</div>
</div>
</body>
</html>
et concernant le css j'ai ça:
@charset "iso-8859-1";
/* CSS Document */
body
{
background-color: #fffff;
}
#header
{
background-image: url("../images/header.jpg");
width: 876px;
height: 185px;
}
#menu
{
background-image: url("../images/menu.jpg");
width: 876px;
height: 87px;
text-align:center;
font-size: 16px;
padding-top: 30px;
}
#corps
{
background-image: url("../images/corps.jpg");
background-repeat: repeat-y;
width: 816px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
text-align:justify;
}
#footer
{
background-image: url("../images/footer.jpg");
width: 876px;
height: 81px;
text-align:center;
font-size: 12px;
color:#0000CC;
padding-top: 20px;
}
#conteneur
{
margin: auto;
border: 1px solid blue;
margin: auto;
width: 876px;
}
#menu a
{
color: red;
text-decoration: none;
margin-left: 10px;
margin-right: 10px;
}
#menu a:hover
{
text-decoration: underline;
}
j'ai besoin d'aide svp j'suis pommé, je ne sais pas comment m'y prendre, faut-il créer une div. barrenavigation à l'intérieur de ma div. menu, ou bien redécouper mon design en distinguant mon menu et ma barre de navigation...
merci d'avance pour votre aide,
A +
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 14:22
23 févr. 2010 à 14:22
Ok. Déjà, j'ai changé le "charset=iso-8859-1" en "charset=utf-8". (en testant ton codé, les caractères spéciaux ne s'affichaient pas correctement, maintenant, avec le utf8, c'est bon.
Ensuite, pour le menu, je propose de passer par une liste <ul> avec des <li>. C'est pas pour déplaire, c'est juste que c'est l'usage de faire comme ça, et ce sera plus propre.
Aurais tu le nom des images ? Pour que je puisse faire le code en entier ? (le nom des images et le nom du dossier dans lequel ils sont, si c'est un dossier différent de celui contenant le fichier html et css).
Ensuite, pour le menu, je propose de passer par une liste <ul> avec des <li>. C'est pas pour déplaire, c'est juste que c'est l'usage de faire comme ça, et ce sera plus propre.
Aurais tu le nom des images ? Pour que je puisse faire le code en entier ? (le nom des images et le nom du dossier dans lequel ils sont, si c'est un dossier différent de celui contenant le fichier html et css).
SG40
Messages postés
6
Date d'inscription
mardi 23 février 2010
Statut
Membre
Dernière intervention
23 février 2010
23 févr. 2010 à 14:32
23 févr. 2010 à 14:32
salut et merci de ta réponse si rapide, c'est vraiment sympa de ta part de te pencher sur mon périple...
mes images s'appellent: accueil.png, accueilvol.png, services.png, servicesvol.png, photos.png, photosvol.png, actus.png, actusvol.png, contact.png, contactvol.png.
elles sont dans le dossier nommer "images"de mon site. si ça peut t'aider leur dimension est de 115*64 px.
merci encore pour ton aide précieuse ;-)
mes images s'appellent: accueil.png, accueilvol.png, services.png, servicesvol.png, photos.png, photosvol.png, actus.png, actusvol.png, contact.png, contactvol.png.
elles sont dans le dossier nommer "images"de mon site. si ça peut t'aider leur dimension est de 115*64 px.
merci encore pour ton aide précieuse ;-)
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 14:41
23 févr. 2010 à 14:41
Derien :-)
Par contre, dans le xHTML, je vois "<a href='index.html'>Accueil</a>". Est-ce que le "acceuil" sera du texte, ou une image comme tu voulais au début ?
En gros, le "acceuil" sera écrit dans l'image elle même, ou l'image n'est-il qu'un fond pour le texte ?
Par contre, dans le xHTML, je vois "<a href='index.html'>Accueil</a>". Est-ce que le "acceuil" sera du texte, ou une image comme tu voulais au début ?
En gros, le "acceuil" sera écrit dans l'image elle même, ou l'image n'est-il qu'un fond pour le texte ?
SG40
Messages postés
6
Date d'inscription
mardi 23 février 2010
Statut
Membre
Dernière intervention
23 février 2010
23 févr. 2010 à 14:48
23 févr. 2010 à 14:48
en fait le texte est sur l'image la police étant n'étant pas répandue, cependant vu qu'un texte en image niveau accessibilité c pas top, si il y a une solution jsuis preneur.
En fait mes images pour le lien vers la page actus.html par exemple:
j'ai un png avec une étoile en fond et marqué actus, et un autre png avec l'étoile qui change d'aspect et le texte qui reste identique.
En fait mes images pour le lien vers la page actus.html par exemple:
j'ai un png avec une étoile en fond et marqué actus, et un autre png avec l'étoile qui change d'aspect et le texte qui reste identique.
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 14:56
23 févr. 2010 à 14:56
Ah, donc le texte est bel et bien inclu dans l'image ? (comme ici : http://lepetitmarocain.webou.net/cgi-sys/suspendedpage.cgi
Pour ce qui est de l'accessibilité… Tu veux dire que au cas où les images ne sont pas chargés (désactivés par le navigateur par exemple), le visiteur doit tout de même savoir où il va, effectivement…
Pour le moment, je vois pas de solution propre… À moins de faire une image transparente de la dimension 115*64px. On met cette image par dessus chaque lien.
Si les images ne sont pas chargés, cette image, disposant d'une balise "alt" ne sera pas non plus chargés. À ce moment là, c'est le texte contenu dans la balise "alt" qui sera visible. Le lien restera bien évidement cliquable.
Pour ce qui est de l'accessibilité… Tu veux dire que au cas où les images ne sont pas chargés (désactivés par le navigateur par exemple), le visiteur doit tout de même savoir où il va, effectivement…
Pour le moment, je vois pas de solution propre… À moins de faire une image transparente de la dimension 115*64px. On met cette image par dessus chaque lien.
Si les images ne sont pas chargés, cette image, disposant d'une balise "alt" ne sera pas non plus chargés. À ce moment là, c'est le texte contenu dans la balise "alt" qui sera visible. Le lien restera bien évidement cliquable.
SG40
Messages postés
6
Date d'inscription
mardi 23 février 2010
Statut
Membre
Dernière intervention
23 février 2010
23 févr. 2010 à 15:08
23 févr. 2010 à 15:08
ça me parait pas mal tout ça, avant quand je faisait avec des tableaux (je sais que c pas bien mais bon faut bien commencer par un truc...) on pouvait donner un titre à chaque image c un peu le même principe j'ai l'impression.
te casse pas la tête avec ce pb de lien si tu peux me positionner mes images au bon endroit (en haut de la div.menu) c déjà énorme, pour l'accessibilité on verra plus tard...
te casse pas la tête avec ce pb de lien si tu peux me positionner mes images au bon endroit (en haut de la div.menu) c déjà énorme, pour l'accessibilité on verra plus tard...
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 15:17
23 févr. 2010 à 15:17
Les tableaux :-)
Je me souviens, quand j'ai commencé mon desing pour mon site, j'avais fais un gigantesque tableau. C'était pratique et tout marchait parfaitement.
On m'a dit une fois que les tableaux étaient dépréciés pour le desing !! J'ai passé un moment à tout refaire, mais j'y suis arrivé :D
Pour le moment, j'arrive à ça : http://www.cijoint.fr/cjlink.php?file=cj201002/cijeo6o0Xb.png
Est-ce que la liste (cadre vert) doit être collé en haut du div#menu (cadre bleu au centre) ?
Je me souviens, quand j'ai commencé mon desing pour mon site, j'avais fais un gigantesque tableau. C'était pratique et tout marchait parfaitement.
On m'a dit une fois que les tableaux étaient dépréciés pour le desing !! J'ai passé un moment à tout refaire, mais j'y suis arrivé :D
Pour le moment, j'arrive à ça : http://www.cijoint.fr/cjlink.php?file=cj201002/cijeo6o0Xb.png
Est-ce que la liste (cadre vert) doit être collé en haut du div#menu (cadre bleu au centre) ?
SG40
Messages postés
6
Date d'inscription
mardi 23 février 2010
Statut
Membre
Dernière intervention
23 février 2010
23 févr. 2010 à 15:19
23 févr. 2010 à 15:19
c'est exactement ça je veux que ça soit coller...
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 15:29
23 févr. 2010 à 15:29
Ok !
Et à gauche ? Ou le menu doit-être centré ?
Et à gauche ? Ou le menu doit-être centré ?
SG40
Messages postés
6
Date d'inscription
mardi 23 février 2010
Statut
Membre
Dernière intervention
23 février 2010
23 févr. 2010 à 15:31
23 févr. 2010 à 15:31
ouais collé à gauche aussi, merci c parfait
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 15:43
23 févr. 2010 à 15:43
Voilà : http://www.cijoint.fr/cjlink.php?file=cj201002/cijokfYLnL.zip
Y'a le fichier CSS et le fichier HTML.
J'ai retiré les bordures que j'avais mis. Comme tu vois, dans le <div> menu, j'ai mis une liste.
Les liens sont dimensionnés et au :hover l'image de fond change.
Y'a le fichier CSS et le fichier HTML.
J'ai retiré les bordures que j'avais mis. Comme tu vois, dans le <div> menu, j'ai mis une liste.
Les liens sont dimensionnés et au :hover l'image de fond change.
Hello,
Je reviens vers toi car malgré une bonne grosse bataille je n'arrive pas à supprimer le décalage de 16 px entre mon header et mon menu, j'ai essayer des margin bottom et top dans tous les sens mais rien à faire ça ne change rien.
Encore plus surprenant, j'ai suivi tes conseils en mettant des border de 1 px à mes div. conteneur, footer, menu et header pour voir laquelle couillait, et là miracle quand je fais aperçu dans le navigateur (via dreamwever...) toutes mes div sont parfaitement positionnées, plus le moindre déallage, et lorsque j'enlève mes borders,.... et ben le fameux décalage revient !!!! ça va me faire déboulonner dans pas longtemps cette histoire le css serait-il contre moi ???
De plus, une autre petite question, je n'arrive plus à travailler en mode fractionné (code et creation sous dreamweaver, et une favicon d'opéra apparait pour ma page index, saurais-tu m'expliquer tout ça;-)
Allez je te remercie d'avance pour ton aide, et si je peux te rendre un service en échange n'hésite pas à demander....
Je reviens vers toi car malgré une bonne grosse bataille je n'arrive pas à supprimer le décalage de 16 px entre mon header et mon menu, j'ai essayer des margin bottom et top dans tous les sens mais rien à faire ça ne change rien.
Encore plus surprenant, j'ai suivi tes conseils en mettant des border de 1 px à mes div. conteneur, footer, menu et header pour voir laquelle couillait, et là miracle quand je fais aperçu dans le navigateur (via dreamwever...) toutes mes div sont parfaitement positionnées, plus le moindre déallage, et lorsque j'enlève mes borders,.... et ben le fameux décalage revient !!!! ça va me faire déboulonner dans pas longtemps cette histoire le css serait-il contre moi ???
De plus, une autre petite question, je n'arrive plus à travailler en mode fractionné (code et creation sous dreamweaver, et une favicon d'opéra apparait pour ma page index, saurais-tu m'expliquer tout ça;-)
Allez je te remercie d'avance pour ton aide, et si je peux te rendre un service en échange n'hésite pas à demander....
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
>
SG40
25 févr. 2010 à 12:19
25 févr. 2010 à 12:19
Tu pourrais me repasser le code ?
Une favicon d'Opera ?? À la place de ton favicon ou directement sur la page ?
Une favicon d'Opera ?? À la place de ton favicon ou directement sur la page ?
sg 40
>
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
25 févr. 2010 à 12:34
25 févr. 2010 à 12:34
la favicon apparaît dans la barre d'adresse lors de l'aperçu sous safari, moi je n'ai pas encore mis la mienne....
tiens pour le code :
- 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>Deamouv</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
<link href="styles/monstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="menu">
<ul>
<li class="acceuil"><a href="index.html"><img scr="IMG_TRANSP" alt="Acceuil"></a></li>
<li class="services"><a href="index.html"><img scr="IMG_TRANSP" alt="Services"></a></li>
<li class="actus"><a href="index.html"><img scr="IMG_TRANSP" alt="Actus"></a></li>
<li class="photos"><a href="index.html"><img scr="IMG_TRANSP" alt="Photos"></a></li>
<li class="contact"><a href="index.html"><img scr="IMG_TRANSP" alt="Contact"></a></li>
</ul>
</div> <!-- FIN DIV "menu" -->
<div id="corps">on, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça
La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte.
En effet, nous allons voir successivement dans ce chapitre :
Comment rédiger des paragraphes
La façon dont fonctionnent les titres
Comment donner de l'importance à certains mots de son texte
Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour.
Motivés ? Allez, vous allez voir c'est pas compliqué
on, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte. En effet, nous allons voir successivement dans ce chapitre : Comment rédiger des paragraphes La façon dont fonctionnent les titres Comment donner de l'importance à certains mots de son texte Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour. Motivés ? Allez, vous allez voir c'est pas compliqué
</div> <!-- FIN DIV "corps" -->
<div id="footer">
Nawak Copyright - Tous droits réservés © 2008-2009
</div> <!-- FIN DIV "footer" -->
</div> <!-- FIN DIV "conteneur" -->
</body>
</html>
- pour le css avec les border à mes div.
@charset "UTF-8";
/* CSS Document */
body
{
background-color: #fffff;
}
#header
{
background-image: url("../images/header.jpg");
width: 876px;
height: 185px;
border: 1px solid blue;
}
#corps
{
background-image: url("../images/corps.jpg");
background-repeat: repeat-y;
width: 816px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
text-align:justify;
}
#footer
{
background-image: url("../images/footer.jpg");
width: 876px;
height: 81px;
border: 1px solid red;
text-align:center;
font-size: 12px;
color:#0000CC;
padding-top: 20px;
}
#conteneur
{
margin: auto;
margin: auto;
width: 876px;
border: 1px solid blue;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
voici tout ce qui concerne le menu */
#menu
{
background-image: url("../images/menu.jpg");
width: 876px;
height: 127px;
border:1px solid red;
text-align:center;
font-size: 16px;
padding-top: 0;
padding-left: 0;
}
#menu ul
{
margin-top: 0px;
padding-left: 0px;
}
#menu ul li
{
/* ici, les "li" seront mis cote à cote. Ceci grace au "float" et à la largeur fixe. */
width: 115px;
height: 64px;
float: left;
list-style-type: none;
}
#menu ul li.acceuil
{
background: url(../images/accueil.png) no-repeat top left;
}
#menu ul li.services
{
background: url(../images/services.png) no-repeat top left;
}
#menu ul li.actus
{
background: url(../images/actus.png) no-repeat top left;
}
#menu ul li.photos
{
background: url(../images/photos.png) no-repeat top left;
}
#menu ul li.contact
{
background: url(../images/contact.png) no-repeat top left;
}
#menu ul li.acceuil:hover
{
background: url(../images/accueilvol.png) no-repeat top left;
}
#menu ul li.services:hover
{
background: url(../images/servicesvol.png) no-repeat top left;
}
#menu ul li.actus:hover
{
background: url(../images/actusvol.png) no-repeat top left;
}
#menu ul li.photos:hover
{
background: url(../images/photosvol.png) no-repeat top left;
}
#menu ul li.contact:hover
{
background: url(../images/contactvol.png) no-repeat top left;
}
#menu a
{
color: red;
display: block;
width: 115px;
height: 64px;
text-decoration: none;
/* ci dessous, les marges ne sont plus nescéssaire : mieux vaut appliquer une marge sur le "#menu" */
/* si c'est pour séparrer chaque bouton par une marge, appliques un "margin" sur les "#menu li" */
/* margin-left: 10px;
margin-right: 10px;*/
line-height: 64px;
vertical-align: middle;
}
#menu a:hover
{
text-decoration: underline;
}
#menu li a img
{
border: none;
}
merci :- )
tiens pour le code :
- 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>Deamouv</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
<link href="styles/monstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="menu">
<ul>
<li class="acceuil"><a href="index.html"><img scr="IMG_TRANSP" alt="Acceuil"></a></li>
<li class="services"><a href="index.html"><img scr="IMG_TRANSP" alt="Services"></a></li>
<li class="actus"><a href="index.html"><img scr="IMG_TRANSP" alt="Actus"></a></li>
<li class="photos"><a href="index.html"><img scr="IMG_TRANSP" alt="Photos"></a></li>
<li class="contact"><a href="index.html"><img scr="IMG_TRANSP" alt="Contact"></a></li>
</ul>
</div> <!-- FIN DIV "menu" -->
<div id="corps">on, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça
La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte.
En effet, nous allons voir successivement dans ce chapitre :
Comment rédiger des paragraphes
La façon dont fonctionnent les titres
Comment donner de l'importance à certains mots de son texte
Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour.
Motivés ? Allez, vous allez voir c'est pas compliqué
on, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte. En effet, nous allons voir successivement dans ce chapitre : Comment rédiger des paragraphes La façon dont fonctionnent les titres Comment donner de l'importance à certains mots de son texte Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour. Motivés ? Allez, vous allez voir c'est pas compliqué
</div> <!-- FIN DIV "corps" -->
<div id="footer">
Nawak Copyright - Tous droits réservés © 2008-2009
</div> <!-- FIN DIV "footer" -->
</div> <!-- FIN DIV "conteneur" -->
</body>
</html>
- pour le css avec les border à mes div.
@charset "UTF-8";
/* CSS Document */
body
{
background-color: #fffff;
}
#header
{
background-image: url("../images/header.jpg");
width: 876px;
height: 185px;
border: 1px solid blue;
}
#corps
{
background-image: url("../images/corps.jpg");
background-repeat: repeat-y;
width: 816px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
text-align:justify;
}
#footer
{
background-image: url("../images/footer.jpg");
width: 876px;
height: 81px;
border: 1px solid red;
text-align:center;
font-size: 12px;
color:#0000CC;
padding-top: 20px;
}
#conteneur
{
margin: auto;
margin: auto;
width: 876px;
border: 1px solid blue;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
voici tout ce qui concerne le menu */
#menu
{
background-image: url("../images/menu.jpg");
width: 876px;
height: 127px;
border:1px solid red;
text-align:center;
font-size: 16px;
padding-top: 0;
padding-left: 0;
}
#menu ul
{
margin-top: 0px;
padding-left: 0px;
}
#menu ul li
{
/* ici, les "li" seront mis cote à cote. Ceci grace au "float" et à la largeur fixe. */
width: 115px;
height: 64px;
float: left;
list-style-type: none;
}
#menu ul li.acceuil
{
background: url(../images/accueil.png) no-repeat top left;
}
#menu ul li.services
{
background: url(../images/services.png) no-repeat top left;
}
#menu ul li.actus
{
background: url(../images/actus.png) no-repeat top left;
}
#menu ul li.photos
{
background: url(../images/photos.png) no-repeat top left;
}
#menu ul li.contact
{
background: url(../images/contact.png) no-repeat top left;
}
#menu ul li.acceuil:hover
{
background: url(../images/accueilvol.png) no-repeat top left;
}
#menu ul li.services:hover
{
background: url(../images/servicesvol.png) no-repeat top left;
}
#menu ul li.actus:hover
{
background: url(../images/actusvol.png) no-repeat top left;
}
#menu ul li.photos:hover
{
background: url(../images/photosvol.png) no-repeat top left;
}
#menu ul li.contact:hover
{
background: url(../images/contactvol.png) no-repeat top left;
}
#menu a
{
color: red;
display: block;
width: 115px;
height: 64px;
text-decoration: none;
/* ci dessous, les marges ne sont plus nescéssaire : mieux vaut appliquer une marge sur le "#menu" */
/* si c'est pour séparrer chaque bouton par une marge, appliques un "margin" sur les "#menu li" */
/* margin-left: 10px;
margin-right: 10px;*/
line-height: 64px;
vertical-align: middle;
}
#menu a:hover
{
text-decoration: underline;
}
#menu li a img
{
border: none;
}
merci :- )
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
>
sg 40
25 févr. 2010 à 14:29
25 févr. 2010 à 14:29
oO Voilà qui est pour le moins déconcertant…
J'ai repéré une petit erreur au début : dans le "body" (du css) : c'est "background-color: #ffffff;" avec 6 "f". Il en manquait un, mais ça ne résout pas le problème. Le code est sans erreurs sinon…
J'ai trouvé la nature du problème. À la place des bordures temporaires, j'ai mis des couleurs de fond. On voit donc que c'est le menu qui est décalé par rapport au header. Une espace se crée entre les deux (une marge extérieur donc). Le problème apparaît avec Firefox et Chrome, mais pas avec Opera.
J'ai une solution, assez "bourrin", mais tout à fait « légale » : il s'agit de déclarer au début de la feuille de style un "css reset".
Il faut savoir que chaque navigateur associe des css par défaut à chaque élément. Par exemple, les liens dans une page web sont en bleu. C'est le cas "par défaut". Si tu veux les mettre en rouge, tu dois les déclarer en rouge (color: red;).
Outre les liens, chaque élément est ainsi stylisé par des css, et notamment au moyen de marges (padding et margin).
Chaque navigateur utilise ses propres marges ce qui lors d'un desing est assez ennuyeux pour un positionnement « au pixel près » (crois-moi :D).
Du coup, ce que la plus part des designers font, c'est créer un "css reset". Il s'agit tout simplement de mettre un tout petit code css qui déclare des bordures et des marges nulles à tous les éléments, comme ceci :
Juste un truc : ce code là (le reset que j'ai présenté là) est déprécié par le W3C (l'organisation des standards du web).
Il préfèrent (à juste titre) de ne pas utiliser les "*" mais de déclarer chaque élément à la place. On mettra donc plutôt :
Et voilà les fichiers : http://www.cijoint.fr/cjlink.php?file=cj201002/cijtFDgdBs.zip
J'ai repéré une petit erreur au début : dans le "body" (du css) : c'est "background-color: #ffffff;" avec 6 "f". Il en manquait un, mais ça ne résout pas le problème. Le code est sans erreurs sinon…
J'ai trouvé la nature du problème. À la place des bordures temporaires, j'ai mis des couleurs de fond. On voit donc que c'est le menu qui est décalé par rapport au header. Une espace se crée entre les deux (une marge extérieur donc). Le problème apparaît avec Firefox et Chrome, mais pas avec Opera.
J'ai une solution, assez "bourrin", mais tout à fait « légale » : il s'agit de déclarer au début de la feuille de style un "css reset".
Il faut savoir que chaque navigateur associe des css par défaut à chaque élément. Par exemple, les liens dans une page web sont en bleu. C'est le cas "par défaut". Si tu veux les mettre en rouge, tu dois les déclarer en rouge (color: red;).
Outre les liens, chaque élément est ainsi stylisé par des css, et notamment au moyen de marges (padding et margin).
Chaque navigateur utilise ses propres marges ce qui lors d'un desing est assez ennuyeux pour un positionnement « au pixel près » (crois-moi :D).
Du coup, ce que la plus part des designers font, c'est créer un "css reset". Il s'agit tout simplement de mettre un tout petit code css qui déclare des bordures et des marges nulles à tous les éléments, comme ceci :
* {
border: none;
margin: 0;
padding: 0;
outline: 0;
}L'élement "*" signifie tous les élements. Bien sûr, le fait de tout mettre à zéro, ne nous empêche pas de déclarer par exemple une bordure ou une marge plus loin dans le CSS. Ceci est le "reset" : il met tout à zéro avant de commencer la construction.
Juste un truc : ce code là (le reset que j'ai présenté là) est déprécié par le W3C (l'organisation des standards du web).
Il préfèrent (à juste titre) de ne pas utiliser les "*" mais de déclarer chaque élément à la place. On mettra donc plutôt :
html, body, div, a, p, b, i, table, tr, td, input, object, ul, ol, li, img, h1, h2, h3, h4, h5, h6, a, span {
border: none;
margin: 0;
padding: 0;
outline: 0;
}Cela revient au même, mais disons que « c'est mieux ». Voilà ! Avec ça, la marge a disparue !
Et voilà les fichiers : http://www.cijoint.fr/cjlink.php?file=cj201002/cijtFDgdBs.zip
SG40
>
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
25 févr. 2010 à 19:34
25 févr. 2010 à 19:34
je te tire mon chapeau, tu me sort une belle épine du pied merci infiniment, c'est dommage que je puisse pas de rendre la pareil étant donné mon niveau, mais je vais bosser et ptète qu'un jour....
SG40
Messages postés
6
Date d'inscription
mardi 23 février 2010
Statut
Membre
Dernière intervention
23 février 2010
23 févr. 2010 à 15:49
23 févr. 2010 à 15:49
mille merci pour ton aide, je teste ça de suite, mais je sais déjà que ça va marcher nickel,
un hollandais volant au secours d'un landais en chute libre, comme la vie est bien faite...
un hollandais volant au secours d'un landais en chute libre, comme la vie est bien faite...
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 févr. 2010 à 15:56
23 févr. 2010 à 15:56
;-)
C'est un plaisir pour moi^^
Bonne continuation :-)
C'est un plaisir pour moi^^
Bonne continuation :-)
