28173 sujets

CSS et mise en forme, CSS3

Bonjour

Voici mon portfolio, qui niveau css est presque fini: http://nuts.freezee.org/
Mais comme d'apres l'apercu prévu : http://img33.imageshack.us/img33/5174/version33ej.png

On peut voir que je n'ai pas positionner l'image de la plume en fond du bloc principal:
http://nuts.freezee.org/images/plume.png

Et si je ne l'ai pas fait, c'est parce que je ne vois pas comment faire!
Il existe tellement de propriété css, mais pourriez vous m'aidez pour l'utilisation de propriété pour une seule image? Smiley rolleyes

Merci d'avance Smiley confused

Arthur Smiley ravi
Modifié par Nuts (05 Feb 2006 - 20:33)
Salut,
ajoute une division supplémentaire à l'intérieur de #corps et applique lui l'image de fond.

Sinon, evite les guillemets et quote dans les url() ou tout autre chemin dans les fichiers CSS, c'est source de conflit avec certains navigateurs.
Voila j'ai essayé mais le résultat n'est pas concluant, tu peux m'expliquer un peu plus, ou me corriger?(en fait on ne voi meme pas la plume, elle doit etre caché par autre chose Smiley ohwell )

Sinon je dois juste enlever les ' et ne rien metre a la place dans les url?
Au lieu de

<div id="corps"><div id="plume"></div>
...
</div>

fait

<div id="corps"><div id="plume">
...
</div></div>


Ce que tu fais actuellement ne donnait rien, div#plume n'ayant aucune dimension car étant vide.

Pour les quote, oui tu fais ça

background-image: url(tonimage.gif);

A la place de

background-image: url('tonimage.gif');


Sinon, pense à utiliser les propriétés raccourcies, c'est pas plus mal Smiley cligne
Effectivement je me doutai bien qu'il y avait un problème de ce coté la ^^

Par contre, la plume ne s'est pas positioné en bas comme et elle a aussi été coupé, cela doit venir du "background-position : bottom right;"(c'est la premiere foi que je m'en sert), peut tu m'aider?(on est parti sur un dialogue a deux personnes j'ai l'impression ^^)

Sinon pour les quote les voici enlevé, et les propriétés raccourcies je vais m'y mettre un de ces quatres, cela correspond j'ai l'impression a ce que j'ai appris étant les méga propriétés, cependant je m'y perd un peu avec ces propriétés, et je trouve le code moin clair, un jour peut-être, le temps viendra... ^^
Nuts a écrit :
Effectivement je me doutai bien qu'il y avait un problème de ce coté la ^^

Par contre, la plume ne s'est pas positioné en bas comme et elle a aussi été coupé, cela doit venir du "background-position : bottom right;"(c'est la premiere foi que je m'en sert), peut tu m'aider?(on est parti sur un dialogue a deux personnes j'ai l'impression ^^)

C'est à cause de ton padding dans #corps, déplace les déclarations de padding dans #plume et tout rentrera dans l'ordre Smiley smile
Nuts a écrit :

Sinon pour les quote les voici enlevé, et les propriétés raccourcies je vais m'y mettre un de ces quatres, cela correspond j'ai l'impression a ce que j'ai appris étant les méga propriétés, cependant je m'y perd un peu avec ces propriétés, et je trouve le code moin clair, un jour peut-être, le temps viendra... ^^


Conserve les propriétés détaillées si tu trouves ça plus clair au contraire ! je trouve que c'est le contraire moi Smiley cligne mais chacun voit midi à sa porte !
Peut être que lorsque tu seras plus à l'aise, tu changeras d'avis !
(par contre, ça diminue quand même la taille du fichier CSS et c'est pas plus mal, mais on est pas forcément à 1 ou 2ko près !)
Bien vu, merci beaucoup de ton aide Smiley cligne




ps: que j'en profite sait tu pourquoi dans ma premiere phrase, passioné par l’informatique. va a la ligne alors qu'il reste beaucoup de place en largeur et que le padding est petit pour ce coté ci!?

edit: d'ailleur je test un petit peu les méga propriétés mais desfois je bloque, comme là par exemple:
font:"Comic Sans MS", serif, #042858;
ou sa ne marche pas
Modifié par Nuts (05 Feb 2006 - 19:43)
Ton texte part à la ligne parceque la largeur spécifiée dans #plume est trop courte (à 720 ça semble aller).
Il manque une unité dans ton height: ...;

Ta propriété raccourcie pour la police n'est pas bonne :

font: 1em "Comic Sans MS", serif;
color: #042858;


Si tu ne spécifie QUE la famille de police, il faut par contre utiliser font-family: "Comic Sans MS", serif;
Par ailleurs, la famille générique de Comis sans MS n'est pas serif mais manuscrit (si j'ai bonne mémoire) ce n'est pas une erreur en soit, mais peu logique.

Les "mega" propriétés comme tu les appelles sont inutiles si tu ne spécifies pas tout.
Genre pour background :

background: #fff url(...) 50% 20%;

A la place de :

background-color: #fff;
background-image: url(...);
background-position: 50% 20%;


p.s. peux tu indiquer que ton sujet est résolu, merci
http://forum.alsacreations.com/faq/#item22
Modifié par Olivier (05 Feb 2006 - 20:19)