[résolu] Titre h1 qui prend 100% de la largeur disponible

Bonjour,

J'ai un titre h1 composé de 5 parties :
- partie 1, 3 et 5 sont des images de tailles fixes,
- partie 2 et 4 sont des images d'un pixel de largeur que l'on peut répéter X fois.

J'ai donc donné une largeur exactes aux parties 1, 3 et 5, mis un pourcentage pour la partie 2 et j'aimerais que la partie 4 s'agrandisse automatiquement de façon à combler le vide pour que le div h1 occupe 100% de la largeur.

J'ai essayé de différentes manières, sans obtenir de résultats. Comment dois je faire ?

D'avance merci de vos réponses.



xenos

<div class="h1">
	<div class="h1_1"><img src="images/recherches/recherches.png" alt="icone" /></div>
	<div class="h1_2"></div>
	<div class="h1_3"></div>
	<div class="h1_4"></div>
	<div class="h1_5"></div>
</div>

.h1
{
	margin: 0;
	width: 100%;
	border-collapse: collapse;
}

.h1 td
{
	padding: 0px;
}

.h1_1
{
	float: left;
	background: url("images/design/h1_1.png") no-repeat bottom right;
	width: 54px;
	height: 60px;
}

.h1_2
{
	float: left;
	background: url("images/design/h1_2.png") repeat-x bottom;
	width: 26%;
	height: 60px;
}

.h1_3
{
	float: left;
	background: url("images/design/h1_3.png") no-repeat bottom;
	width: 26px;
	height: 60px;
}

.h1_4
{
	float: left;
	background: url("images/design/h1_4.png") repeat-x bottom;
	height: 60px;
}

.h1_5
{
	float: left;
	background: url("images/design/h1_5.png") no-repeat bottom;
	width: 56px;
	height: 60px;
}

Bonjour,

Petite précision: tu n'utilises pas de titre h1 mais une div avec une classe h1 qui contient des div vides.

Autres choses: tes images en background css sont bien là uniquement décoratives et ne sont pas des textes en images, ce qui serait un mauvais choix dans ce cas. Le alt icone est également mal choisi.

Peut-être pourrais-tu nous expliquer à quoi correspond ce montage ?

Ce montage permet d'obtenir un titre h1 ...

Je l'ai d'abord dessiné et puis coupé en morceau pour le programmer en CSS.

Ces cinq parties mises bout à bout constituent un titre h1.

xenos a écrit :
Ce montage permet d'obtenir un titre h1 ...

Je l'ai d'abord dessiné et puis coupé en morceau pour le programmer en CSS.

Ces cinq parties mises bout à bout constituent un titre h1.

Non

Un titre h1 c'est un élément html:

<h1>Mon titre</h1>

ou

<h1><img src="titre.png" alt="Mon titre" /></h1>

Un peu de révisions sur html s'impose :
Les titres : les éléments H1, H2, H3, H4, H5 et H6

Merci pour cette "précision" ! Je sais ce que c'est qu'un titre h1, je sais qu'il y a une balise en html qui permet de le programmer !

La seule chose c'est que ce que je veux faire ne peux pas être programmé directement dans une balise h1, il faut utiliser soit un tableau, soit un ensemble de div pour parvenir à mes fins.

Car je l'ai précédemment dis, je l'ai d'abord dessiné et coupé ensuite en plusieurs morceaux. Mais le résultat final correspond à un titre h1. C'est un titre h1 que je programme, mais qui NE peut PAS être programmé avec une seule balise vu le nombre d'images dont il est constitué !

Un ensemble de div ne peut correspondre à un élément h1 ... (d'ailleurs on ne programme pas un h1 on l'écrit simplement) c'est une simple histoire de sens ...

Aurais-tu une image à nous fournir car là il est clair que ce qu'il y'a une incompréhension de notre côté et/ou de la tienne ?

Yop,

ce serait plutôt des div imbriqués qui forment le titre principal de la page sans utiliser l'élément h1 ...

Donc le titre h1 qui doit être obtenu est :


Pour se faire, j'ai décomposé l'image en 5 parties :






Pour se faire, j'ai défini une largeur fixe pour les éléments 1, 3 et 5. Pour l'élément 2 d'un pixel de largeur, je lui ai dit d'avoir une taille de 30% de la largeur. Pour finir, l'élément 4 d'un pixel de largeur doit prendre le reste de la place disponible pour que l'ensemble prennent 100% de la largeur disponible.

Et c'est cet élément 4 qui pose problème. Je n'arrive pas à faire en sorte qu'il prenne la place disponible pour que l'ensemble prenne 100% de la largeur disponible.

Merci de votre aide.

Par rapport à ce que tu souhaites obtenir il semble que 2 images et la structure HTML suivante * :

<h1><span>Mon titre</span></h1>

soient suffisantes.

* Si il s'agit d'un niveau 1 de titrage ...
Modifié par yodaswii (05 Jul 2008 - 13:15)

Il faut que le titre soit visible aussi bien sur une basse résolution que sur une plus grande ... en coupant en deux images ça ne fonctionnera pas ! A moins de couper en deux très grandes images, ce qui veut dire que l'utilisateur devrait télécharger de très grandes images alors qu'en moyenne il n'en utilisera qu'un petit morceau ...

Ce qui est loin d'être génial pour les utilisateurs qui n'ont pas l'ADSL ... :s

De plus dans ton "exemple" tu n'explique pas comment tu veux faire pour que les deux images occupent 100% de la largeur disponible.

a écrit :
A moins de couper en deux très grandes images ...

Non, une grande image (élément de droite et continuation vers la gauche) et une petite image (élément de gauche).

a écrit :
Ce qui est loin d'être génial pour les utilisateurs qui n'ont pas l'ADSL ... :s

Pas de rapport ... les fonds appliqués via CSS sont chargés "après coup" (la page continue de se charger même si certaines images de fond ne sont pas encore chargés) donc aucune gêne (attention tout de même au contraste color / background-color) ...

a écrit :
De plus dans ton "exemple" tu n'explique pas comment tu veux faire pour que les deux images occupent 100% de la largeur disponible.

Le span permettra de mettre en place la partie gauche de ton image (via display et autres padding).
Modifié par yodaswii (05 Jul 2008 - 13:29)

merci pour ta solution.

Mais pour ma solution de départ, que dois je rajouter dans le CSS de la class .h1_4 pour faire en sorte que cette quatrième partie prenne l'espace disponible restant ?

xenos a écrit :
Mais pour ma solution de départ, que dois je rajouter dans le CSS de la class .h1_4 pour faire en sorte que cette quatrième partie prenne l'espace disponible restant ?

Rien du tout. Cette solution est mauvaise, inutilement tarabiscotée, et il faut l'abandonner.

La suggestion de yodaswii me semble très bonne. Je rajouterais qu'on peut utiliser une seule image (de 1500px de large si on veut prévoir très large) et l'utiliser comme image de fond avec la structure HTML qu'il propose. À vue de nez, correctement enregistrée en PNG ton image de titre, en 1500px de large, pèsera dans les 3 ko au maximum, sans doute moins.

Pour le code CSS, ça peut donner:

h1 {
	padding: 0 50px 0 0;
	background: url(fond-titre.png) no-repeat right center;
}
h1 span {
	display: block;
	padding: 8px 0 8px 20px;
	background: url(fond-titre.png) no-repeat left center;
}

Et l'affaire est dans le sac. Seule restriction: la transition dans l'image entre le bleu foncé et le bleu plus clair ne se fera pas à N% de la gauche, mais à Npx de la gauche (suivant la composition exacte de l'image). Là, ça dépend de ce que tu voulais faire exactement pour le placement du texte sur ton image.
Modifié par Florent V. (05 Jul 2008 - 13:50)

Si je n'ai qu'une image, comment puis je faire pour avoir le bout gauche et droit qui s'affichent quelque soit la taille de l'écran ?

xenos a écrit :
Si je n'ai qu'une image, comment puis je faire pour avoir le bout gauche et droit qui s'affichent quelque soit la taille de l'écran ?

Cf. ma réponse complète ci-dessus.

a écrit :
Je rajouterais qu'on peut utiliser une seule image ...

En effet, je ne suis pas allé assez loin dans le raisonnement.

yodaswii a écrit :
Je rajouterais qu'on peut utiliser une seule image ...

En effet, je ne suis pas allé assez loin dans le raisonnement.

Tu voudrais dire qu'une image html avec le alt qui va bien et un bête background css pour la décoration suffirait au rendu d'un titre . Tout çà en utilisant des éléments html très communs (h1, span) ? J'en suis tout retourné

Merci pour vos réponses et vos solutions !

En définitif je vais prendre ta solution Florent V.

Bonne journée à tous.



xenos
Modifié par xenos (06 Jul 2008 - 16:43)