28173 sujets

CSS et mise en forme, CSS3

Bonjour,
est-ce que quelqu'un pourrait me dire (tout....) ce qui cloche dans mon code bidouillé ? :


<div style="border: 1px solid #554646; padding: 10px; width: 144px; float: left; background-color: #242424">
<h2>RESUME</h2>
<p>blahblah...</p>
</div>
<div style="padding: 10px; width: 314px; float: left; background-color: #2d2d2d">
<h2>
<div style="background-color: #242424">CRITIQUE RAPIDE</div>
</h2>
<p><img width="140" height="199" align="left" style="margin-right: 10px" src="/images/iceharvest/2.jpg" />blabla...<br />
<img width="55" height="18" align="right" style="border: 0pt none  ! important" src="/images/etoile2.gif" />[ critique détaillée en page 2 ]</p>
</div>
<div class="billet" />
</div>
<!--nextpage-->  (*PROPRE A WORDPRESS mon CMS)
<p><img width="497" height="148" style="border: 0pt none  ! important" src="/images/iceharvest/23.jpg" />
<div style="border: 1px solid #554646; padding: 10px; background-color: #242424"></p>
<h2>PREAMBULE</h2>
<p>blabla</p>
</div>
<div style="margin-top: 30px; margin-left: 10px; margin-right: 10px; background-color: #242424">
<h2>CRITIQUE DETAILLEE</h2>
</div>
<div style="padding: 10px; width: 230px; float: left; background-color: #2d2d2d">blabla <img width="220" height="121" src="/images/iceharvest/11.jpg" /><br />blabla !</div>
<div style="padding: 10px; width: 230px; float: left; background-color: #2d2d2d"><img width="220" height="121" src="/images/iceharvest/10.jpg" /><br />
blabla<img width="220" height="121" src="/images/iceharvest/15.jpg" /></div>
<div class="billet" />
</div>


Je précise que j'utilise un CMS et que je tape direct comme un billet Smiley murf

J'ai essayé de remplacer certains code comme pour billet en mettant des raccourcis dans la feuille de style mais çà ne fonctionne pas, je n'y comprends rien !

Autre problème mes </div> derrière justement ces <div class="billet"> (qui correspondent à des style="clear:both;" ) on tendance a disparaitre de façon imcompréhenssible !

Voilà, je suis au comble du désespoir Smiley bawling Smiley lol ... un mois que je tripatouille et toujours pas de site potable en vu... Smiley langue

Et c'est pas près d'être fini avec tous les autres problèmes potentiels qui ne demande qu'à surgir ! Smiley fache Smiley lol

++
Modifié par monsterman (08 Dec 2006 - 17:52)
Salut ...
Tu veux vraiment savoir tout ce qui cloche ?
Tu n'as pas peur ! Smiley lol

Moi, la première chose qui me saute au yeux, c'est les balises <style> à l'intérieur de ton code HTML...
Tu ne voudrais pas faire une jolie feuille de style annexe ?!? Smiley murf
Bonjour,

Juste en passant :

a écrit :
c'est les balises <style> à l'intérieur de ton code HTML...


Il ne s'agit pas de balises mais d'attributs qui sont très correctement utilisés.

C'est évidemment moins pratique que des styles externes ou embarqués dans le head, mais il n'y à franchement rien de choquant à ça.

Par ailleurs : sans le lien vers ta page cela va être très difficile de t'aider.

Jean-pierre
Modifié par jpv (04 Dec 2006 - 19:41)
Ah oui pardon.

L'adresse de mon site est dans ma signature, en bas Smiley cligne (page d'accueil)

Le texte est en deux parties (la deuxième en haut).

a écrit :
Tu ne voudrais pas faire une jolie feuille de style annexe ?!?


Eh bien si j'aimerais bien mais je ne peux pas comme je le disais.

Si par exemple je tape ceci dans la feuille de style du templace de mon CMS :

.jaune {
  background-color: #ffff00;
  float: right;
  width: 100px;
  margin: 0;
}


et que je mets ensuite en correspondance <div class="jaune" /> (ou <p class...) ensuite dans mon billet il ne me le prend pas Smiley confus

++
Modifié par monsterman (04 Dec 2006 - 20:05)
Bonjour, je reviens à la charge.

J'ai enfin réglé mes problème de class. Mon code donne ceci maintenant :

<div class="resume" /><h2>RESUME</h2><p>blablabla</p>
</div>
<div class="texte" /><div class="titre" /><h2>CRITIQUE RAPIDE</h2></div><p><img width="140" height="199" align="left"</p> style="margin-right: 10px" src="/images/iceharvest/2.jpg" />blablabla
<p><img width="55" height="18" align="right" style="border: 0pt none  ! important" src="/images/etoile2.gif" /></p>
</div>
<div class="end" />
</div>



J'ai réussi à enlever quelques erreurs mais la je coince... ma tentative de validation xhtml me donne ceci comme erreurs :




a écrit :
# Error Line 59 column 9: end tag for element "div" which is not open.

</div>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry.

&#9993;
# Error Line 62 column 7: end tag for element "div" which is not open.

</div>

&#9993;
# Error Line 65 column 5: end tag for element "div" which is not open.

</div>

&#9993;
# Error Line 74 column 7: "ul" not finished but containing element ended.

</div>

&#9993;
# Error Line 74 column 7: end tag for "ul" omitted, but OMITTAG NO was specified.

</div>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

&#9993;
# Info Line 73 column 2: start tag was here.

<ul>

# Error Line 79 column 10: end tag for "ul" which is not finished.

</ul>

Most likely, You nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, <head> generally requires a <title>, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

&#9993;
# Error Line 107 column 5: end tag for element "div" which is not open.

</div>


Est-ce que quelqu'un aurait la gentillesse de m'expliquer ce qui ne va pas ? Smiley murf

++
Salut,

Attention aux balises d'ouvertures qui ne s'écrivent pas "<div />" mais "<div>".

Par ailleurs, plutôt que
<div class="titre"><h2>CRITIQUE RAPIDE</h2></div>
pourquoi n'écris-tu pas
<h2 class="titre">CRITIQUE RAPIDE</h2>
?

Il te suffira alors de remplacer dans ta feuille de styles ".titre h2" par "h2.titre".
Salut Eldebaran ! (joli ton site en passant Smiley cligne )

A oui merci pour les div je n'avais même pas fait gaffe !

Maintenant c'est quoi ces histoires de ul ? Smiley ohwell

++
monsterman a écrit :
Salut Eldebaran ! (joli ton site en passant Smiley cligne )
Merci. Smiley smile
monsterman a écrit :
Maintenant c'est quoi ces histoires de ul ? Smiley ohwell
Visiblement, tu as des "<ul>" orphelins qui trainent dans ton code.
C'est bizarre j'en utilise aucun Smiley confus Smiley eek
Comment est-ce qu'ils pourraient être orphelin, il y en a aucun de commencé...
Hummm.... pas cool çà !
monsterman a écrit :
C'est bizarre j'en utilise aucun Smiley confus Smiley eek
Comment est-ce qu'ils pourraient être orphelin, il y en a aucun de commencé...
Hummm.... pas cool çà !
Ben pourtant, une recherche dans ton code me montre qu'il y en a bien. Smiley langue
est-ce que tu pourrais me dire où s'il te plait ?
ah oui nan tu veux dire que l'analyse conclue quand même dans ce sens...

oh c'est casse pied ! y'a toujours un nouveau problème Smiley bawling Smiley lol