|
|
Voir le sujet précédent :: Voir le sujet suivant |
Auteur |
Message |
laurent74 frontpage mioche
|
Question CSS débutant , Posté le: 13-04-2004 12:39 |
|
|
Bonjour,
Je me heurte à deux problèmes que je n'arrive pas à résoudre :
Pour le code html suivant :
Code: |
<div class="note" style="margin-left: 0.5in; margin-right: 0.5in;">
<p> ma note ....</p>
</div> |
J'applique le code CSS suivant :
Code: |
.note {
margin-left:0in ;
padding: 8px;
font-size: 10pt;
width:600pt;
border-style:solid ;
border-width:2px;
border-color:#000000;
font-family : sans-serif;
background: #CCFFCC;
} |
Toutes les instructions sont respectées sauf ...
Mes deux soucis :
1 - Je voudrais que ma "note" soit alignée à gauche.
Mes sources sont en xml et je les mouline
avec xsltproc pour obtenir des pages html.
Cependant, lors du processus, xsltproc défini une marge à gauche
de 1/2 inch que l'on retrouve codé en dur dans le code html.
Je pensais qu'en spécifiant une marge nulle dans ma CSS pour cette
classe, cela serait réglé, et bien non
Pourquoi la règle CSS ne l'emporte t-elle pas ?
2 - J'aurais voulu associer une petite icône" à la manière des listes
à puces au "bloc" de cette note mais j'ai beau chercher je ne trouve
pas de synthaxe qui fonctionne.
Est-ce tout simplement possible ?
J'espère être assez clair dans l'expression de mon problème et qu'une bonne âme pourra m'indiquer la marche à suivre
En vous remerciant par avance,
Laurent |
|
|
laurent74 frontpage mioche
|
1 point résolu , Posté le: 15-04-2004 22:37 |
|
|
j'ai résolu ou plutôt contourné le problème de l'association d'une icône/image à un bloc de texte grace à l'exemple donné par "poupinette". Je dis "contourné" car je place une image à l'intérieur de mon bloc (en haut à gauche) alors que je voulais la placer à l'extérieur. je prend l' exemple d'un "warning" :
Je défini l'icône :
Code: |
.warning {
background: url(warning.gif) no-repeat top left;
} |
Puis je décale le titre de la "note" de 50 pixel vers la droite (en créant une marge à gauche) pour qu'il ne soit pas recouvert par l'image qui en fait 48 :
Code: |
.warning.title{
margin-left: 50px;
} |
Vous pouvez voir ce que cela donne ici :
http://www.ac-grenoble.fr/carmi-internet/slis/doc/docbook/slis-howto/ch07s03.html
Mais ... j'ai crié victoire trop vite :
Un peu plus tard, je consulte les pages avec Mozilla (je n'avais pas précisé que je vérifiais prédement avec IE) et je découvre avec une certaine amertume que ma petite astuce de décaler le titre vers la droite n'est pas interprétée par mozilla
bilan : l'icône "bouffe" le titre et c'est "cracra" : j'ai cherché et retourné cela dans tous les sens, que neni !
Finalement, j'ai rédui la taille de mes images à 32*32 pour que cela fasse un peu plus propre.
En revanche, je n'arrive toujours pas à aligner mon bloc texte à gauche
Je pense que cela est normal car il est le fils de ses parents, non alignés eux même. J'ai éssayé :
Code: |
.note {
position:absolute;
margin-left: 50px;
} |
Cela fonctionne (ma note est enfin alignée à gauche) mais chevauche alors la section du dessous !! bref, à s'arracher les cheveux
A pluche,
laurent |
|
|
|
|
Accueil Forum
-> css |
Toutes les heures sont au format GMT + 1 Heure
|
Page 1 sur 1 |
|
S'enregistrer
Profil
Se connecter pour vérifier ses messages privés
Rechercher
Membres
FAQ
Connexion
|