créer un site


Question CSS débutant

Poster un nouveau sujet sur css   Répondre au sujet à css:Question CSS débutant    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
laurent74
frontpage mioche
frontpage mioche
MessageQuestion 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 Sad
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 Wink

En vous remerciant par avance,

Laurent
laurent74
frontpage mioche
frontpage mioche
Message1 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 Sad
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 Sad
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 Wink

A pluche,

laurent
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Question CSS débutant    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales