Bonjour, je vous remercie de lire mon message, je suis en train de crée un site internet, pour une mini-entreprise dans le cadre scolaire (c’est pour cela qu’il y a des parenthèses écris noms de l’entreprise ou autre).
J’ai deux problèmes dont je ne comprends pas la cause, j’ai beaucoup de page donc je vous conseille d’aller sur l’url pour mieux comprendre: http://mesitou.fr/
Mon premier problème est que quand je clique sur le bouton "notre équipe" l’espace entre le bouton "accueil" et le "notre équipe" augmente. Si nous revenons sur la page accueil, l’espace se rétrécie.
J’aimerais que la taille ne change pas, le problème n’arrive que sur cette page (accueil) toutes les autres pages on le même écartement.
Mon deuxième problème est que certains liens hypertextes ne fonctionnent pas, je ne sais pas pourquoi ?
J’utilise du php, si cela peut poser problème, il n’est pas très utile donc je peux le supprimer si nécessaire.
(Pour avoir le code, vous pouvez sur l’url http://mesitou.fr/ clic droit, afficher code source de la page et pour le css, clic droit, inspecter, sources, format.css)
Merci de votre réponse.
Voici au cas-ou le code css
/* Navigation PC */
#navig
{
margin:0;
padding:0;
list-style-type:none;
background:rgba(0,32,96,0); /* modifier le fond 1 rgb(x,x,x,x) par (voir document), cela modifiera le bleu foncée sur le site */
float:left;
width:19%;
/*border:1px solid rgb(0,32,96,0.2); /* mettre la même couleur que fond 1 */
border-width:1px 1px;
}
#navig li
{
display:inline;
padding:0;
margin:0;
font-size: 1.35em;
}
#navig a:link, #navig a:visited
{
color: white; /* modifier la couleur du texte */
/*background: rgba(0,32,96,0.5); /* mettre la même couleur que fond 1 */
padding: 7px 21px 7px 10px;
float:left;
width:auto;
/*border-right:1px solid rgba(0,32,96,0.2); /* mettre la même couleur que fond 1 */
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#navig li:first-child a
{
/*border-left:1.5px solid rgb(0,32,96,0.2); /* mettre la même couleur que fond 1 */
}
#navig a:hover
{
color:#fff;
background:rgba(0,50,150,0.5); /* mettre la couleur du fond 2, cela modifiera la couleur du fond en bleu plus claire mais pas encore bleu ciel */
}
#accueil #navig-accueil a, #equipe #navig-equipe a, #produit #navig-produit a, #parcour #navig-parcour a
{
background:rgba(0,115,150,0.5); /* mettre la couleur du fond 3, cela modifiera la couleur du fond en bleu ciel très claire */
color:#fff;
text-shadow:none;
}
#accueil #navig-accueil a:hover, #equipe #navig-equipe a:hover, #produit #navig-produit a:hover, #parcour #navig-parcour a:hover
{
background:rgb(0,115,150,0.75); /* mettre la même couleur que fond 3 */
}
#navig a:active
{
background:rgb(0,115,150,0.75); /* mettre la même couleur que fond 3 */
color:#fff;
}
#nav
{
position: fixed;
width: 100%;
height: 100px;
top: 250px;
bottom: 0px;
}
.menu
{
float:left;
background-color:rgba(0,32,96,0.75); /* mettre la même couleur que fond 1 */
height:754px ;
width:18% ;
text-align: center;
top: 0px;
}
/* Fin Navigation PC */
/*#tel-menu a
{
background-color: white;
border: none;
color: black;
padding: 1px 320px;
text-decoration: none;
display: inline-block;
font-size: 10px;
}
*/
#tel-menu a, #bars{
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
padding:1px 2px;
text-decoration:none;
}
/*#tel-menu a:hover, #bars a:hover{
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}*/
#tel-menu a:active, #bars a:active{
position:relative;
top:1px;
}
#tel-menu
{
width:125px ;
height: 100%;
float:left;
z-index: 2;
position:relative;
}
#hidden_1, #hidden_2, #hidden_3, #hidden_4, #hidden_tel_1, #hidden_tel_2, #hidden_tel_3, #hidden_tel_4, #hidden_tel_5, #hidden_tel_6, #hidden_tel_7
{
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: space-around;
}
@media all and (max-width: 1425px)
{
#none_1, #none_2, #none_3, #hidden_1, #hidden_2, #hidden_3, #hidden_4
{
display: none;
}
}
@media all and (max-width: 1200px)
{
.logo
{
display: none;
}
#nav
{
top: 10px;
}
}
#bars, #tel-menu
{
display:none;
}
@media all and (max-width: 1011px)
{
.menu
{
display: none;
}
#bars, #tel-menu
{
display: inline;
}
}
Avant d'aller plus loin, corrige toutes les erreurs HTML. Le W3C est la pour t'aider. Il y en a environ 60 rien que sur la première page. Donc la je me dis qu'il y a déjà un souci. Tu mélange le CSS et HTML alors que tu as fais des pages en CSS. Pourquoi ne pas tout mettre dans tes pages CSS
Precision la balise <hidden> n'existe pas. Il faut la remplacer par une <div>. J'arrete la car il y a vraiment trop d'erreur
Test fais avec Chrome et internet Explorer, l'espacement entre les liens de ton menu est le même quand on passe d'une page a une autre.
Par contre, pourquoi tous ces <br /> les uns a la suite des autres. Le <br /> sert juste à aller à la ligne. Si tu veux faire un paragraphe utilise la balise <p>.
Pourquoi 2 body différents dans format.css et bg.css
Pourquoi 4 css différents pour le <li id="navig...>. Je pense que si tu utilises le même pour tes 4 menus, ca doit le faire ou alors j'ai pas compris la subtilité :-)
tu mets aussi encore du css dans ton html dans la div id="nav-menu". Déplace ce css dans ta feuille format. C'est pas que c'est pas juste mais c'est quand même plus propre
Quels sont les liens qui ne fonctionnent pas car chez moi ils fonctionnent :-)
Test fais avec Chrome et internet Explorer, l'espacement entre les liens de ton menu est le même quand on passe d'une page a une autre.
Par contre, pourquoi tous ces <br /> les uns a la suite des autres. Le <br /> sert juste à aller à la ligne. Si tu veux faire un paragraphe utilise la balise <p>.
Pourquoi 2 body différents dans format.css et bg.css
Pourquoi 4 css différents pour le <li id="navig...>. Je pense que si tu utilises le même pour tes 4 menus, ca doit le faire ou alors j'ai pas compris la subtilité :-)
tu mets aussi encore du css dans ton html dans la div id="nav-menu". Déplace ce css dans ta feuille format. C'est pas que c'est pas juste mais c'est quand même plus propre
Quels sont les liens qui ne fonctionnent pas car chez moi ils fonctionnent :-)
Pour le problème d’espacement, j'ai réussi a le résoudre
Pour les <br /> mit à la suite
<br /><br /><br /><br /><br /><br /><br /><br />
<div class="evenement">
<h3> Évènement : </h3>
<p>
Rejoignez nous au marché de noël le <strong> vendredi 13 décembre</strong> dans notre <a href="https://www.google.fr/maps/place/54+Rue+de+Marzelles,+27200+Vernon/@49.0864746,1.4552578,17z/data=!3m1!4b1!4m5!3m4!1s0x47e6cbbb9f74cdb3:0xe8e9c6684776d52a!8m2!3d49.0864711!4d1.4574465">collège</a><br />
afin de récolter des fonds pour notre mini-entreprise
</p>
</div>
</div><br /><br /><br /><br />
<div id="img_tel">
<br /><a href="images/max/equipe_home_max.jpg"><img src="images/equipe_home.jpg" alt="Photo de notre équipe" title="Cliquez pour agrandir" /></a><br />
<br /><a href="images/max/produit_home_max.jpg"><img src="images/produit_home.jpg" alt="(Nom du produit)" title="Cliquez pour agrandir" /></a> <!-- Modifier la parenthèse -->
</div>
Il serve a mettre des espacement entre des blocs, si tu as une solution, je suis preneur
Pour les deux body, je les ai fusionner pour avoir un seul body
Pour les 4 css différents il servent a détécter quelle page on est (je dirait comme une "forme de condition")
J'ai enlever le css dans ma feuille nav comme demander
L'instagram et le facebook (de la page d'accueil sur pc/contacter sur téléphone) et l'email (de la page produit sur pc/contacter) qui est clickable mais que dans un coins, (je ne m'explique pas du tout ce bug)
Merci du temps que tu utilise pour m'améliorer/ améliorer le site
>> Il serve a mettre des espacement entre des blocs, si tu as une solution, je suis preneur
NON, ce n'est pas le rôle de la balise <br>. Le <br> crée un retour ligne dans une portion de texte, point. Il ne sert nullement à créer des espacement entre les blocks pour cela vous avez les margin et padding en CSS (ou flexbox)
Il reste les <br />en début de code Notre mail ... fais plutôt des paragraphes avec des balises <p> et </p>
Je pense que l'affichage de tes liens instagram, facebook ... ne se fais pas car tu utilises les medias queries. Et si j'ai bien vu, tu ne fais rien pour les écran au dessus de 1311 px
@media all and (max-width: 1311px)
Moi qui est un écran de 1920 px, ben ca ne marche pas
Bonjour, j'ai enlever encore des <br />, pour l'endroit où il faut ajoutez des paragraphes, je ne vois pas ou il faut les mettre, pour les media queries, je ne vois pas ce que je dois faire en ajoutant une media queries
Essai ce code et tu va voir pas toi même que pour un écran ca ne fonctionne pas
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1311px */
@media all and (max-width: 1311px)
{
body{bakground-color:yellow;}
}
/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 2000px)
{
Body {background-color:red;}
}
Adapte les media queries en fonction de ton écran.
Mais tu l'as pas mis en ligne ce code pour tester.
Un autre conseil, enlève les positions relative, absolute, fixed ... si il y a. C'est un peu casse gueule à la présentation si tu ne les mets pas comme il faut. Utilise plutot la balise float ou flex pour positionner tes div. C'est beaucoup plus facile et au moins pas d'erreur
Bonjour, je viens de regarder en petite résolution et effectivement il y a un problème, pour le découvrir utilise l'inspecteur des éléments (F12 pour la plupart des navigateur)
Clic droit sur les liens qui ne fonctionnent pas puis examiner l'élément. Dans l'inspecteur qui s'ouvre tu vois que un élément recouvre tes liens. C'est <section id="section" class="section_tel">
Dans format.css L200 tu indiques pour .section_tel une position absolute pourquoi? Supprime les positions absolute ce n'est pas une technique de positionnement des éléments surtout si il n'y à aucun élément référent c'est à dire un parent ou ancêtre en position relative.
Bonjour, merci pour cette très grande aide, j'ai réussi a réglée le problème des lien hypertex, j'ai juste un dernier problème (enfin je l'espère), pour ma barre de navigation, j'utiliser une technique moche (utiliser des lettres en invisible pour avoir un background de la bonne taille)
J'aimerai supprimer ses suites de lettre (qui servent a avoir un background de la bonne taille)
Si vous avez une idée, je suis preneur, après pas besoin de cherchez pendant très longtemps car cela fonctionne très bien mais j'aimerai m'améliorer et trouver un moyen de faire cela (si ce n'est pas possible, dite le moi car je renderai clos le sujet).
J'ai dû utiliser des z-index et donc des position:relative;
Bonjour, effectivement je me demandais pourquoi ce truc bizarre.
Cela dépend ou tu places ton background. Le principe général est de changer le display du lien pour le passer en block de sorte qu'il prenne toute la place de son parent.
Dans nav.css L105 #menu-tel a, #bars pourquoi les liens sont en display: inline-block? tu souhaites qu'il soit l'un à coté de l'autre ou l'un en dessous de l'autre? Passe en display: block. (le style du cursor est inutile les liens on par défaut cette propriété).
Pour l'autre menu #navig pour quelles raison un display: inline; sur le #navig li ? (L16) Ne change pas le display du li si tu souhaites le item les un en dessous des autres.
C'est un bordel ta navigation!!!! Il y a des flotants, des changements de display sans trop savoir pourquoi??
Un truc pour voir tes éléments plus facilement est de leurs donner provisoirement une couleur de font ou une bordure de couleur;
Voici une tentative de solution : (j'ai commenté le code )
Utilise de préférence des class et laisse le identifiants pour les ancres et le javascript. ( J'ai réduis le poids d'un selecteur ciblant les liens puisque l'ID parent n'étais pas présent dans ma page de test. )
J'ai fais ce que tu m'a conseiller, j'ai utiliser des class au lieu des id, juste, la sorte de condition que j'avais crée ne fonctionne plus aurait tu une idées comment faire ?
Une sorte de condition? je ne vois pas de quoi tu parles. Mis à part les @media je ne vois pas de condition....
J'ai l'impression que nav.css s'est épurée, c'est pas mal je trouve.
Le width: 100% sur les lien est inutile comme dans la plupart des cas (en block) .
J'ai vu ce sélecteur à rallonge
.li-accueil a, .li-equipe a, .li-produit a, .li-parcour a, .li-acheter a, .li-contacter a, .li-evenement a {}
Supposons que tu ajoutes une page à ton site et de facto un item à ton menu.php (j'imagine que tu utilises les include en php) tu vas devoir également modifier ta CSS? Ce n'est pas tout à fait comme cela que l'on procède, la feuille de style doit être conçue peut importe le nombre de page. Si tu ajoutes du contenu qui ne nécessite pas un nouveau style, tu ne dois pas toucher au CSS.
Tu as eu la bonne idée de préfixé tes class spécifique par un "li-" c'est une bonne pratique. Tu vas pouvoir utiliser les sélecteurs d'attribut pour cibler toutes tes class commencent par "li-", cela s'écrit comme ceci :
[class^="li-"] a { }
Cela est plus court à écrire et cela fait le même taf, on utilise au maximum la séparation du style et de la structure des fichiers
Garde sous le coude ce lien qui te servira tout au long de tes développements
Bonjour, je m'occuperai de cela demain, mais j'ai plusieur question :
- Premièrement je ne répond plus a la question du titre de mon sujet, cela ne nuit pas au forum pour que les personnes qui cherche la réponse de ce que je demande depuis hier ne répond plus du tout au sujet, vaudrait-il pas mieux fermée le sujet et en relancé un ?
- Deuxio, je n'ai pas bien compris la partis de code que tu ma envoyer ([class^="li-"] a { }) pourais tu m'écrire dans la feuille css car je me sent bête mais je n'ai pas très bien compris
- Tercio (ce n'est pas une quesiton mais), ma sorte de condition qui n'est pas du tout une condition en réalitée est que je définis la couleur du body (<body id="accueil">) quand on est sur la page et j'avais une seul ligne de css.
Je veux que quand on est sur la page exemple mettre en bleu quand on est sur l'onglet accueil
(Désolé, s'il y a des fautes, je n'ai pas pris le temps de me relire)
EDIT : J'ai compris pour le Deuxio, et voici le code de ma sorte de condition :
> Deuxio, je n'ai pas bien compris la partis de code que tu ma envoyer ([class^="li-"] a { }) pourais tu m'écrire dans la feuille css car je me sent bête mais je n'ai pas très bien compris
Ma sorte de condition qui n'est pas du tout une condition en réalitée est que je définis la couleur du body (<body id="accueil">) quand on est sur la page et j'avais une seul ligne de css.
Bonjour, Oups j’avais zappé ce sujet, vous faite bien de relancer.
Sytorex a écrit:
- Premièrement je ne répond plus a la question du titre de mon sujet, cela ne nuit pas au forum pour que les personnes qui cherche la réponse de ce que je demande depuis hier ne répond plus du tout au sujet, vaudrait-il pas mieux fermée le sujet et en relancé un ?
Normalement c’est un sujet par problématique. Ici je trouve que l’on n’a pas trop dévié du sujet. On reste toujours sur la problématique de l’affichage des liens.
EDIT : J'ai compris pour le Deuxio, et voici le code de ma sorte de condition :
Ma sorte de condition qui n'est pas du tout une condition en réalitée est que je définis la couleur du body (<body id="accueil">) quand on est sur la page et j'avais une seul ligne de css.
Par contre je ne comprends pas bien quand tu parles du body. Que souhaites tu faires en fonctions du changement de page? Une class différente pour le body sur chaque page peut être? Pourrais tu explicités mieux ton souhais. Merci
Par contre je ne comprends pas bien quand tu parles du body. Que souhaites tu faires en fonctions du changement de page? Une class différente pour le body sur chaque page peut être? Pourrais tu explicités mieux ton souhais. Merci
Bonjours, pour ma barre de navigation, j’avais utilisé ce site, qui m’a beaucoup aidée : https://css.developpez.com/tutoriels/liste-navigation/#LIII, si tu peux aller à la dernière étape, je pense que tu comprendras ce que je veux faire, quand j’avais commencé mon site, j’avais copié collé le code que j’ai modifié mais normalement on s’y retrouve.
PS : je suis désolé des incompréhensions (et des problèmes d’orthographe) je suis dyspraxique (je sais comme dirait mon frère : je me cache derrière mes problèmes).
D'accord. C'est en fait ce que j'avais compris en lisant le code que tu as rajouté lors de ton édit. C'est en lisant ton explication en français que c'était moins claire pour moi, mais en fait c'est la même chose : avoir un style différent pour le lien du menu quand on se trouve sur la page courante.
J'ai l'impression que ce tuto ne donne qu'une solution pour des sites statiques (le tuto date de 2008 -2005 article d'origine). Tu peux faire comme ce tuto indiques mais il y à des inconvénients si ton site évolue. Comme tu utilises des fichiers .php et non des fichiers .html sur ton site c'est autant profiter de la puissance de PHP coté serveur pour faire les conditions.
INCONVÉNIENT : Tu réalises ton site aujourd'hui, tu connais le nombre de page qu'il te faut, dans 6 mois il y a nécessité d'ajouter du contenu 2 pages supplémentaires. Que faire? Un copier/coller des parties commune et modifier la CSS en fonction des pages ajoutés? Non, cela est du travail inutile. PHP te donne la possibilité de créer des conditions coter serveur et renvoyer de l’ HTML en fonction de ses conditions. En réalisant ce que j'indique aujourd'hui comme code, tu t'épargnes la modification du CSS à l'ajout de nouvelle page. C'est ce que je recommande.
Si toutefois tu désires suivre ce tuto à la lettre, effectivement il faut une class (une class possède un poids inférieur à un identifiant) spécifique sur le body pour chaque page de manière à identifier la page courante et indiquer un style particulier pour un lien dans cette page.
Ce qui donne
.equipe .nav-equipe a {
/* style du lien pour la page équipe */
}
Idem pour toute les pages.
Tu adoptes la solution qui te parais le mieux pour ton projet en fonction de tes capacités. Si tu as des difficultés, je réexpliques en fonction de ton choix de techno.
Donc je reprends le code que tu m'as envoyé il y a 1 heure ?.
Oui, tu as bien un fichier .php qui reprends le menu (que j'ai appelé menu.php plus haut) et qui est inclut dans toutes tes pages. (juste pour m'assurer de la structure de tes fichiers.)
Il faut également que tu comprennes le code, si c'est pour faire un copier/coller c'est pas très intéressant.
>> il ne faut pas crée un dossier styles pour le css ?
Si ce serait bien.
>> et il y a d'autre chose à faire car j'ai vu pour le MVC
Si tu as vu pour le MVC alors tu as vu que l'architecture n'est pas du tout la même. A toi de voir si tu adoptes l’architecture MVC dans ce projet (auquel cas il y a beaucoup à modifier) ou si tu gardes cette structure.
>> j'utilise un include navigation.php comme tu peux le deviner
Comme c'est un fichier inclut et non une page compète, je te recommande de l'indiquer dans le nom du fichier ou son emplacement. Soit (l'un ou l'autre)
J'ai crée un dossier pour le styles et pour l'include, pour le MVC, j'ai lu le cour, mais je ne vois pas ce que je dois séparer. Après j'ai regardé sans trop de détaille donc il faut que j'approfondie s'il le faut
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
arf !!!
arf !!!
arf !!!
arf !!!
arf !!!
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...