Largeur auto

Bonjour,

J'ai 1 titre à droite duquel doit apparaitre une trait,
J'ai donc 2 éléments en float;
Seulement la div pour effectuer le trait étant vide, il semble que je sois obligée de lui mettre une largeur, hors il faudrait que sa largeur dépende de la largeur du titre :

<div id="global">
			
			<h1>MON TITRE CODE PROPRE</h1>
			<div class="trait_titre"></div>
			
</div>

h1{
	float: left;
	margin-right: 20px;
	display: block;
	width: auto;
}


.trait_titre{
	float: right;
	height: 2px;
	width: 300px;
	background-color: #000;
	margin-top: 35px;

}

Est ce que quelqu'un aurait une idée ???

Salut,
Tu essayes de faire quelque chose comme ça ?
http://jsbin.com/izives/1/edit
Il y a sûrement un moyen plus propre de le faire, mais je ne vois pas trop comment dans l'absolu.

Salut,

tu devrais jeter un oeil du côté des clearfix , un vrai bonheur !

Ju

Merci pour vos 2 exemples, avec le Code de Gothor, rien à faire, le trait va se placer en haut de la page comme si je n'avait pas de position relative à mon h1....

et le clearfix, ne fonctionne pas non plus...je dois mal le faire..

Effectivement à la base dans le code il y a un Hr, mais avec une marge négative : beurck

J'avais vraiment mal lu ta question initiale...

Seul un peu de js te sauvera la mise.

Quelque chose du genre :

$('.trait_titre').width($('h1').width());

Je crois que je ne peux pas utiliser de JS dans le fichier car CMS...

Que signifie : content : "\0020"; ?
J'ai fais une recherche, mais je ne trouve pas de réponses..

Bonjour !
Normalement pas de raison que tu ne puisses pas utiliser de JS dans ton CMS
Et content : "\0020", c'est pour afficher un espace selon le code ASCII (la valeur est en hexadécimal).
Modifié par Gothor (31 Aug 2012 - 09:14)

Hum, il va falloir ruser alors. Tu peux tester ça :

* tu superpose ton h1 & .trait_titre via des position.

* .trait_titre{width:100%;z-index:10;}

* h1{width:25%;padding-right:50%;z-index:20;}

Ainsi, en mettant un background sur ton h1, il masquera 75% du trait. En jouant sur les valeurs tu pourras ajuster tes valeurs.

Ce n'est pas dynamique mais je ne suis pas persuadé d'arriver au résultat voulu sans js.

PS : tu peux aussi garder ton style de base et donner des largeurs en % à tes 2 éléments.

je vais regarder ça merci !!!

malheureusement mes titres sont de largeurs différentes...ici 25% fait que la largeur de mon H1 fera 25% de son conteneur...et il ne fera pas toujours 25%...
de plus le z-index ne fonctionne qu'avec un H1 en position relative... et en position relative le H1 prends automatiquement la largeur de la div conteneur...sinon un display block aurait été parfait mais dans ce cas c'est le background du h1 qui passe sous le trait et donc ne le couvre pas...

Salut,

Quelque chose qui ressemblerait à ça ?

NB : Evidemment, sur un fond uni, c'est plus facile...

tm

Salut,

je sèche là :s sans js on ne peut pas faire de code dynamique.

Navré.

Par contre pour le h1 en relative, si tu lui mets un width:auto il ne fera pas 100% de large.

Je reste à l'écoute du topic, on ne sait jamais si une idée lumineuse tombe du ciel

Ju

En fait la solution de Gothor fonctionne, effectivement il faut mettre en position relative !!! Tm aussi ! En fait le tout est de mettre la position relative pour que ça fonctionne !!! merci à tous !

C'est juste pour faire un trait noir de 2 pixels à côté du titre ?
Modifié par jb_gfx (04 Sep 2012 - 00:26)