28221 sujets

CSS et mise en forme, CSS3

Css et cadre(clos)

bonjour je suis en train de realiser un cadre a l'aide d'un tuto!
j'ai un probleme pour en créer un lorsque je met une image dedans!
Il s'agit d'un cadre qui s'agrandit automatiquement selon ce qu'il y a dedans!

exemple de mon probleme:


.dl2 {         /* positionnement du cadre, que vous pouvez modifier */
position: absolute;
left: 50px;
top: 550px;
width: 150px;      /* largeur du cadre, selon votre image de fond */
}

.dl2, .dt2, .dd2 {         /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

.dl2 {         /* image qui sera fixée en bas du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 35px;   /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
}

.dt2 {         /* définitions du titre du cadre */

height: 50px;
background: url(haut.gif) top left no-repeat;
font-size: 1em;
font-weight: bold;
text-align: center;
}

.dd2 {
padding: 5px 20px 0 10px;
text-align: left;
background: url(milieu.gif) top left;    /* arrière-plan intérieur qui va se répéter */
}


et le code html


<dl class="dl2">
      <dt class="dt2">Jeux</dt>
      <dd class="dd2">
         <p><img src="site web/jeux.jpg" title="un petit jeux"></img>
</p>
      </dd>
   </dl>


sachant que mon image est large de 120px/115px!
mon cadre marche tres bien sous IE mais alors sous firefox ça marche pas du tout le cadre est séparé par un gros espace blanc enfin c'est la cata!!
si vous pouviez m'aider
meci
Modifié le 14 Jan 2005 - 22:15
Tu aurais une page avec un aperçu de la chose pour qu'on puisse visualiser la chose ?
(et évite les points d'exclamation à la fin de chaque phrase, s'il te plait, et sans vouloir être agressif)
et la ponctuation alors,on en fait quoi???
bon voici un exemple EDITED (résolu) sous IE ça fonctionne mais alors sous firefox ça marche pas pour le dernier cadre.
Modifié le 14 Jan 2005 - 15:33
Administrateur
imotep a écrit :
bonjour je suis en train de realiser un cadre a l'aide d'un tuto!
j'ai un probleme pour en créer un lorsque je met une image dedans!
Il s'agit d'un cadre qui s'agrandit automatiquement selon ce qu'il y a dedans!
tout le cadre est séparé par un gros espace blanc enfin c'est la cata!!

Ce n'est plus de la ponctuation, c'est de l'acharnement Smiley biggol
Et moi qui croyais bêtement que la ponctuation c'était de mettre un point à la fin des phrases. Faudrait que je me remette à la page Smiley lol
<HS>
> Raphael

Tu ponctues avec des smileys toi ? Smiley cligne Ouarf Smiley biggol . Tu n'as qu'un point pour trois phrases. Smiley cligne
</HS>
bonjour
le probleme est il aussi chez vous?
sous mozilla ou netscape existe il egalement?
merci
Modifié le 14 Jan 2005 - 08:05
D'après un de mes collègues, ca serait le javascript de lycos qui mettrait le boxon, ou le position "absolute".

Faudrait tester le code sur un autre hébergement pour voir.
Je me suis dit "Allé on va voir son site et regarder le code source". Mais impossible de trouver, à cause d'une chose :
<dl class="dl2">

Pourquoi n'as-tu pas nommé ce dl avec un id ? Genre :
<dl id="jeu">

Entre les dl2, les dt2, c'est impossible en regardant la CSS, de savoir de quoi il s'agit !
Aussi, pour ce petit bout de code :
<dl class="dl2">
  <dt class="dt2">Jeux</dt>
  <dd class="dd2"><p><img src="jeu.jpg" title="un petit jeux"></img></p></dd>
</dl>

Pourquoi avoir mis l'image dans un paragraphe ? Pourquoi le '</img>' qui n'existe pas ? Pour "un jeux" au lieu de "un jeu" ? Pourquoi toutes ces class ? Modifie ce bout de code par :
<dl id="jeu">
  <dt>Jeux</dt>
  <dd><img src="jeux.jpg" title="un petit jeu" alt="copie d'écran du jeu" /></dd>
</dl>

Ensuite corrige ton CSS en utilisant ceci :
#jeu {
...
}
#jeu dt {
...
}
#jeu dd {
...
}

Modifié le 14 Jan 2005 - 12:19
bonjour et merci de ces precisions!
il est vrai que mon code est un peu bazard mais ej en maitrise pas completement encore le css!!!
je vais rectifier celà!!

Pour mon probleme,il venait de fait(comme tu l'as dit) de la balise <img></img> qui n'existe pas en xhtml!
Donc du coup j'ai modifié celà par <img /> et le tour est joué ,c'est ikel a la fois sur IE et sur firefox!

MErci en tout cas du tuyeau!
imotep a écrit :

Pour mon probleme,il venait de fait(comme tu l'as dit) de la balise <img></img> qui n'existe pas en xhtml!


En fait il existe. L'XHTML est une application de l'XML, donc les règles de syntaxes de l'XML s'appliquent à l'XHTML. Comme indiqué dans la spé XML, on peut utiliser soit <img />, soit <img></img>, mais la dernière forme n'est apparemment pas gérée (ou alors il faudrait tester avec le bon type MIME).
Bon je suis en train d'essayer de simplifié le code!
mais ça foire lorsque je l'ai changé!

a écrit :

#formu { /* positionnement du cadre, que vous pouvez modifier */
margin-left: 40px;
margin-top: 50px;
width: 150px; /* largeur du cadre, selon votre image de fond */
}

#formu, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}

#formu, dl { /* image qui sera fixée en bas du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 30px; /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
}

#formu dt { /* définitions du titre du cadre */
padding-top: 5px;
height: 30px;
background: url(haut.gif) top left no-repeat;
font-size: 1em;
font-weight: bold;
text-align: center;
}

#formu dd {
padding: 5px 5px 0 0px; /* gestion des espaces internes du cadre */
text-align: justify;
background: url(milieu.gif) top left; /* arrière-plan intérieur qui va se répéter */
}

.liste {
list-style-image: url(http://www.sequane.com/hp/themes/new_1/img/icon_small.gif);
}


et voici mon code html

a écrit :
<dl id="formu">
<dt>Communauté</dt>
<dd >
<p><ul class="liste">
<li> <a href="sans.html">Astuce du jour</a></li>
<li><a href="#">Logiciel du jour</a></li>
<li> <a href="#">Mots croisés<a></li>
</ul></p>
</dd>
</dl>


le cadre prévu a cet effet n'est pas identique,le margin-left n'est pas pris en compte!
pourquoi?
Modifié le 14 Jan 2005 - 21:46
bon j'ai reussi a trouver,mon css etait mauvais!
j'ai enlever tte les virgule et puis ça semble bien marcher!
Sujet clos
Aller à