28172 sujets

CSS et mise en forme, CSS3

[Résolu] Dans le menu, les puces ne veulent pas sauter !

Bonjour,
Je débute et sais, à ce titre, que je dois chercher plus que tout le monde !
Pour autant, un exemple d'AlsaCréations intégré dans mon menu ne veut rien savoir !
Je suis allé voir les références et essayé les différentes variantes proposées sur le site w3.org : rien de mieux.
J'ai isolé comme indiqué avec des bordures... ça ne m'amène pas d'info !

Extrait du codage où j'ai mis en gras les instructions en cause : list-style-type: none ; à la 7è ligne :
 <style type="text/css">
body { background-color: rgb(255, 255, 204); alink="#ee0000" link="#0000ee" vlink="#551a8b" }
div.logo { width: 150px; height: 155px; float: left ; }
div.titre { float: left; padding-top: 20px; padding-left: 160px; }
img { float: left ; }
div.menu { width: 130px ; padding-top: 130px; padding-left: 0px ; font: 2em "Comic Sans MS" ; text-align: center ; strong: ; color: blue }
#navigation { width: 130px ; [b]list-style-type: none ; margin: 0 ;[/b]
padding: 0 ; font: 1em "Comic Sans MS" ; text-align: left: ; strong: ; }
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
  </style>
<!-- <link rel="stylesheet" type="text/css" href="stylefede.css"> -->
</head>
<body>
<div class="logo"><img
 style="width: 150px; height: 155px;"
 src="file:///H:/Docum/Docum%20RJL/Internet/www%2022/Images22/Logo%20AR.gif"
 ...
 ....
<div class="menu">
Menu </div>
<div id="navigation">
<ul>
  <li><a href="#" title="aller en 1">Objectifs</a></li>
  <li><a href="#" title="aller en 2">Organisation</a></li>
  <li><a href="#" title="aller en 3">Actualité</a></li>
  <li><a href="#" title="aller en 4">Act

Bien sûr, j'ai d'abord essayé list-style seul puis list-style-image Rien n'y fait !!!

Sans doute quelque chose d'évident décelable au premier regard par un habitué ?
Alors d'avance merci à qui me mettra sur le piste
A bientôt RJL20080408
Modifié par rjl (09 Apr 2008 - 00:38)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
rjl a écrit :
Sans doute quelque chose d'évident décelable au premier regard par un habitué ?

Oui.

Tu appliques ton style à div#navigation, et pas à la liste ul que contient div#navigation.

Il te faut donc un sélecteur CSS du type:
[#blue]#navigation ul[/#] {
	margin: 0;
	padding: 0;
	list-style: none;
}


Bien sûr tu peux déjà commencer par simplifier un peu ton code HTML:
<h2>Menu</h2> <!-- ou autre niveau de titrage suivant le contexte: h1, h3... -->
<ul id="navigation">
	<li><a href="#">Objectifs</a></li>
	<li><a href="#">Organisation</a></li>
	<li><a href="#">Actualité</a></li>
	<li><a href="#">Etc.</a></li>
</ul>

Modifié par Florent V. (08 Apr 2008 - 09:42)
[quote=rjl]Bonjour,
Je débute et sais, à ce titre, que je dois chercher plus que tout le monde !
Pour autant, un exemple d'AlsaCréations intégré dans mon menu ne veut rien savoir !
Je suis allé voir les références et essayé les différentes variantes proposées sur le site w3.org : rien de mieux.
J'ai isolé comme indiqué avec des bordures... ça ne m'amène pas d'info !

Extrait du codage où j'ai mis en gras les instructions en cause : list-style-type: none ; à la 7è ligne :

 <style type="text/css">
body { background-color: rgb(255, 255, 204); alink="#ee0000" link="#0000ee" vlink="#551a8b" }
div.logo { width: 150px; height: 155px; float: left ; }
div.titre { float: left; padding-top: 20px; padding-left: 160px; }
img { float: left ; }
div.menu { width: 130px ; padding-top: 130px; padding-left: 0px ; font: 2em "Comic Sans MS" ; text-align: center ; strong: ; color: blue }
#navigation { width: 130px ; [b]list-style-type: none ; margin: 0 ;[/b]
padding: 0 ; font: 1em "Comic Sans MS" ; text-align: left: ; strong: ; }
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
  </style>
<!-- <link rel="stylesheet" type="text/css" href="stylefede.css"> -->
</head>
<body>
<div class="logo"><img
 style="width: 150px; height: 155px;"
 src="file:///H:/Docum/Docum%20RJL/Internet/www%2022/Images22/Logo%20AR.gif"
 ...
 ....
<div class="menu">
Menu </div>
<div id="navigation">
<ul>
  <li><a href="#" title="aller en 1">Objectifs</a></li>
  <li><a href="#" title="aller en 2">Organisation</a></li>
  <li><a href="#" title="aller en 3">Actualité</a></li>
  <li><a href="#" title="aller en 4">Act

Bien sûr, j'ai d'abord essayé list-style seul puis list-style-image Rien n'y fait !!!

Sans doute quelque chose d'évident décelable au premier regard par un habitué ?
Alors d'avance merci à qui me mettra sur le piste
A bientôt RJL20080408
Bonjour Benjamin D.C.,
Merci des indications : c'était sympa d'avoir joint une image qui aurait presque pu être ma réponse !
Pour autant, ce n'est pas évident lorsqu'on aborde un nouveau forum mais je trouve sympa cette mise en évidence du code.
J'avais lu les règles mais tout n'est pas évident ; j'espère être maintenant un bon élève Smiley biggrin mais si ce n'est pas le cas les rappels à l'ordre permettent au moins de progresser (y compris dans la forme des échanges !).
Merci et à bientôt RJL20080408
Bonjour Florent V.,
Merci de ta réponse car implicitement, j'avais une incompréhension e la notion d'héritage des attributs ; pour moi, ul étant dans div#navigation, pouvait recevoir les attributs s'il n'était pas contré au niveau direct ul : un point à réétudier mais c'est plus simple avec un exemple.
Pour le reste, j'ai bénéficié de tes indications à l'exception du titre que j'ai préféré traduire par un brek pour ne pas avoir de ligne en dessous.
<div class="menu">
<br>
Menu
</div>
<ul id="navigation">
  <li><a href="#" title="all

Le code est pour montrer à Benjamin que je tiens compte de ses indications ! Smiley cligne

Si je puis me permettre, j'ai 2 questions élémentaires :

Question indentations, je n'ai pas la même présentation que chacon : est-ce que ça ne peut pas être dû à Kompozer que j'utilise ? Même si je cadre bien mes lignes à la main elles reviennent comme ci dessus !

Secnd point, je n'arrive pas à faire prendre la taille des images en ccs d'où pour que ça fonctionne l'obligation de la mettre dans le HTML !
div.logo { width: 100px; height: 105px; float: left ; }
pour la ccs et pour le HTML :
<div logo="text-align: left; height: 74px;"><img
  style="width: 150px; height: 155px;" alt="Logo Aînés Ruraux"
 src="file:///H:/Docum/Docum%20RJL/Internet/www%2022/Images22/Logo%20AR.gif"></div>

Si j'enlève la partie size du HTML, je retrouve non la taille déclarée en ccs mais la taille origine !

Merci d'avance de ta réponse. RJL20080408
Modifié par rjl (08 Apr 2008 - 12:05)
Oui, je rame, je rame !!
J'ai corrigé la css :
div.logo { width: 150px; height: 155px; float: left ; }

et la partie HTML correspondante :
<div class="logo">
<style ="width: 150px; height: 155px; text-align: left;"
 alt="Logo Aînés Ruraux"
 src="file:///H:/Docum/Docum%20RJL/Internet/www%2022/Images22/Logo%20AR.gif"></style></div>

Rien à faire et j'ai maintenant perdu mon image Smiley eek !!
Bon je revois calmement ce soir
Encore merci RJL20080408
Modifié par rjl (08 Apr 2008 - 14:08)
Administrateur
Bonjour et bienvenue,

Le lien de ton image est purement local: lettre de partition (disque) H:, répertoire "Docum/Docum RJL/etc"
Est-ce que tu travailles bien en local ou bien avec un serveur web installé sur ta machine (comme wampserver) ou bien avec un serveur sur un hébergement externe? L'image a peut-être été déplacée tout simplement?
Bonjour Felipe,
Merci de m'appuyer ; j'ai fini par trouver les erreurs et même quon ne pouvait guère modifier la taille d'une image, même si l'instruction existe depuis le CSS 3.3, elle n'est pas fonctionnelle !
Pour le reste, j'ai tatoné, cherché, vérifié l'importance des indications de Florent et complété cette fois mes références lorsqu'elles devaient être multiples !
Je connais au moins quelques points que j'ai du ùmal à assimiler et dont je vais revoir la théorie !
Pour mon menu (page accueil), il me reste à ajouter les alink puis les références des pages appelées lorsque je les aurai faites !
Encore merci... et sans doute à bientôt à travers de nouvelles questions RJL8408
Sujet clos
Aller à