Bug liste à puces

JPTK · 1 Mars 2012

Salut,

J'ai déjà eu ce bug avec que j'ai déjà rédigé des centaines de pages équivalentes (je ne suis que rédacteur, je transpose des .doc pour les mettre en ligne), impossible de comprendre pourquoi la première puce est justifiée à droite ??

La dernière fois j'avais dû tout simplement virer les puces. J'ai tenté de coller le code dans un nouveau document smultron mais idem.

Une idée ?

Merci :zen:

<?php

$lecours = '
<h1>Protocole du repassage du linge</h1>

<ul>
<li>Prendre le linge sec et trier celui à repasser de celui à ranger directement sans repassage.</li>

<li>Prendre la table à repasser et l\'installer, ajuster la hauteur de la table à votre taille. Vous devez pouvoir poser vos mains à plat sur la table sans avoir à vous pencher.</li>

<p style="text-align: center"><img src="/bonnespratiques/cappetiteenfance/images/table-repasser.jpg" alt="image"/></p>

<li>Prendre le fer à repasser et vérifier qu\'il soit en bon état, ne pas le brancher.</li>

<p style="text-align: center"><img src="/bonnespratiques/cappetiteenfance/images/fer-repasser.jpg" alt="image"/></p>
</ul>

<ul>

<li>Remplir d\'eau distillée le fer à repasser à l\'aide du récipient verseur.</li>

<li>Brancher le fer à repasser.</li>

<li>Régler le thermostat du fer à la température autorisée pour le linge à repasser.</li>

<li>Repasser le linge : Lisser à la main le linge, et passer le fer au besoin utiliser la vapeur ou le jet d\'eau du fer pour défroisser les plis. Commencer par le milieu du vêtement à repasser et continuer par l\'extérieur. Repasser sur l\'envers, la soie et les vêtements ayant des transferts.</li>

<p style="text-align: center"><img src="/bonnespratiques/cappetiteenfance/images/repassage.jpg" alt="image"/></p>

<li>Finir par un repassage sans vapeur pour sécher le linge.</li>

<li>A la fin du repassage, débrancher et laisser refroidir le fer.</li>

<li>Ranger le fer à repasser et la table à repasser.</li>
</ul>

Nephou · 1 Mars 2012

’soir,
pourrais-tu nous donner l’adresse du site ? ou la feuille de style de celui-ci ? parce que là je ne vois rien qui cloche…

JPTK · 1 Mars 2012

Nephou a dit:
soir,
pourrais-tu nous donner ladresse du site ? ou la feuille de style de celui-ci ? parce que là je ne vois rien qui cloche

Le soucis c'est qu'on peut pas y accéder sans se loguer.
Mais j'ai 100 pages équivalentes, d'autres dans le même chapitre et aucun soucis, 2 fois que ça me fait ça, space... pas sûr de trouver la feuille de style. Dans le dossier CSS ?

Y avait pas une balise code dans le temps ?

@media print {
#footer, #header, #col1, #printbtn {
display: none;
}

}

*:focus {
outline: none;
}
*::-moz-focus-inner {
border: none;
}

* {
font-family: Arial;
}

img { border: none; }

.clearfx { width: 100%; clear: both; }

body, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
}

body {
margin: 0;
color: #3e3e3e;
font-size: 13px;
font-family: Arial,"Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
line-height: 1.35em;
text-align: center;
}

h1 {
margin: 20px 0 15px 0;
padding: 0;
font-size: 24px;
line-height: 24px;
height: auto;
color: #D20153;
text-shadow: 1px 1px #ccc;
float: left;
width: 100%;
}

h2 {
margin: 10px 0;
font-size: 18px;
color: #4e4e4e;
text-shadow: 1px 1px #fff;
}

h3, h4, h5, h6
{
margin: 10px 0;
font-size: 15px;
color: #4071b5;
text-shadow: 1px 1px #fff;
}

#header {
width: 100%;
text-align: center;
height: 120px;
float: left;
background: url('/images/header_bg.jpg') top repeat-x;
}#headercenter { width: 960px; margin: auto; text-align: left; }

#header a#logo img { height: 80px; }
#header a#logo { float: left; width: 285px; margin-top: 20px;}
.menu { float: left; width: 660px; }

#wrapper {
width: 100%;
text-align: center;
min-height: 400px;
float: left;
background: url('/images/global_bg.jpg') repeat;
}#wrappercenter { width: 960px; margin: auto; text-align: left; background: #fff; min-height: 400px; }

#footer {
width: 100%;
text-align: center;
float: left;
height: 43px;
font-size: 12px;
background: url('/images/footer_bg.jpg') top repeat-x;
}#footercenter { width: 940px; text-align: left; margin: auto; color: #fff; margin-top: 12px; }
#heureActuelle { width: 150px; float: right; text-align: right; }
/* BLOCK CONNEXION */
#blockConnexion {
width: 360px;
padding: 12px 0 0 0;
height: 263px;
float: left;
clear: both;
background: url('../images/box-connexion.jpg') top left;
margin: 20px 0 0 295px;
}
#blockConnexionErreur {
color: red;
width: 940px;
float: left;
font-size: 15px;
clear: both;
height: 20px;
font-weight: bold;
text-align: center;
}
#blockConnexionForgot {
width: 940px;
float: left;
clear: both;
height: 20px;
margin: -10px 0 30px 0;
text-align: center;
}
#blockConnexion>form>p>label {
color: #fff;
display: block;
font-size: 0.95em;
margin: 6px 0;
width: 350px;
text-align: center;
float: left;
line-height: 20px;
}
#blockConnexion>form>p {
margin: 6px 0 0 0;
float: left;
clear: both;
}
#blockConnexion>form>p>input {
background: url('../images/formbg.jpg') #fff top repeat-x;
padding: 6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
font-size: 13px;
font-family: arial;
color: #323232;
border: 1px solid #fff;
width: 160px;
margin: 0px 0 0 89px;
}
#blockConnexion>form>p>input:hover {
border: 1px solid gray;
}
#blockConnexion>form>p>input[type=submit] {
background: url('../images/formbg.jpg') #fff top repeat-x;
padding: 6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
font-size: 13px;
font-family: arial;
color: #323232;
border: 1px solid #fff;
width: 174px;
margin: 8px 0 0 89px;
text-transform: uppercase;
}
#blockConnexion>form>p>input[type=submit]:hover {
border: 1px solid gray;
}
/**/

label {
float: left;
width: 100px;
text-align: right;
line-height: 26px;
}

input {
margin: 2px;
padding: 3px 7px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
font-family: Arial;
font-size: 14px;
background: url('../images/formbg.jpg') #fff top repeat-x;
border: 1px solid gray;
}

input:hover, input:focus {
border: 1px solid #CD0054;
}

select {
margin: 2px;
padding: 3px 7px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
font-family: Arial;
font-size: 14px;
background: url('../images/formbg.jpg') #fff top repeat-x;
border: 1px solid gray;
}

select:hover, select:focus {
border: 1px solid #CD0054;
}

textarea {
padding: 6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
font-family: Arial;
font-size: 14px;
background: url('../images/formbg.jpg') #fff top repeat-x;
border: 1px solid gray;
}

textarea:hover, textarea:focus {
border: 1px solid #CD0054;
}

input[type=submit], input[type=button] {
cursor: pointer;
background: #CD0054;
color: #fff;
border: 1px solid #CD0054;
padding: 4px 9px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
}

input[type=submit]:hover, input[type=button]:hover {
background: #fff;
color: #CD0054;
border: 1px solid #1F0310;
}

hr { display: none; }

/* BTN SAVE */
#divLeCours input.enregistrerValeur {
float: right;
}

#divLeCours input.enregistrerValeur[type=button] {
width: 94px;
height: 28px;
background: url('/images/btnsave.png') top left;
padding: 0;
border: none;
cursor: pointer;
}

#divLeCours input.enregistrerValeur[type=button]:hover, #divLeCours input.enregistrerValeur[type=button]:focus {
background: url('/images/btnsave.png') bottom left;
}
/**/

table {
width: 100%;
font-size: 0.95em;
}

table, tr, td, th {
border-collapse: collapse;
border: 1px solid #555;
}

table td,table th{
padding: 5px;
}

sup, sub {line-height:0;}

a, a:link, a:visited {
color: #3d7bbd;
text-decoration: underline;
}
a:hover {
color: #306193;
text-decoration: none;
}

#content {
float: left;
width: 940px;
height: auto;
background: #fff;
padding: 0px 10px 20px 10px;
}
#col1 {
float: left;
height: auto;
width: 240px;
}
#col2 {
height: auto;
float: left;
width: 700px;
}

/* BARREMENU */
#barremenu {
position: absolute;
left: 58%;
width: 42%;
height: 42px;
margin: 33px 0 0 0;
background: url('http://www.cesad.fr/images/cesad/barremenu-top.png') left top;
}
#barremenu ul {
width: 367px;
margin: 0 0 0 113px;
padding: 0;
height: 34px;
float: left;
}
#barremenu ul li {
list-style-type: none;
display: block;
float: left;
height: 34px;
}
#barremenu ul li a, #barremenu ul li a:link, #barremenu ul li a:visited {
width: auto;
display: block;
height: 34px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
color: #d20153;
line-height: 34px;
padding: 0 7px 0 7px;
}
#barremenu ul li a img {
width: 25px;
height: 25px;
float: left;
margin: 4px 0 0 0;
padding-right: 3px;
vertical-align: middle;
}
#barremenu ul li a:hover {
color: #fff;
background: #d20153;
}
#barremenu ul li.active a {
color: #fff;
background: #d20153;
}
/**/

/* COL 1 MENU */
#col1>ul {
-moz-border-radius:10px;
border-radius:10px;
-khtml-border-radius:10px;
width: 228px;
padding: 5px 0px;
float: left;
height: auto;
margin: 13px 0;
background: #eee;
border: 1px solid #bbb;
}

#col1>ul>li {
list-style-type: none;
text-transform: uppercase;
width: 228px;
text-align: left;
font-weight: bold;
float: left;
padding: 0;
font-size: .90em;
margin: 0;
float: left;
}

#col1>ul>li>.matiere {
background: #323232;
color: #fff;
width: 208px;
padding: 5px 10px;
float: left;
border-bottom: 1px solid #636363;
border-top: 1px solid #323232;
letter-spacing: 0.3px;
cursorointer;
}
#col1>ul>li>.matiere:hover {
color: #C90055;
}

#col1>ul>li>ul {
width: 228px;
padding: 0px 0;
float: left;
margin: 0;
height: auto;
}

#col1>ul>li>ul>li {
list-style-type: none;
text-transform: none;
font-weight: normal;
background: none;
text-align: left;
float: left;
border-bottom: 1px solid #bbb;
font-size: 0.95em;
}

#col1>ul>li>ul>li>span.sansAcces {
color: #aaa;
width: 208px;
padding: 5px 10px;
height: 20px;
line-height: 20px;
display: block;
float: left;

}

#col1>ul>li>ul>li>a, #col1>ul>li>ul>li>a:link, #col1>ul>li>ul>li>a:visited {
text-decoration: none;
display: block;
width: 208px;
padding: 5px 10px;
height: 20px;
line-height: 20px;
float: left;
color: #3e3e3e;
}

#col1>ul>li>ul>li>a:hover, #col1>ul>li>ul>li>a.active:hover {
background: #CD0054;
color: #fff;
}

#col1>ul>li>ul>li>a.active {
color: #CD0054;
}
/**/

/* MAINMENU */
.menuul {
width: 660px;
height: 27px;
padding: 0;
margin: 93px 0 0 67px;
float: left;
clear: both;
position: relative;
}
.menuul li { /* Ne pas mettre de width sinon décale le sous menu */
float: left;
height: 27px;
list-style-type: none;
margin: 0 4px 0 0;
padding: 0;
}
.menuul li span, .menuul li a, .menuul li a:link, .menuul li a:visited {
font-size: 13px;
color: #fff;
display: block;
font-weight: bold;
height: 27px;
width: 160px;
text-align: center;
text-decoration: none;
line-height: 27px;
background: url('../images/mainmenu.png') left top;
cursor: pointer;
}
.menuul li span:hover, .menuul li a:hover {
background: url('../images/mainmenu.png') left 27px;
}
.menuul li.last a, .menuul li.last a:link, .menuul li.last a:visited {
width: 280px;
background: url('../images/mainmenu-large.png') right top;
}
.menuul li.last a:hover {
background: url('../images/mainmenu-large.png') right 27px;
}
.menuul li.active a {
background: url('../images/mainmenu.png') left 27px;
}
.menuul li.active.last a {
background: url('../images/mainmenu.png') right 27px;
}
/**/

/* PROGRESSBAR */
.bgprogress {
width: 224px;
height: 30px;
float: left;
background: url('../images/bgprogress.jpg') top left;
margin-top: 6px;
}

.progress {
width: 166px;
height: 15px;
float: left;
margin: 4px;
}
.progressin {
height: 15px;
float: left;
background: url('../images/progressin.jpg') top left;
}
.progress2 {
width: 50px;
height: 30px;
font-size: 0.9em;
float: left;
margin-left: 0px;
text-align: center;
color: #fff;
line-height: 23px;
}

/* Table de relevé de notes */
table#releve td {
border: 1px solid #ccc;
font-size: 11px;
}

table#releve strong {
text-transform: uppercase;
height: 36px;
display: block;
line-height: 36px;
font-size: 13px;
}

table#releve td { padding: 2px 5px; }

.noacces {
color: #aaa;
}

table#releve a {
height: 24px;
display: block;
line-height: 24px;
}

.note {
color: red;
font-size: 1.1em;
font-weight: bold;
}

#lastInfo {
width: 280px;
height: auto;
float: left;
} #lastInfo p { font-style: italic; }

#contactProf {
float: left;
width: 650px;
height: auto;
}

/* Table admin messagesrecus */
table#messagesrecus td {
border: 1px solid #ccc;
font-size: 13px;
}

/* MISE EN FORME DES COURS */
#divLeCours {
float: left;
width: 700px;
height: auto;
margin-top: 0px;
}

#divLeCours p {
padding: 0 5px;
line-height: 1.5em;
}

#divLeCours table, .correction table {
text-align: center;
}

.intro {
border: 1px solid #DDD;
background-color: #EEE;
padding: 10px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
width: 680px;
float: left;
clear: both;
margin: 0 0 10px 0;
}

.correction {
border: 1px solid #db7777;
background-color: #e8a6a6;
padding: 10px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
width:660px;
float: left;
clear: both;
margin: 0 0 10px 0;
}

.exos {
border: 1px solid #5AC4DD;
background-color: #a3e3f2;
padding: 10px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
width: 680px;
float: left;
clear: both;
margin: 0 0 10px 0;
}

.commentaire {
border: 1px solid #909C29;
background-color: #E1E7D8;
padding: 10px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius:6px;
width: 680px;
float: left;
clear: both;
margin: 0 0 10px 0;
}

.borderimg { border: 1px solid #DDD; }

#infocontrole {
font-size: 1em;
color: red;
text-align: center;
float: left;
width: 228px;
border-left: 1px solid #ABA9B9;
border-right: 1px solid #ABA9B9;
border-bottom: 1px solid #ABA9B9;
padding: 5px 0;
} #infocontrole>a { font-size: .9em; }
#infocontrole>strong { font-size: 1.2em; }

.red { color: red; }
.green { color: green; }

.primary-nav .secondary-nav {
display:none;
}
.primary-nav .open {
display:block;
}

/* print btn */
a#printbtn {
width: 110px;
height: 35px;
display: block;
text-decoration: none;
margin-left: 612px;
margin-top: 0;
margin-bottom: -35px;r
} a#printbtn:hover { color: #C90055; }

a#printbtn>img {
height: 35px;
padding-left: 5px;
vertical-align: middle;
}

/* gestionProfEleve */
.gestionProfEleve {
text-align: right;
height: 20px;
margin-bottom: -32px;
}

div.whowhat {
width: 350px;
height: 40px;
color: #fff;
float: left;
margin: 35px 0 0 50px;
margin-bottom: -75px;
}

#tab_letter_tri { list-style:none; text-align:center; }
#tab_letter_tri li { display: inline-block; width:20px; height:20px; padding:5px; }
#tab_letter_tri li a { display: inline-block;width:15px; height:15px; padding:5px; font-size:14px; font-weight:bold; text-decoration:none}
#tab_letter_tri li a:hover,#tab_letter_tri li a.on { color:#fff; background:#80C3EE;}

ul#menu_tab_eleve { padding: 10px; margin: 15px 0 0 0; background: #ddd; float: left;}
ul#menu_tab_eleve li {
list-style-type: none;
padding: 0 5px;
float: left;
margin: 0;
}

.timer {
background: url('../images/clock.png') top left no-repeat;
float: left;
padding-left: 44px;
margin-left: 20px;
height: 36px;
width: 260px;
}

.timer span { font-weight: bold; }

koeklin · 1 Mars 2012

Parce que au dessus de ta liste, t'as une p... de balise h1 qu'est en "float: left;"

JPTK · 1 Mars 2012

koeklin a dit:
Parce que au dessus de ta liste, t'as une p... de balise h1 qu'est en "float: left;"

Comment ça en float left ?? C'est marqué où ? Je dois corriger quoi dans ce cas ?
Je suis pas codeur moi, juste rédacteur et là je vois pas quoi changer

Merci à toi si tu as la réponse !! :zen:

koeklin · 1 Mars 2012

ajoute à la première balise ul

Bloc de code:

 style="clear: left;"

Voici le début du code corrigé

Bloc de code:

<?php


$lecours = '
<h1>Protocole du repassage du linge</h1>



<ul style="clear: left;">
<li>Prendre le linge sec et trier celui à repasser de celui à ranger directement sans repassage.</li>

JPTK · 1 Mars 2012

putain t'es un chef, 1000 fois merci ! :up:

Niconemo · 2 Mars 2012

Il y a aussi un paragraphe à la fin de la première liste avant la fermeture de la balise </ul>

C'est Word qui a fait ce mic mac ?

JPTK · 2 Mars 2012

Niconemo a dit:
Il y a aussi un paragraphe à la fin de la première liste avant la fermeture de la balise </ul>

C'est Word qui a fait ce mic mac ?

Bah non ça c'est la fermeture du paragraphe de la ligne image, idem sur la 2e image non ?

Word ? Je reçois les documents en .doc je fais un copié collé dans SMULTRON et je mets en forme, donc je vois pas trop comment word pourrait interférer.

westindies972 · 2 Mars 2012

JPTK a dit:
Bah non ça c'est la fermeture du paragraphe de la ligne image, idem sur la 2e image non ?

Il y a un gros problème de sémantique dans ton balisage HTML. Tu as inséré un paragraphe entre deux listes. Voici un résumé de ton code :

Bloc de code:

<ul>
    <li></li>
    <p>ton image</p>
    <li></li>
    <li></li>
</ul>

Tu ne peux pas mettre ce paragraphe (<p></p>) entre deux lignes d'une liste. C'est une erreur de sémantique. il faut que ton paragraphe soit à l'intérieur d'une ligne de liste (<li></li>) ou à l'extérieur de ton <ul>, par exemple :

Bloc de code:

<ul>
    <li></li>
    <li><p>ton image</p></li>
    <li></li>
    <li></li>
</ul>

ou

Bloc de code:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p>ton image</p>

Bon courage pour la suite

JPTK · 2 Mars 2012

Ok merci du conseil ! :up:

Mais ça change quoi sinon ?

Nephou · 2 Mars 2012

Ben que tu vas galèrer à ôter la puce qui viendra se mettre à gauche de ton image

Pourquoi ?

Plus sérieusement, le problème est que ton paragraphe est rattaché à une liste (<ul>), ce qui nest pas prévu dans les canons du sémantiquement correct. La première solution proposée par westindies972 est presque ce quil te faudrait faire. Presque, parce que les deux images sont des illustration des lignes les précédant et non des éléments distincts de la liste.

Tu pourrais en revanche essayer de regrouper texte et image sous la forme de deux paragraphes dans le même élément de la liste.

Bloc de code:

<ul>
    <li></li>
    <li><p>la ligne de texte</p>
<p>ton image</p></li>
    <li></li>
    <li></li>
</ul>

Et vérifier si ça ne met pas trop de bazar niveau espacements (normalement, non).

JPTK · 2 Mars 2012

MArci pour toutes ces précisions forts utiles !

La première solution proposée par westindies972 est presque ce qu’il te faudrait faire

En tout cas elle a fonctionné

Nephou · 2 Mars 2012

Vi, mais comme il te reprochait un problème de sémantique je disais juste qu’il fallait aller jusqu’au bout

ta solution marchait aussi

Bug liste à puces

JPTK

Membre vénérable

Nephou

de pas sage

JPTK

Membre vénérable

koeklin

Membre expert

JPTK

Membre vénérable

koeklin

Membre expert

JPTK

Membre vénérable

Niconemo

Modo (toujours vivant !)

JPTK

Membre vénérable

westindies972

Membre confirmé

JPTK

Membre vénérable

Nephou

de pas sage

JPTK

Membre vénérable

Nephou

de pas sage

Sujets similaires