Your browser does not support CSS. If images appear below, please disregard them.
Connexion

iWeb Beginner Forum Iweb Beginner : Forum d'assistance sur Apple iWeb

Vers le contenu

FAQ Membres>M’enregistrer
  • Nous sommes le Mer 8 Fév 2012 12:10

  • Publicité

Mes menu de mon CSS se barre a gauche puis plus rien s'affic

Pour aller plus loin avec iWeb

Modérateurs: les9viesduchat, mutru, zepatente


Répondre

Mes menu de mon CSS se barre a gauche puis plus rien s'affic

Messagepar NuDub » Mar 28 Avr 2009 12:16

Bonjours à toutes et tous.

Je remercie toutes les personnes qui pourrons m'éclaircir sur ce problème.

Alors mon site je le tete en locale et là je fais un menu en CSS donc j'ai les titre des menu et le CSS dans une même balise HTML.

Donc je l'ai pris d'un tutoriel.Sa marche quand je test le .html depuis le fichier lui-même mais une fois que je met ce code dans un Widget HTML j'ai bien la barre mais les menu rien du tous.

Voici ce que je met dans le widget.

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title>MON SITE</title>
<style type="text/css">
Body {
   background-color: #fff;
   margin: 0px;
   padding: 0px;
}
.menu {
   background-color: #4c4c4c;
   border-top-color: #65bb01;
   border-top-style: solid;
   border-top-width: 5px;
   height: 45px;
   list-style-type: none;
   margin: 0px;
   outline-width: 5px;
   width: 100%;
}

.menu li {
   float: left;
}

.menu li a {
 display:block;
 color:#fff;
 font-size:13px;
 font-weight:bold;
 text-decoration:none;
 font-family:arial, verdana, sans-serif;
 text-align:center;
 margin-top:8px;
 padding:6px 10px 6px 10px;
 border-right: 10px solid # 4c4c4c;
 border-left: 10px solid # 4c4c4c;
 cursor:pointer;
 }

.menu li a:hover {
   background-color: #636363;
}

.menu li .current a {
   background-color: #65bb01;
}

</style>
</head>

<body>

<ul class="menu">
<li class="current"><a href="#">Accueil</a></li>
<li><a href="#">Mastering</a></li>
<li><a href="#">Mixing</a></li>
<li><a href="#">Tarifs</a></li>
<li><a href="#">Materiels</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contacter nous</a></li>
</ul>

</body>
</html>

La barre s'afiche bien ou je veux mais c'est l'intitulé des menu qui se met pas, donc y a rien sauf la jolie barre.

Pourtant le code est bon car quand je test le HTML comme il est audessus tous marche, la barre et le nom des menu et les hover.

Merci a vous pour vos éclaircissement, car là je pêche vraiment quand a la raison de ce soucis.

Amicalement.
NuDub
Débutant
Débutant
 
Messages: 11
Inscription: Ven 24 Avr 2009 10:29
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP
Haut

Publicité

Re: Mes menu de mon CSS se barre a gauche puis plus rien s'affic

Messagepar Marc » Mar 28 Avr 2009 15:34

Voici le code
4e ligne j'ai changé le charset=windows-1250 en charset=UTF-8
ligne 21 : j'aichangé la largeur width:100%; en largeur width:740 px; pour une page de 780px
dans les liens du menus j'ai mis les target="_top" qui manquaient dans les balises <a></a>
Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>MON SITE</title>
<style type="text/css">
Body {
   background-color: #fff;
   margin: 0px;
   padding: 0px;
}
.menu {
   background-color: #4c4c4c;
   border-top-color: #65bb01;
   border-top-style: solid;
   border-top-width: 5px;
   height: 45px;
   list-style-type: none;
   margin: 0px;
   outline-width: 5px;
   width: 740px;
}

.menu li {
   float: left;
}

.menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
margin-top:8px;
padding:6px 10px 6px 10px;
border-right: 10px solid # 4c4c4c;
border-left: 10px solid # 4c4c4c;
cursor:pointer;
}

.menu li a:hover {
   background-color: #636363;
}

.menu li .current a {
   background-color: #65bb01;
}

</style>
</head>

<body>

<ul class="menu">
<li class="current"><a href="#"  target="_top">Accueil</a></li>
<li><a href="#" target="_top">Mastering</a></li>
<li><a href="#" target="_top">Mixing</a></li>
<li><a href="#" target="_top">Tarifs</a></li>
<li><a href="#" target="_top">Materiels</a></li>
<li><a href="#" target="_top">FAQ</a></li>
<li><a href="#" target="_top">Contacter nous</a></li>
</ul>

</body>
</html>


Remarque à deux balles : soit c'est "Contactez-nous" soit "Nous contacter" mais pas "Contacter nous" ;)
Avatar de l’utilisateur
Marc
Génius
Génius
 
Messages: 1425
Inscription: Mar 17 Fév 2009 12:40
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP
Haut

Re: Mes menu de mon CSS se barre a gauche puis plus rien s'affic

Messagepar NuDub » Mer 29 Avr 2009 03:39

Marc, bonjour et merci de ta réponse.

Bon dés que je vais sur mon Mac je vais faire les corection.

Donc merci pour le temps que tu ma accorder, par contre dans ma logique pourquoi avec le width a 100% le menu doit normalement s'adapter a la page donc 780px, mais peut être qu'il faut que je revois ça de mon côté.

Par contre c'est le charset il sert a quoi car dans safari avec juste le HTML sa marchai.

Pour les target merci car j'avais pas penser pourtant d'un essaie sur un autre menu j'avais rencontrer cette "fonction:valeur".

Merci encore Marc, je revien donner mon feedback les correction dès que je suis passer sur mon Mac.

Amicalement
NuDub
Débutant
Débutant
 
Messages: 11
Inscription: Ven 24 Avr 2009 10:29
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP
Haut

Re: Mes menu de mon CSS se barre a gauche puis plus rien s'affic

Messagepar Marc » Mer 29 Avr 2009 04:09

Oui mais le widget ne s'adapte au dimension de la page mais aux dimensions de son contenu si tu lui mets 100% de largeur au contenu il ira au maximum que lui permet iweb ( cad 28720 px :o )
t'as qu'à faire l'essai avec ce code. C'est un code minimum pour dire que le contenu occupe 100% de la largeur comme précédemment le widget va s'étendre .
Code: Tout sélectionner
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="fr">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
Body {
   margin: 0px;
   padding: 0px;
   width: 100%;
}
</style>
</head>
<body>
</body>
</html>



Pour la largeur sur la ligne du code Pour une raison que j'ignore, elle doit être de 40px environ inférieure à la largeur de la page
Pour ton menu voici le code que je te conseille ( j'ai modifié les premières lignes
Code: Tout sélectionner
<!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" xml:lang="fr">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MON SITE</title>
<style type="text/css">
Body {
   background-color: #fff;
   margin: 0px;
   padding: 0px;
}
.menu {
   background-color: #4c4c4c;
   border-top-color: #65bb01;
   border-top-style: solid;
   border-top-width: 5px;
   height: 45px;
   list-style-type: none;
   margin: 0px;
   outline-width: 5px;
   width: 740px;
}

.menu li {
   float: left;
}

.menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
margin-top:8px;
padding:6px 10px 6px 10px;
border-right: 10px solid # 4c4c4c;
border-left: 10px solid # 4c4c4c;
cursor:pointer;
}

.menu li a:hover {
   background-color: #636363;
}

.menu li .current a {
   background-color: #65bb01;
}

</style>
</head>

<body>

<ul class="menu">
<li class="current"><a href="#"  target="_top">Accueil</a></li>
<li><a href="#" target="_top">Mastering</a></li>
<li><a href="#" target="_top">Mixing</a></li>
<li><a href="#" target="_top">Tarifs</a></li>
<li><a href="#" target="_top">Materiels</a></li>
<li><a href="#" target="_top">FAQ</a></li>
<li><a href="#" target="_top">Contacter nous</a></li>
</ul>

</body>
</html>
Avatar de l’utilisateur
Marc
Génius
Génius
 
Messages: 1425
Inscription: Mar 17 Fév 2009 12:40
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP
Haut
Répondre

Retourner vers Code HTML

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 6 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Traduction par: phpBB-fr.com
phpBB SEO
Originals bookmarks icons by WEBFRUITS
Leox Graphite icons by Icontoaster
Buziness Board 2.0 by CoSa NoStrA DeSiGn
Publicités par Advertisement Management