[ RESOLU ] Titre + Cadre arrondi ou graphique en CSS et XHTML (NV)

Bonjour à l'ensemble de la communauté,

En voulant mettre aux normes mon site sans détériorer le design, je suis confronté a un problème:

En suivant le tutoriel sur les cadres arrondi de nouvelle version, je n'arrive pas à placer mon titre correctement dans la partie haute de mon cadre. Je veux que cela soit comme sur mon ancien site où j'avais utilisé des balises "table".

Je joint ces captures d'écrans pour que cela soit plus clair:



Je ne sais pas si cela peut être résolu. Merci d'avance.
Modifié par K3p' (03 Nov 2008 - 19:46)

Bonjour,

Ton problème n'est pas clair. Quelle image correspond à quoi? Quel est le code correspondant à tes essais actuels? Peut-on voir une page en ligne avec ces essais?

Un indice (enfonçage de portes ouvertes, etc.): il faut utiliser CSS pour mettre en forme le contenu de ta boite. Gérer la taille et la couleur du texte, les marges et padding.
Modifié par Florent V. (31 Oct 2008 - 21:50)

Voici le code css que j'utilise. J'ai opté pour des class et non des id car j'utilise de nombreuse fois le cadre sur ma page:

/* Cadre full css */

div.cadre {/* conteneur global et arrière-plan du titre du cadre */
width: 133px;
padding-top: 27px;
background: url(images/titre_pt.png) top center no-repeat;
}
div.bloccadre {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(images/bas_xtd.png) bottom center no-repeat;
padding-bottom: 11px;
}
div.bloccadre p {
margin: 0 10px 0 5px;
}

Le code HTML lié:

<div class="cadre">
		<div class="bloccadre">
		<h5>Mon menu joli</h5>
		<ul>
		<li><a href="#" accesskey="1">Menu 1</a></li>
		<li><a href="#" accesskey="2">Menu 2</a></li>
		<li><a href="#" accesskey="3">Menu 3</a></li>
		<li><a href="#" accesskey="4">Menu 4</a></li>
		<li><a href="#" accesskey="5">Menu 5</a></li>
		</ul>
		</div>
	</div>

Dans mon premier post la première image correspond à mon essai. La seconde, a mon ancien site. On voit bien que ":: Statistique ::" est dans la partie haute, là ou je voudrais que se trouve "Mon menu joli" dans la nouvelle version.

Remarque: je n'utilise pas plus de deux images comme dans le tutoriel (partie haute et une autre basse et surdimensionnée en hauteur)

J'espère avoir été assez clair.

K3p' a écrit :
On voit bien que ":: Statistique ::" est dans la partie haute, là ou je voudrais que se trouve "Mon menu joli" dans la nouvelle version.

Et qu'est-ce qui pourrait empêcher le titre de se placer dans le haut de ton cadre? À lire ton code CSS, c'est assez évident. Je te laisse chercher un peu. Tu peux éventuellement utiliser un outil tel que Firebug en mode «inspection» pour explorer les styles des éléments et visualiser les différents espaces.

Malgré de nombreuses tentatives et d'essais, je n'arrive toujours pas à comprendre pourquoi le texte ne veut pas se positionner au bon endroit

D'après ce que tu dis, le code CSS bloque la possibilité d'écrire dans la partie haute de mon cadre. Mais je ne vois pas...

Faut_il rajouter un DIV?

Je dois avouer que je regrette mes jolies tableaux
Modifié par K3p' (03 Nov 2008 - 19:42)

K3p' a écrit :
D'après ce que tu dis, le code CSS bloque la possibilité d'écrire dans la partie haute de mon cadre. Mais je ne vois pas...

Alors je vais répéter mon conseil mais en le détaillant:

1. Installer Firefox si ce n'est pas déjà fait. (Si tu utilises Firefox 2, tu peux mettre à jour à la version 3.)
2. Installer Firebug, une extension pour Firefox: https://addons.mozilla.org/fr/firefox/addon/1843
3. Redémarrer Firefox.
4. Ouvrir ta page dans Firefox.
5. Ouvrir le panneau de Firebug avec la touche F12 ou en cliquant sur l'icone d'insecte (type scarabée) en bas à droite dans la barre d'état.
6. En haut à gauche du panneau de Firebug, choisir «Inspecter».
7. Promener le pointeur de la souris sur différents éléments de ta page. Tu verras apparaitre des informations, notamment les styles CSS qui s'appliquent à l'élément.
8. Dans la partie de gauche du panneau de Firebug (onglet HTML, partie gauche), tu vois l'arbre de ton document (c'est à dire de ta page web). En passant le pointeur sur les noms de balises, tu peux voir dans ta page s'afficher comme des blocs de couleur:
a. la zone de contenu en bleu;
b. les retraits internes (padding) en violet;
c. les bordures en gris;
d. les marges en jaunes.

En inspectant les différents éléments de ta boite (au code copié-collé et pas assimilé...) de la sorte, tu devrais réussir à mieux comprendre comment fonctionnement les différents espaces et d'où vient cet espace incompressible en haut de ta boite. Une piste: il a à priori deux sources, dont une principale.
Modifié par Florent V. (01 Nov 2008 - 00:13)

J'ai trouvé la solution à mon problême après moult recherches sur le réseau mondial.

Pour ceux qui sont dans la même situation que moi, voici un lien qui pourrait fortement vous aider.

Important: la fonction css "padding" gérant les marges intérieures pour le titre.
Modifié par K3p' (01 Nov 2008 - 12:00)

Rebonjour,

Content de voir que cette page est trouvable, même si ça nécessite moult recherches sur le réseau mondial. Ayant écrit la page en question j'aurais pu donner l'adresse directement, mais il me semble plus intéressant pour toi que tu apprennes à identifier ce genre de problème et à jouer avec les principales propriétés de mise en forme, plutôt que de suivre à chaque fois des tutoriels. Suivre des tutoriels, c'est bien, mais les suivre à la lettre sans comprendre le détail c'est casse-gueule: un coup ça marche, un coup on n'arrive pas à adapter à ses propres contenus ou besoins.

Je t'invite vraiment à suivre la procédure que je donne dans mon message précédent. Ça t'aurait permis d'identifier que l'espace incompressible en haut de ton cadre venait du padding-top sur le conteneur, et sans doute d'une marge supérieure par défaut du titre.

Bonjour,

CSS c'est vraiment puissant.

Un grand merci pour ton travail et tes astuces Florent. J'ai compris la marche à suivre, mais j'ai trop gardé cette habitude de marcher à tâtons.

J'essaierai ton outil pour continuer mon travail

K3p' a écrit :

J'ai trouvé la solution à mon problême après moult recherche sur le réseau mondial.

......................................

Re-bonjour tout le monde,

Heu... Je reviens sur ce sujet car j'ai finalement opté pour le menu de fin de tuto de Florent (Cf plus haut) à 3 images (un titre, un pied et une image centrale répétée en fond de faible hauteur).

Voici mon code css:

/* Cadre petit en 3 parties */

.boite_3 {
    width: 133px;
	padding-bottom: 10px;
	background:url(images/bas_3.png) no-repeat;
	background-position: center bottom;
}
.boite_3 h5 {
    width: 133px;
    margin: 0;
	padding: 5px 0px 7px 0px;
	background:url(images/titre_3.png) no-repeat;
	background-position: center top;
}
.boite_3 p {
    background:url(images/centre_3.png) repeat-y;
	overflow: auto;
	background-position: center center;
}

Le problème c'est que l'image centre_3 qui est l'image de fond répétée, ne s'affiche pas alors qu'en essayant la commande "background-color" cela fonctionne...

Le code est il correcte?

Comment résoudre ce problême?

Merci d'avance
Modifié par K3p' (02 Nov 2008 - 13:35)

Bonjour,

je sais pas si ça fonctionne ainsi mais la bonne manière d'utiliser l'instruction raccourcie background est:

background: couleur url(chemin/nom.png) left top no-repeat;

(left ou right ou ...)
(top ou bottom ou ...)
(no-repeat ou repeat ou repeat-x ou repeat-y)

Tu peux omettre couleur (ce sera alors 'transparent' càd que la couleur ou l'image du parent se verra) mais pour position j'ai un doute. Comme de toute façon tu précises background-position juste après, autant rajouter "left top" à chaque instruction background

/* Cadre petit en 3 parties */

.boite_3 {
    width: 133px;
	padding-bottom: 11px;
	background:url(images/bas.png)  center bottom no-repeat;
	overflow: hidden;
}
.boite_3 h5 {
    width: 133px;
    margin: 0;
	padding: 5px 0px 6px 0px;
	background:transparent url(images/titre.png)  center top no-repeat;
	overflow: hidden;
}
.boite_3 p {
    width: 133px;
    background:transparent url(images/centre.png)  center center repeat-y;
	overflow: hidden;
}
.boite_3 ul {
    width: 133px;
    background:transparent url(images/centre.png)  center center repeat-y;
	overflow: hidden;
}

Revu et corrigé

Mais j'ai toujours le problème que j'essaie de résoudre: l'image de fond (centre.png) ne reste pas uniquement au milieu de la boite et se met en fond de l'image "titre.png"

Comment faire en évitant de partitionner?
Modifié par K3p' (02 Nov 2008 - 14:15)

Sans savoir à quoi ressemble ta structure HTML, ça va être dur de se prononcer.
Une page en ligne, peut-être?

<div class="boite_3">
	<h5>:: Autre ::</h5>
	<p>Lorem ipsum bla bla bla...</p>
</div>

ou

<div class="boite_3">									   
		<h5>:: Titre du menu ::</h5>
		<ul>
		<li><a href="#" accesskey="1">Menu 1</a></li>
		<li><a href="#" accesskey="2">Menu 2</a></li></ul></div>

Modifié par K3p' (02 Nov 2008 - 19:42)

Tu peux éventuellement faire remonter le titre (et son image de fond) de quelques pixels en utilisant le positionnement relatif.

Ca y'est j'ai trouvé mon erreur...

Ce n'était pas le script qui posait problême mais l'image basse du cadre.

J'avais gardé l'image surdimensionné du cadre à bord arrondi avec 2 images

Tout fonctionne a merveille. Interface terminé!!