28173 sujets

CSS et mise en forme, CSS3

Eh bien, voilà cela commence. J'ai cherché (selon le titre) sur le forum une réponse à mon interrogation, mais je n'ai pas trouvé.
Smiley rolleyes . Dans un des exemples de menus déroulants, je voulais renommer la feuille de style "text.css" en "menu.css" pour ma facilié. J'ai donc renommé et dans la page HTML, renommé l'appel à text.css en menu.css.
Hélas cela ne fonctionne plus correctement Smiley fache , l'affichage ne se faisant pas correctement. Quelque chose m'échappe. Faut dire que je suis débutant de chez les débutants! Smiley confused
Quelqu'un peut m'aider ? Smiley smile
Modifié par JPVDCG (30 Jan 2007 - 10:39)
Bonjour à toi aussi...

Et bien une fois que tu as changé le nom de ton fichier, il faut modifier ce nom aussi dans le fichier qui l'appelle, à savoir ta page html. Pour cela au début de ton code entre les balises <head> tu dois avoir une ligne du style de ce genre :
<link type="text/css" rel="stylesheet" href="/styles.css" />

A toi de remplacer le nom de la feuille de style par celui que tu as donné au fichier.
Bonjour,
il semble qu'il l'ait également fait dans la page:
a écrit :
J'ai donc renommé et dans la page HTML, renommé l'appel à text.css en menu.css.
.
Peut-être une histoire de cache ou une erreur de frappe ?
mich a écrit :
Bonjour,
il semble qu'il l'ait également fait dans la page:
J'ai donc renommé et dans la page HTML, renommé l'appel à text.css en menu.css.
.
Peut-être une histoire de cache ou une erreur de frappe ?
Moi je pense surtout qu'il y a un oubli quelque part. Smiley murf
(du style le nom de fichier par exemple qui est resté text.css)
Mais bon, avec le bout de code concerné, ce serait mieux... Smiley rolleyes
Car sinon, on a pas finis de faire des hypothèses. Smiley sweatdrop
Mikachu a écrit :
Bonjour à toi aussi...

Et bien une fois que tu as changé le nom de ton fichier, il faut modifier ce nom aussi dans le fichier qui l'appelle, à savoir ta page html. Pour cela au début de ton code entre les balises <head> tu dois avoir une ligne du style de ce genre :
<link type="text/css" rel="stylesheet" href="/styles.css" />

A toi de remplacer le nom de la feuille de style par celui que tu as donné au fichier.

Merci pour ta réponse on ne peu plus rapide, Smiley ravi ,hélas, Smiley rolleyes , je n'ai pas de ligne de ce style. Je peux t'envoyer le code de la page si tu le souhaite, pour voir ce qu'il en est .... Smiley confus
Cygnus a écrit :
.
Peut-être une histoire de cache ou une erreur de frappe ?

Moi je pense surtout qu'il y a un oubli quelque part. Smiley murf
(du style le nom de fichier par exemple qui est resté text.css)
Mais bon, avec le bout de code concerné, ce serait mieux... Smiley rolleyes
Car sinon, on a pas finis de faire des hypothèses. Smiley sweatdrop
Merci, voici le code, voir ligne 18 et 19 (j'ai déjà modifié un peu la présentation du menu - cela devrait me servir pour introduire un nouveau menu sur mon site):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Menu d&eacute;roulant horizontal</title>
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type" />
  <script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
  </script>
  <style type="menu/css">
<!-- /* c'est ce qui précède qui était text/css que j'ai changé */
<!-- /* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; }
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
  </style>
</head>
<body>
<div id="menu">
<dl>
  <dt onmouseover="javascript:montre();"><a
 title="Retour &agrave; l'accueil" href="">Accueil</a></dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
  <dd id="smenu1">
    <ul>
      <li><a href="#">Sous-Menu 1.1</a></li>
      <li><a href="#">Sous-Menu 1.2</a></li>
      <li><a href="#">Sous-Menu 1.3</a></li>
      <li><a href="#">Sous-Menu 1.4</a></li>
      <li><a href="#">Sous-Menu 1.5</a></li>
      <li><a href="#">Sous-Menu 1.6</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre();"><a href="">Menu
2</a></dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
  <dd id="smenu3">
    <ul>
      <li><a href="#">Sous-Menu 3.1</a></li>
      <li><a href="#">Sous-Menu 3.2</a></li>
      <li><a href="#">Sous-Menu 3.3</a></li>
      <li><a href="#">Sous-Menu 3.4</a></li>
      <li><a href="#">Sous-Menu 3.5</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
  <dd id="smenu4">
    <ul>
      <li><a href="#">Sous-Menu 4.1</a></li>
      <li><a href="#">Sous-Menu 4.2</a></li>
      <li><a href="#">Sous-Menu 4.3</a></li>
    </ul>
  </dd>
</dl>
</div>
<div id="site">
<h1></h1>
<p></p>
<p></p>
</div>
<div class="mentions">Rapha&euml;l GOETTER<br />
<a href="http://www.alsacreations.com">Alsacr&eacute;ations</a><br />
<a href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour</a></div>
</body>
</html>

Modifié par JPVDCG (23 Jan 2007 - 11:15)
@JPVDCG : Merci de respecter les règles du forum, que tu t'es engagé à suivre en t'inscrivant, en particulier la règle 13 qui te demande d'encadrer les sections de code avec les balises [ code] et [ /code]. Il te suffit d'éditer ton message pour régler ce problème.
Julien Royer a écrit :
@JPVDCG : Merci de respecter les règles du forum, que tu t'es engagé à suivre en t'inscrivant, en particulier la règle 13 qui te demande d'encadrer les sections de code avec les balises [ code] et [ /code]. Il te suffit d'éditer ton message pour régler ce problème.

C'est fait, merci de me faire la remarque. Je ferai attention la prochaine fois. Smiley confused
Jean-Pierre
Modifié par JPVDCG (23 Jan 2007 - 11:17)
JPVDCG a écrit :
C'est fait, merci de me faire la remarque. Je ferai attention la prochaine fois. Smiley confused
Jean-Pierre
Pas de souci, mais essaie de prendre un peu de temps pour lire les règles, elles ne sont pas inutiles. Smiley smile

En ce qui concerne ton problème, en regardant rapidement ton code, ceci me choque :
<style type="menu/css">
Tu ne dois pas modifier l'attribut "type". Sa valeur décrit le type de style que tu utilises, qui est en l'occurrence "text/css".
Modifié par Julien Royer (23 Jan 2007 - 11:22)
Julien Royer a écrit :
Pas de souci, mais essaie de prendre un peu de temps pour lire les règles, elles ne sont pas inutiles. Smiley smile

En ce qui concerne ton problème, en regardant rapidement ton code, ceci me choque :
<style type="menu/css">
Tu ne dois pas modifier l'attribut "type". Sa valeur décrit le type de style que tu utilises, qui est en l'occurrence "text/css".


Bon, mais si je veux donner un autre nom à mon fichier "text.css" et le renommer en "menu.css" pour une question purement pratique, comment faire. Car quand je renomme mon fichier CSS, la page ne s'affiche pas correctement, ni quand je change dans la page l'attribut.
Modérateur
Salut,

Concernant ton problème de liaison de fichier, je t'invite à lire ceci. Smiley cligne

mais il est vrai qu'il faut revoir les bases de toute façon... Smiley smile