28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voila la page que j'ai réalisé à cette adresse : http://www.sidem.ch/test

En fait le problème vient du fait qu'il y'a une différence d'alignement entre mes balises <li> sour IE et firefox.

En fait sous IE comme vous pouvez le voir les puces sont bien à l'intérieur alors qu'avec Firefox mes puces se trouvent en dehors de mon bloc conteneur ... Smiley decu

Deplus il y'a absolument tout le texte qui se met en gras du coté de IE, alors qu'il ne devrait avoir que les balises <li> en gras, sous firefox par contre aucun problème de ce coté.

VOici le CSS :



voici mon ptit bout de code
.msgacc {
border-left: 2px solid #A0C366;
margin: 0px 50px 30px 15px;
font-size: 14px;
text-align:justify;
}
.msgacc li{
list-style-type: circle;
margin-bottom: 3px;
font-weight: bold;
}
.msgacc h3{
padding:0 0 0 20px;
width: 550px;
background: url(images/fdh3.gif) no-repeat 0 0;
border-bottom: 1px solid #A0C366;
}
.msgacc p {
margin:6px 0 3px 0;
padding:0 7px;
}
.msgacc a {
text-decoration: underline;
font-style:italic;
color: #404040;
}
.msgacc im {
display: block;
font-style: italic;
padding:2px 20px 0 20px;
}
.msgacc a:hover {
background: #EAF4D0;
}


et voici la page web :
<div class="msgacc">
	<h3>Fonctionnement</h3>
	<p>Ce site web permet aux particuliers et aux entreprises, de rechercher des techniciens, en plomberie, serrurerie, électricité, électro-ménager, dépannage, livraison, etc...
	 et de prendre rendez vous avec eux afin qu'il puisse venir vous dépanner.</p>
	<li>Première étape</li>
	<p>
	Elle consiste à <a href="#">créer un compte</a>, ce qui va permettre à nos techniciens de connaître vos coordonnées et ainsi de savoir à quelle adresse se rendre, 
	pour effectuer le dépannage.</p>
	<li>Deuxième étape</li><
	p> 
	Elle consiste à vous identifier à partir du login et mot de passe qui vous serons fourni lors de votre inscription.
	<im>Si toutefois <a href="#">vous avez perdu votre login ou mot de passe</a>, merci de ne pas recréer un nouveau compte, il vous est possible de les retrouver en inscrivant 
	l'adresse e-mail qui vous a servi lors de votre inscription dans un espace spécial, ensuite vos identifiants vous seront renvoyé dans cette boite e-mail.</im></p>
	<li>Troisième étape</li>
	<p>
	Une fois identifié, une nouvelle page va s'afficher et vous présenter tous les techniciens qui proposent leurs services sur le site, il ne vous suffit plus alors qu'a sélectionner
	le technicien de votre choix afin qu'il vous dépanne.<br>
	L'emploi du temps de ce technicien va alors s'ouvrir devant vous, il vous sera alors possible de sélectionner le créneaux horaires pendant lequel vous souhaiter être dépanné,
	sauf ceux en rouge car le technicien sera déjà occupé avec un autre client.</p>
	<li>Quatrième</li>
	<p>
	Une fois le créneau horaire sélectionné, il ne vous reste plus qu'à choisir le type de dépannage qui vous concerne, en pensant à bien remplir correctement tous les champs
	qui vous sont demandés.
	Une fois le formulaire correctement remplie, vous pouvez valider ces information en appuyant sur le bouton de confirmation, ainsi le technicien pourra prendre en compte
	votre demande depuis son espace technicien.</p>	
	<li>Cinquième et dernière étape</li
	<p>
	Pensez à être présent à l'adresse et à l'heure prévue dans la souscription du formulaire de dépanage.
	</p>
</div>
est ce normal que tu n'utilise pas de balise <ul> ???
il me semble que les balises <li> y sont liées

sinon il manque un > au cinquieme </li>
Modifié par sane79 (26 Jul 2005 - 16:53)
Je ne pense pas qu'il soit obligatoire de mettre une balise <ul> car en fait ce ne sont pas des listes à la suite, comme il y'a des <p></p> entre, alors j'ai préféré crée un autre bloc msgacc qui contient les <li><h3> et <p>...

L'erreur ne provient pas du fait qu'il n'y est pas de <ul> je suppose de toute facon ..?
red210 a écrit :
Je ne pense pas qu'il soit obligatoire de mettre une balise <ul> car en fait ce ne sont pas des listes à la suite, comme il y'a des <p></p> entre, alors j'ai préféré crée un autre bloc msgacc qui contient les <li><h3> et <p>...

L'erreur ne provient pas du fait qu'il n'y est pas de <ul> je suppose de toute facon ..?



Woulaaaaaa Smiley smile

Bien sûr que si les <li> imposent un élément parent déterminant le type de liste à savoir <ul> => liste non ordonnée ou <ol> => liste ordonnée comme je disais au dessus (cross post avec le tient).

Ton code c'est du charabia en fait là, on ne fait pas n'importe quoi pouf pouf parceque ça fait joli.

Ton utilisation des listes est peut être erronée.

Qu'est ce que tu veux faire exactement ? (structurelement parlant, le visuel on s'en fout, ça se gère à part avec les CSS)
Salut olivier...

Mais pourquoi donc mon code serait-il du charabia ??

regarde le résultat c'est ce que je veux : http://www.sidem.ch/test

mon <im> est un bloc que j'ai créer pour en fait faire une marge et mettre le texte en italique, c'est propre ... sinon pkoi ??
Modifié par red210 (26 Jul 2005 - 17:04)
Bonjour,

Tu n'utilises pas les listes correctement. Tes éléments de listes (<li>) devraient se trouver dans des <ul> (listes non ordonnées) ou <ol> (listes ordonnées).
Probablement ces <li> ne sont pas des items de liste.

<im> ??
<im> est un bloque que j'ai crée pour donner un style particulier au texte qui se trouve entre.

italic message ...
Reprenons :

comme dit X fois, ton utilisation des <li> est erronée, je pense qu'en fait ta page n'est pas une succession d'éléments de liste et que tu utilises <li> juste pour avoir une puce.
Faudrait que tu nous expliques ce que tu eux faire pour considérer les possibilités.
En tous les cas, <li> ne se passe pas d'<ol> ou d'<ul> c'est comme ça.

<im> n'existe pas, on n'invente pas des balises comme ça pour le plaisir Smiley ohwell
J'ai l'impression que tu as fait un melting pot de <i> (italique) et <em> (emphase)

C'est (entre autre) pour ça que ton code est un charabia.

Passe ta page au validateur pour t'en rendre compte.
En rajoutant <ul> ca passe nikel, mais par contre le texte sous IE est toujours en gras alors qu'il ne devrait l'être que pour les balises <li> de msgacc !!! si j'ai bien lu les tutos en tout cas, et j'ai également vue sur d'autres site la relation parent-enfant, et j'ai l'impression qu'elle n'est pas respecté ici ...

Help lol et merci Smiley cligne
Tu pourrais répondre à ma demande précédente :
Qu'est ce que tu veux faire ?
Quel est le sens de ton texte ?
Pourquoi utilises tu une liste ?
Quelle est la structure du document ?


Sans ces questions essentielles au balisage d'un document, il va être difficile de t'aider.
Tout a fait j'utilise <li> juste pour avoir une puce car comme tu vois je ne liste effectivement pas à la suite que des mots mais entre se trouve du texte.

comment pourrai je avoir la puce sans utiliser <li> ???

J'ai compris il faut bien que j'utilise <ul> les prochaines fois lorsqu'il faudra que je liste a la suite...

Mais pourquoi donc ne puis je pas créer une balise du nom que je souhaite ???
Il me semblait pourtant avoir compris que l'on pouvait ???
Quelle est donc la meilleur solution de créer un <div> pour mettre mon texte en italic ???

Dernière question, comment se fait il que tout mon texte se mette en gras sous IE ..??

Merci encore
Bonjour red210,

red210 a écrit :
Mais pourquoi donc mon code serait-il du charabia ??

regarde le résultat c'est ce que je veux : http://www.sidem.ch/test

mon <im> est un bloc que j'ai créer pour en fait faire une marge et mettre le texte en italique, c'est propre ... sinon pkoi ??


Ton code n'est pas du "chariabia" au sens où il ne voudrait rien dire. C'est du chariabia au vrai sens du terme, beaucoup moins péjoratif : il n'a de sens que pour celui qui l'a inventé, c'est à dire pour toi.

Je m'explique :
- tu crées de nouveaux éléments comme ton <im>
- tu crées tes propres règles d'utilisation des éléments HTML comme <p><li>...</li></p>
- tu te dis : C'est bon, ça marche. Car j'ai le résultat que je veux : http://www.sidem.ch/test

C'est le 3e point qui fausse tout : est-ce que tu veux simplement quelque-chose :
- qui s'affiche comme tu le souhaites dans les navigateurs graphiques ?
- mais qui perd la plus grande partie de son sens aux yeux d'un moteur de recherche, d'un navigateur non graphique et sans support CSS, d'un script de syndication, ou, en fait, de tout autre outil disponible sur le Web et suceptible d'exploiter ton code ?

Parce que c'est exactement ce que tu as réalisé Smiley cligne

En fait, il y a un double malentendu :
- tu pourrais créer des éléments nouveaux. A condition de les rendre accessibles pour toutes les machines Web. En écrivant ce qu'on appelle une DTD par exemple. Et ce ne serait même pas encore suffisant, car les DTD privées ne sont pratiquement pas exploitées en dehors de leurs créateurs.
- ce que tu cherches à obtenir, tu peux parfaitement le faire sans créer de nouveaux éléments : XHTML1.0 ou HTML4.01 couplés à CSS te permettent de créer les effets de présentation que tu souhaites, sur la base d'un code standard, c'est à dire composé uniquement des balises "officielles", utilisées selon les règles officielles...
- Ta créativité n'y sera pas brimée : bien utiliser ces outils standards, c'est tout aussi amusant que de jouer tout seul dans son coin, tu sais Smiley biggrin
Bonjour.
red210 a écrit :
Salut olivier...
Mais pourquoi donc mon code serait-il du charabia ??
regarde le résultat c'est ce que je veux : http://www.sidem.ch/test ...

Ben... peut-être parce que ta page : validteur css et parce que :validateur html
<edit> désolé l'url du validateur html ne semble pas fonctionner. en direct de page en ligne : 21 erreurs.
Modifié par Aureance (26 Jul 2005 - 17:34)
DESOLE NOS REPONSES S ENTREMELLENT C EST POUR CA QUE JE REPONDS A COTE
a écrit :

Tu pourrais répondre à ma demande précédente :
Qu'est ce que tu veux faire ?
Quel est le sens de ton texte ?
Pourquoi utilises tu une liste ?
Quelle est la structure du document ?


1- Je veux faire une page de présentation
2- (UN BLOC DE COULEUR ... - 1 titre - des paragraphes)
(UN BLOC DE COULEUR ... - 1 titre - des paragraphes)
(UN BLOC DE COULEUR ... - 1 titre - des paragraphes)
3- pour avoir le petit rond Smiley smile
4- voir 2.

Tout a fait j'utilise <li> juste pour avoir une puce car comme tu vois je ne liste effectivement pas à la suite que des mots mais entre se trouve du texte.

comment pourrai je avoir la puce sans utiliser <li> ???

J'ai compris il faut bien que j'utilise <ul> les prochaines fois lorsqu'il faudra que je liste a la suite...

Mais pourquoi donc ne puis je pas créer une balise du nom que je souhaite ???
Il me semblait pourtant avoir compris que l'on pouvait ???
Quelle est donc la meilleur solution de créer un <div> pour mettre mon texte en italic ???

Dernière question, comment se fait il que tout mon texte se mette en gras sous IE ..??

Merci encore
Je veux faire un site le plus propre, le mieux pour les validateurs les handicapés et tout le monde, validé sur tous les niveaux...

Pour l'instant je vois pas trop de truc énorméous, a part peut etre ma balise <im> et mes balises <li> qui ne sont pas appropriés il est vrai ...
Bonjour,

Je crois qu'en l'occurence ce que tu souhaites obtenir c'est la mise en forme d'un paragraphe de texte. Dans ce cas précis, il faudrait définir une classe dans ta feuille de style CSS. Cela donnerait dans le code (X)HTML :

<p class="ItalicText">BlaBlaBla</p>


et le code CSS qui définit la classe ItalicText :

.ItalicText { font-style: italic; }


Et pour agrémenter tes titres de paragraphes d'une image (quelconque au demeurant, une puce ou autre chose) il te suffit simplement de placer tes titres à l'intérieur de balises prévues à cet effet, les <h1>...<h6> et de définir ensuite les classes correspondantes dans la feuille de style CSS pour mettre en forme ces titres.

Le plus simple c'est d'aller faire un petit tour à cette adresse :
http://validator.w3.org/check?verbose=1&uri=http%3A//www.sidem.ch/test/ pour te rendre compte que ta page est construite de façon inadéquate (le code est mal structuré).

Cordialement,
Jérôme.
En fait ton problème est assez courant,

il consiste à partir, pour la construction d'une page web, d'un rendu à l'écran voire d'un choix de mise en page, voire même d'un choix complet de design.
Or ce n'est pas vraiment comme ça que ça devrait se passer.

Faire une page web c'est d'abord et avant tout réaliser un document html complet, bien pensé, bien organisé et structuré avec un balisage adéquat.

Après et seulement après on peut et, d'une certaine manière, ce n'est même pas une obligation, avancer sur un aspect plus visuel. En fait les css pour media screen sont faites pour ça. Leur grand avantage et sans doute leur finalité c'est de pouvoir traiter ce genre de chose sans faire de dégat dans le document html d'origine.

Donc dans l'étape 1 (réalisation du document html) à quoi sert <li> ?

>> à créer un item de liste (et donc bien sur il faut bien une liste).
Et pas du tout à avoir une puce.

Pourquoi <im> est du charabia >> Parce que cette balise ne se rapportant à rien par définition (elle n'existe pas) elle ne constitue donc pas un balisage adéquat pour quoique ce soit.
Modifié par clb56 (26 Jul 2005 - 17:40)
Ok les gars super j'ai bien compris vos réponses...

Je vous remercie tous pour l'aide apporté, j'adore le CSS et le HTML ca fait longtemps que je baigne dans le site web mais c'est mes petits débuts en CSS donc je lis je lis et je relis, pour que mon site soit le plus propre et fresh niveau code a voir...

Tout mes documents sont validé, sauf le HTML a cause d'une application flash mais bon...

Je pars du boulot je vous recontacte demain en cas de besoin, a bientot les amis !!! Smiley biggol