Imiter la balise "legend" d'un fieldset avec une "div"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Imiter la balise "legend" d'un fieldset avec une "div"

Message par Cyn le Mer 18 Juin 2014 - 23:14

Bonjour/Bonsoir !

J'essaie d'imiter ce qu'on obtient facilement avec les balises fieldset et legend via une div, puisqu'il est plus facile de mettre en forme des trucs dans une div que dans un fieldset. (Et parce que fieldset est supposé être réservé aux formulaires...) Cependant, ça ne marche qu'à 66,66%, comme on peut le voir sur mon forum de test.

Dans mes sections gauche et droite, tout est bon, c'est ce que je veux, mais au centre..? J'ignore pourquoi le titre se coupe en deux.

Voici de quoi à l'air la section du script du message d'en-tête qui s'y réfère :
Code:
<div class="centre">
   
   <div class="cadrecentre">
       <br />
      <div class="titreaccueilcentre">
          Créatures Anonymes de la Terre
      </div>
       Le texte
   </div>
</div>

Et le CSS qui y est rattaché :
Code:
.centre {
width:60%;
padding: 10px;
}

.cadrecentre {
height:325px;
overflow:auto;
padding: 5px;
border:solid 1px #DDCAA2;
background-color: #52321B;
font-family: Arial;
text-align:justify;
color:#000000;
font-size: 12px;
position:relative;
}

.titreaccueilcentre {
position:absolute;
left:5px;
top:-8px;
background-image: url(http://i39.servimg.com/u/f39/18/64/66/00/titret10.jpg);
background-position: center center;
height: 15px;
color:#DDCAA2;
font-family:lucida calligraphy, arial;
font-size:14pt;
font-variant:small-caps;
text-shadow: 2px 2px 2px black;
text-align: center;
line-height: 15px;
padding: 0px 5px 0px 5px;
}

Je remercie à l'avance toute personne qui saura m'aider. Flowers2 

Cyn
**

Féminin
Messages : 77
Inscrit(e) le : 08/09/2006

http://cat-rpg.forumactif.org/
Cyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Imiter la balise "legend" d'un fieldset avec une "div"

Message par Kinotto le Jeu 19 Juin 2014 - 10:47

Bonjour,

Retirez ceci dans le code de la classe .cadrecentre :
Code:
overflow:auto;

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Imiter la balise "legend" d'un fieldset avec une "div"

Message par AenigmA le Jeu 19 Juin 2014 - 11:44

Bonjour,
Sans oublier :

.centre {
padding: 10px;
width: 56%;
}

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Imiter la balise "legend" d'un fieldset avec une "div"

Message par Cyn le Jeu 19 Juin 2014 - 17:10

Bonjour,

Merci de bien vouloir m'aider. =)

Alors, j'ai retiré ce que vous m'avez dit, mais c'est pire que pire. Constatez vous même : http://moutonoir.forumactif.com/

Mon titre est okay, mais la div du centre bouffe toute la largeur du cadre d'en-tête.

Je crois que ça vient du fait de retirer le "overflow", puisqu'il n'y a eu aucun changement quand j'ai juste retiré la div ".centre". Par contre, je ne comprends pas pourquoi l'overflow fait ça... Normalement, il doit juste faire en sorte de faire apparaitre une barre de défilement si besoin est, non ? Pourquoi agit-il sur la largeur de la div ?

Merci encore de prendre de votre temps pour moi. ^^

Cyn
**

Féminin
Messages : 77
Inscrit(e) le : 08/09/2006

http://cat-rpg.forumactif.org/
Cyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Imiter la balise "legend" d'un fieldset avec une "div"

Message par Kinotto le Jeu 19 Juin 2014 - 17:15

Bonjour,

Personnellement, je vous ai juste proposé d'enlever l'overflow, essayez peut-être ainsi, sait-on jamais Rolling Eyes

Overflow gère le débordement de la div, cela revient à indiquer si le texte va être coupé de la div ou non. Ici, comme le texte dépasse et que l'option est automatique, overflow:auto revient à overflow:hidden, ce qui est très problématique dans ce cas précis. Vous pouvez toujours créer une deuxième div à l'intérieur, englobant le texte, pour avoir une scrollbar. Smile

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Imiter la balise "legend" d'un fieldset avec une "div"

Message par Cyn le Jeu 19 Juin 2014 - 17:26

J'ai remis la div ".centre" et ça marche pour le titre ! =D Merci !

Bon, là, elle est trop large, mais j'imagine qu'il me suffira d'en réduire le width.

J'aurais par contre une autre question : Puisque j'ai retiré l'overflow, maintenant, si je réduis la taille de la fenêtre de mon navigateur (ou si j'utilisais un écran moins large j'imagine), le texte dépasse la div dans le bas. N'y aurait-il pas un moyen de conserver l'effet de l'overflow, pour que mon en-tête soit adaptable à différente taille de fenêtre ?

Sinon, je pourrais toujours fixer la largeur de la div pour qu'elle ne se réduise pas, donc le texte resterait en place... mais j'aimais bien l'effet de l'overflow. x)


Je viens de voir votre "edit". Une seconde div pour le texte, pourquoi n'y ai-je pas pensé ! Haha !

Merci beaucoup pour votre temps et votre aide ! Bonne journée ! =)

Cyn
**

Féminin
Messages : 77
Inscrit(e) le : 08/09/2006

http://cat-rpg.forumactif.org/
Cyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Imiter la balise "legend" d'un fieldset avec une "div"

Message par AenigmA le Jeu 19 Juin 2014 - 18:03

Lol je vois que j'ai écrit vite ce matin et rien expliqué, il faut bien modifié le width à 56% et non pas enlevé la partie lol

eXplication : 20-60-20 = 100% plus les padding ça fait plus de 100% tout simplement

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum