comment integrer un menu à une feuille ccs

dede.laurence · Message par **dede.laurence** » 29 déc. 2006, 16:02

Je pense que le sujet a été mainte fois répété, mais comment faire pour intéger un menu sur une page ccs.
J'ai crée ma première page ccs avec un tuto, et chargé un menu tout fait sur alsacreation

. Maintenant je trouve pas la soluc pour lier les deux.
Merci d'avance.

Message par **chinon37** » 29 déc. 2006, 17:43

C'est quoi, une page ccs?

je ne connais pas

dede.laurence · Message par **dede.laurence** » 29 déc. 2006, 19:08

Désolé je vcoulais parler de feuille css

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Media Center PC 3.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322)

Message par **chinon37** » 29 déc. 2006, 19:55

En préalable, Il me semble qu'il faut redéfinir certains termes:
Il y a la page web pour le contenu, la feuille de style pour la mise en page( formats, position, etc.)
le menu: une partie est dans la page web: le texte et une partie est dans la feuille de style css (la forme)
le contenu du menu peut être inséré dans la page par:
- positionner le curseur à l'endroit où tu souhaite mettre ton menu > insertion > code html > tu colles dans le cadre le code que tu as récupéré sur Alsacreation
- pour la mise en forme, si tu as une feuille css indépendante, tu ouvres cette feuille par un éditeur de texte et tu colles à l'intérieur le style du menu alasacreation
- si le style est incorporé à la page web (le code du style se trouve directement dans le code source de ta page web) tu ouvres celle-ci avec un éditeur de texte externe (éviter l'onglet source) et tu colles les définitions de styles récupérées entre les balises <style> et </style>

dede.laurence · Message par **dede.laurence** » 30 déc. 2006, 21:30

Ok, merci ça vient tout doucement.
Autre question??
Sur ma feuille de style quand je remplis du texte le pied de page descend tranquille mais pas le cadre (conteneur), y -il une soluc toute évidente ou j'ai encore raté quelque chose.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Media Center PC 3.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322)

Invité · Message par **Invité** » 31 déc. 2006, 16:38

Je trouve pas de remèdes. En visu sur nvu mon pied de page est bien collé à mon texte et le conteneur suit maintenant, mais en visu hors nvu c'est pas le cas : qd je rentre du texte les blocs pied et texte descendent mais pas le conteneur.

Pouvez vous jeter un oeil, merci.
Meilleurs voeux.

Code : Tout sélectionner

<!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"
 lang="fr">
<head>
  <title>Largeur fluide, header/menu gauche/contenu/footer.</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <style type="text/css">
body {
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    background-color: #ffffff;
}

#header {
    background-color: #99ffff;
    width: 100%;
    background-image: url(../../animations/cooltext39542079.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: 92px;
}

#conteneur {
    border-style: solid;
    border-width: 2px;
    background-color: #ccccff;
    width: 90%;
    margin-left: 5%;
    margin-top: 5px;
    margin-bottom: 0px;
    display: table;
}

#centre {
    border-style: solid;
    border-width: 1px;
    background-color: #ff99ff;
    margin-left: 100px;
    margin-right: 100px;
    position: relative;
    float: none;
}

#gauche {
    width: 100px;
    position: relative;
    background-color: #ffff99;
    float: left;
    margin-left: 0px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: larger;
    font-weight: bold;
    line-height: 40px;
    margin-top: 0px;
    padding-top: 10px;
    padding-left: 0px;
    text-align: center;
    left: 0px;
    margin-bottom: 0px;
}

#pied {
    border-style: solid;
    border-width: 1px;
    background-color: #99cc99;
    clear: both;
    margin-bottom: 0px;
    margin-top: 0px;
    float: none;
    position: relative;
    height: 40px;
}

.menugauche {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menugauche li {
    margin-bottom: 5px;
}

.menugauche a {
    margin: 0 2px;
    color: #000000;
    text-decoration: underline;
}

.menugauche a:hover {
    text-decoration: none;
}

p {
    margin: 0 0 10px;
}

#partenaire {
    background-color: #cc0000;
    width: 100px;
    float: right;
    position: relative;
    margin-top: 0px;
    padding-top: 10px;
    left: 0px;
    padding-left: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    bottom: 0px;
}


  </style>
</head>
<body>
<div style="top: 0px; height: 665px;" id="conteneur">
<div id="header"><br />
</div>
<div id="gauche">
<ul class="menugauche">
  <dl>
    <dt><a href="">Le Club</a></dt>
    <dt><a href="">Calendrier</a></dt>
    <dt><a href="">R&eacute;sultats</a></dt>
    <dt><a href="">Liens</a></dt>
    <dt><a href="">Partenaires</a></dt>
    <dt><a href="">Annonces</a></dt>
    <dt><a href="">Photos</a></dt>
    <dt><a href="">Contact</a></dt>
  </dl>
</ul>
<big>
</big></div>
<div id="partenaire">partenaire</div>
<div id="centre"> texte</div>
<div id="pied">pied de page</div>
</div>
</body>
</html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Media Center PC 3.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322)

Message par **Ymai** » 31 déc. 2006, 19:06

Bonjour
Premier petit détail: la hauteur du bloc "conteneur" gagnerait à se trouver dans la définition de style. Mais c'est un détail.
Pour le reste, j'ai vraiment un souci avec cette page.
Je l'ai simplifiée de la manière suivante:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org">
    <title>
      Largeur fluide, header/menu gauche/contenu/footer.
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#conteneur {
  border-style: solid;
  border-width: 2px;
  background-color: #ccccff;
  width: 90%;
  margin-left: 5%;
  margin-top: 5px;
  margin-bottom: 0px;
}

#header {
  background-color: #99ffff;
  width: 100%;
  background-image: url(../../animations/cooltext39542079.jpg);
  background-position: center;
  background-repeat: no-repeat;
  height: 92px;
}

#centre {
  border-style: solid;
  border-width: 1px;
  background-color: #ff99ff;
  margin-left: 100px;
  margin-right: 100px;
}

#gauche {
  width: 100px;
  background-color: #ffff99;
  float: left;
  margin-left: 0px;
  font-family: Arial,Helvetica,sans-serif;
  line-height: 40px;
  margin-top: 0px;
  padding-top: 10px;
  padding-left: 0px;
  left: 0px;
  margin-bottom: 0px;
}

#pied {
  border-style: solid;
  border-width: 1px;
  background-color: #99cc99;
  clear: both;
  margin-bottom: 0px;
  margin-top: 0px;
  height: 40px;
}


</style>
  </head>
  <body>
    <div style="top: 0px;" id="conteneur">
      <div id="header">
        <br>
      </div>
      <div id="gauche">
        <div style="margin-left: 2em;" class="menugauche">
          <dl>
            <dd>
              bla bla
            </dd>
          </dl>
        </div>
      </div>
      <div id="centre">
        texte<br>
      </div>
      <div id="pied">
        pied de page
      </div>
    </div>
  </body>
</html>

Lorsque j'ajoute des lignes dans la zone "centre", le pied de page descend, même si la zone "centre" ne le repousse pas vers le bas!!
Plus étrange encore,
J'ouvre KaZcadeS.
Je clique sur le style "pied" (rien ne se passe).
Je clique dans l'onglet "Général", sans rien y modifier
Je reclique sur le style "pied" et hop, le bloc "pied" remonte à la place qu'il n'aurait jamais dû quitter.

J'ai supprimé certaines petites choses dans les styles aussi.
Vous avez dit bizarre? Quelqu'un peut confirmer?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Geckozone

comment integrer un menu à une feuille ccs

comment integrer un menu à une feuille ccs

Qui est en ligne ?