28173 sujets

CSS et mise en forme, CSS3

Salut à tous ! Smiley biggrin

Mon problème est assez simple en fait , je cherchait les oeufs de paques dans mon jardin quand tout à coup je leve la tête et me prend mon cerisier en pleine tronche et la j'ai eu les idée claire je me suis dit mais oui c'est ça ! Smiley lol Smiley lol

et... heu...
Ba venons en au fait :

J'aimerai afficher mes news actuel (http://romain.giovanetti.free.fr/index.php) dans des cardes afin d'améliorer la lisibilité


et voici donc mon avancement plus que décevant ;
http://romain.giovanetti.free.fr/index.php?page=newsc

Le CSS du site est à cette adresse :
http://romain.giovanetti.free.fr/ganoninc.css


En fait on dirait que ce que j'ai fait en CSS laisse libre cour à n'importe quel interprétation par les navigauteur web , rien n'est pareil selon le naviguateur

Et biensur y en a aucun qui affiche comme je veux Smiley sweatdrop

Moi je veux ça : Smiley langue
http://img54.imageshack.us/img54/7706/news5sf.jpg


Voila d'avance merci pour vos futur aides Smiley smile
Salut à toi,

Vu que ça à l'air pas trop complexe je vais tenter de t'aider

Pour commencer, au lieu d'utiliser des ID pour chacune de tes <div> utilise plutot des CLASS, j'avais fait la même erreur que toi.

Pour tes news c'est casiement obligatoire, si tu a plusieur news sur la même page, tu ne peut pas utiliser plusieur fois la même ID, donc commence par modifier la totalitée de tes ID en CLASS, par contre les ID sont utilisé pour les javascript, rien ne t'empeche d'utiliser pour une même balise une ID et une CLASS de même nom.

Pour le titre de la news, au lieu de l'encadrer dans une <div>, utilise utilise une balise de titre (h1, h2, h3, ...) que tu positionnera comme tu veut (pense au marges que tu peut réinitialiser à zéro), là dessus tu pourra placer ton image en fond.

Pour le commentaire, tu pourrait également utiliser une balise titre avec un indice plus petit ou uniquement dans une <p> avec une CLASS

Pour finir le problème semble venir des marges de la balise de paragraphe, fait un essais avec ces modifications et tient nous au courant.

Ps : tenter de conserver le soulignement uniquement pour les liens, ça rend la lecture et la navigation plus compréhensible ou sinon spécifie des couleurs bien distincts Smiley cligne
Pour répondre aux classes et aux ID, je dirais qu'une classe qui n'est utilisée qu'une seule fois est une erreur et devrait être un id. Pourquoi mettre une classe si elle n'est utilisée qu'une seule fois ?
Une classe ne sera pas utilié qu'une fois dans mon cas car y a un array en php qui le répetera Smiley cligne

Sinon vais voir ce que tu m'a dit percherie cet aprem Smiley langue
Salut

Pour résoudre ton problème, il faut modifier les marges de ton paragraphe qui porte la classe titrenews (comme la dit pencherie, mets un titre Smiley cligne mais le principe reste le même). En effet, en laissant ainsi la marge supérieur de ton paragraphe est "reportée" sur l'élément parent, ce qui fait que tu as une marge blanche qui se place Smiley cligne
Antoine Cailliau a écrit :
Pour répondre aux classes et aux ID, je dirais qu'une classe qui n'est utilisée qu'une seule fois est une erreur et devrait être un id. Pourquoi mettre une classe si elle n'est utilisée qu'une seule fois ?


Oui ce que tu dis est parfaitement logique mais après reflection je prefère mettre des class me permettant en peut de temps d'inclure des élements identique sur la même page.

Admettont que dans deux ans je souhaite faire une modification, ça pourrait me laisser plus de souplesse tout ça, sans modifier ma feuille et toutes les pages qui sont basée dessus.

Surement que ce que je dis est une grosse bourde mais si ça en ai une, surtout prevenez moi... Smiley lol
Tout dépend de tes éléments mais de toute façon il vaut mieux profiter des cascades et des sélecteurs pour affiner les styles que de mettre des classes et des id à tout va Smiley cligne
Bon si je met des <div class="****"> y a plus rien qui s'affiche juste le texte :s

Sinon j'ai enlevé les margin des texte et mit le titre avec une balise titre <h4>

Mais le problème persiste :s
Antoine Cailliau a écrit :
Tout dépend de tes éléments mais de toute façon il vaut mieux profiter des cascades et des sélecteurs pour affiner les styles que de mettre des classes et des id à tout va Smiley cligne


C'est vrais, je suis en train de tenter d'appliquer tes conseils, faut que je recontrole mon code, je suis sur que ça pourrait me faciliter la vie
G@NON a écrit :
Bon si je met des <div class="****"> y a plus rien qui s'affiche juste le texte :s

Sinon j'ai enlevé les margin des texte et mit le titre avec une balise titre <h4>

Mais le problème persiste :s


Si tu met des CLASS, pense à mettre à jour ta feuille (je pense que à du le faire), pour controler utilise l'inspecteur DOM de firefox (je l'ai découvert hier), ça te permet de controler ce qui est appliquer et comment.


Pour la balise titre H4, il existe une marge, definie là à zero pour voir, surtour la marge et le retrait supperieur (margin et padding)
Bon j'ai mit tout en class

En fait le bleme qui empechait les class d'etre actif c'étyait que sur ma page de teste j'ai qu'une news donc ça fait des class unique , j'ai donc copier coller cette news factisse ^^


Je viens d'annuler les margin et padding de la baslise <h4> avec
h4 { 
margin:0; padding:0
} 


Sous firefox ça à l'air niquel , mais sous IE le footer de la news si on peut l'appeler comme ça dépasse la taille que je lui ai fixé (hou le vilain XD)

En fait le texte de posté par qui quand et combien de commenaire vient se placer directement en dessous de mon copr de news :s


PS pendant que j'y suis sous IE y a un bug dans le menus juste en dessous du bouclier , c'est pas trop génant mais si vous savez d'ou ça peut venir ça m'aderai bien ^^
Bon je viens de mettre ça sur mon site

http://romain.giovanetti.free.fr/index.php

Visiblement ça a l'air de marcher mais y a un petit bleme malgré

le
    .Textenews {
    font-size: 12px;
	white-space: normal;
	font: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #133f66;

}


le texte est définit à 12px et pourtant il assez gros :s quelqu'un sais pourquoi ?
Salut,

Hum, peut-être qu'un passage au validateur et une correction de ton HMTL résoudrais pas mal de chose. Parce que certains morceau comme
<p><div class = "newscadre"><div class = "newshader"><h4>---&gt;[WOW-europe]Un concours pour le jardin des nobles</h4></div>...

Me semble étrange Smiley cligne