[résolu] Titre h1 qui prend 100% de la largeur disponible - Forum Alsacréations : CSS et Standards Web

Auteur
xenos	# 05 Jul 2008 - 11:49:02
23 Posts	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; }
23 Posts
Igor	# 05 Jul 2008 - 12:33:09
Modérateur 5464 Posts	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 ?
Modérateur 5464 Posts
xenos	# 05 Jul 2008 - 12:35:54
23 Posts	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.
23 Posts
Igor	# 05 Jul 2008 - 12:41:20
Modérateur 5464 Posts	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
Modérateur 5464 Posts
xenos	# 05 Jul 2008 - 12:44:08
23 Posts	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é !
23 Posts
yodaswii	# 05 Jul 2008 - 12:53:39
The sky's the limit! 682 Posts	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 ? Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 682 Posts
Felipe	# 05 Jul 2008 - 12:58:10
Administrateur 4651 Posts	Yop, ce serait plutôt des div imbriqués qui forment le titre principal de la page sans utiliser l'élément h1 ... Concours d'octobre : LOGO sans tortue
Administrateur 4651 Posts
xenos	# 05 Jul 2008 - 13:09:44
23 Posts	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.
23 Posts
yodaswii	# 05 Jul 2008 - 13:15:11
The sky's the limit! 682 Posts	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) Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 682 Posts
xenos	# 05 Jul 2008 - 13:19:26
23 Posts	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.
23 Posts
yodaswii	# 05 Jul 2008 - 13:27:57
The sky's the limit! 682 Posts	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). 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) ... 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) Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 682 Posts
xenos	# 05 Jul 2008 - 13:31:48
23 Posts	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 ?
23 Posts
Florent V.	# 05 Jul 2008 - 13:46:59
On va manger des chips. Modérateur 12876 Posts	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) Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 12876 Posts
xenos	# 05 Jul 2008 - 13:50:10
23 Posts	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 ?
23 Posts
Florent V.	# 05 Jul 2008 - 13:51:11
On va manger des chips. Modérateur 12876 Posts	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. Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 12876 Posts
yodaswii	# 05 Jul 2008 - 20:14:32
The sky's the limit! 682 Posts	Je rajouterais qu'on peut utiliser une seule image ... En effet, je ne suis pas allé assez loin dans le raisonnement. Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 682 Posts
Igor	# 05 Jul 2008 - 23:16:35
Modérateur 5464 Posts	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é
Modérateur 5464 Posts
xenos	# 06 Jul 2008 - 16:42:57
23 Posts	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)
23 Posts
Prévenir un modérateur