28220 sujets

CSS et mise en forme, CSS3

upload/1666-blembloc.jpg
J'ai des lignes de texte qui sortent d'un div... J'ai jamais vu ça. Y'a une solution mais comme je ne vois pas pourquoi (et surtout comment) ça fait ça j'viens vous demander conseil sur la chose...
Merci d'avance.

Sur l'image : en haut à gauche comme on le voit/ en haut à droite bloc apparent avec WebDevelopper (plugin Firefox)/ en bas à gauche texte sélectionné pour qu'on voit bien ces jolies lignes...
Modifié par iPomme (23 Jul 2005 - 17:36)
Bonjour Smiley cligne
Voici donc le XHTML incriminé
    <div id="bloc_membre_connect">
      <ul> 
	    <li>Votre compte<br />
          <fieldset>
            <legend><strong>Vous êtes connecté(e) en tant que <? echo $username; ?>.</strong></legend>
            <ul>
			  <li><a href="user.php">Vos préférences</a></li>
			  <li>Messagerie privée : <? echo Mess_Check_Mail_Sub($username, ""); ?></li>
			  <li><a href="submit.php">Soumettre un article</a></li>
			  <li><a href="user.php?op=logout">Déconnexion</a></li>
			</ul>
          </fieldset>
        </li> 
      </ul>
    </div> 

Et la CSS qui va avec :
#right #bloc_membre_connect {background: url(../images/blocs/b_mbr_haut.gif) no-repeat 0 top; margin: 0 0 0 8px; padding:15px 0 0 0 }
#right #bloc_membre_connect ul { padding: 0px 0 10px 0; background: url(../images/menu-bottom.gif) no-repeat 0 bottom; width: 132px }
#right #bloc_membre_connect ul li { color: #FFFFFF; font-size: 90%; font-weight:bold; padding: 5px 0 0 0px; list-style: none }
#right #bloc_membre_connect ul li fieldset { padding: 5px 0 0 10px; margin: 10px 0 0 0; border: 0 none; font-size: 75% }
#right #bloc_membre_connect ul li fieldset legend { display:block }
#right #bloc_membre_connect ul li fieldset strong { color: #EBF9FF } 
#right #bloc_membre_connect ul li fieldset label { display: none }
#right #bloc_membre_connect ul li input { font-weight:lighter; color:#000; vertical-align: middle; display:inline; border: 1px solid #333; height: 16px; font-size: 100%; margin: 5px 0 0 0; padding: 0 0 0 3px }
#right #bloc_membre_connect ul li input.bouton { margin: 5px 0 0 0; padding: 0; height: 18px; vertical-align:middle; background-color: #fff; color: #000; width: 20px; text-align: center }
#right #bloc_membre_connect ul li input.bouton_hidden { display: none }
#right #bloc_membre_connect ul li a#devenir_membre, a:hover#devenir_membre { padding: 0 5px 0 15px; text-decoration: none; color: #FFFFFF }
#right #bloc_membre_connect ul li a:hover#devenir_membre { text-decoration: underline }


Merci de votre aide Smiley ravi
Apparemment le problème vient de <legend> : son contenu reste sur une ligne quelque soit la largeur qu'on lui donne.

deux solutions à l'arrache :

forcer le retour à la ligne du contenu via <br>

scinder le contenu en deux <strong> en {display:block;}

PS. Pas génial ta présentation du code css, c'est très confus.
Modifié par clb56 (23 Jul 2005 - 16:16)
En fait, <fieldset> et <legend> n'ont apparemment aucune utilité ici : il ne s'agit pas, sauf erreur de ma part, d'un formulaire, n'est-ce pas ?

D'autre part, la structure en listes emboîtées est-elle vraiment nécessaire ? A quoi sert le premier <ul> ?

Ce code gagnerait AMHA à être d'abord simplifié Smiley cligne
Bien vu Laurent, c'est vrai qu'au lieu de proposer des solutions à l'arrache pas très intéressante j'aurais lieux fait d'orienter iPomme vers un balisage html plus adéquat.
Cette partie est l'espace de connexion. Ce que vous voyez là c'est lorsqu'on est connecté.
Toutes ses balises inutiles le sont avant de se loguer. Il me semblait normal de garder la même "architecture" pour les personnes visionnant le site sans feuille de style.
C'est vrai qu'à la réflexion un HR au dessus et un en dessous devrait garder la chose claire. Je sais pas du tout en fait. Qu'en pensez vous ?

(ps : effectivement c'est même pas propre du tout// vu que je bossais sur une autre partie de la CSS j'avais réduit celle-ci...)
Ok grand chef Smiley lol
Effectivement maintenant ça marche. C'est juste moche. Mais ça devrait se corriger facilement ça Smiley smile
Merci à tous !
iPomme a écrit :
Ok grand chef Smiley lol


Paf ! Je l'ai pas volée, en effet Smiley cligne

(Ce que c'est que d'être trop pressé et de ne pas avoir le temps de développer : mon message était assez lapidaire et pas trop argumenté, désolé. Il faudrait en reparler, un de ces quatre, de cette idée...)
Modifié par Laurent Denis (23 Jul 2005 - 17:54)