Conseil : CSS pour encadre des titres

Bonjour à tous,

Je suis un petit nouveau sur le forum. Je suivais les tutos pour apprendre notamment quelques bonnes astuces en CSS, mais là je n'ai pas trouvé et c'est pourquoi je fais appel à vos lumières.

On m'a envoyé une image pour que je puisse faire la même chose dans une zone de widget wordpress en pied de page.

-Comment faire pour arrivez à un résultat similaire que celui-ci ? J'arrive à créer ces encadrements mais seulement autour du bloc des titres, pas pour chaque titre. D'ailleurs le cadre est de la même taille quelque soit le texte par soucis de symétrie.
-Est-il possible de conserver la structure (double colonne sur 3 lignes et dernier titre centré en bas) ?
-Au passage de la souris j'aimerais que le texte+cadre se colore en bleu. Est-ce possible ?

Voici ce dont je veux parler :

Merci beaucoup pour votre aide,

Je vous souhaite une belle journée !
Modifié par sovkipunk (27 Apr 2016 - 11:16)

Bonjour Sovkipunk,

sovkipunk a écrit :
je fais appel à vos lumières.

Tu m'as appelé ?

Je vais te demander un roulement de tambour...

"bam bam bam bam bam pompom"

La réponse est OUI ! (oui c'est possible)

Mon petit numéro de cirque terminé, venons-en aux choses sérieuses.

Pourrais-tu nous poster le code auquel tu fais référence (le tiens, ton truc que t'as pondu) s'il te plaît ? Tout, j'insiste ! A savoir la partie html avec tes "titres" et ta partie Css.

Après promis, je reviens te faire un "petit coucou".
Modifié par Greg_Lumiere (27 Apr 2016 - 11:36)

Ahaha, oui c'est bien toi que j'invoquais dans mon message ! Quelle réactivité !

Alors il faut savoir que je suis un un gros nul et que je n'y connais pas grand chose en CSS. Je fais surtout le singe savant en allant piocher à gauche à droite des idées sans comprendre vraiment ce qu'il se passe

Le CSS

.coin {
	border: 3px solid #FFFFFF;
	padding: 5px;
	-moz-border-radius: 10px 0;
	-webkit-border-radius: 10px 0;
	border-radius: 10px 0;
}

Le code html en tableau (pas beau du tout !) :

<table class=" aligncenter" style="height: 81px;" width="223">
<tbody>
<tr style="height: 46px;">
<td style="width: 104px; height: 46px;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/">ACCUEIL</a></strong></span></td>
<td style="width: 104.667px; height: 46px;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/therapie-pleine-conscience/">EN INDIVIDUEL</a> </strong></span></td>
</tr>
<tr style="height: 46px;">
<td style="width: 104px; height: 46px;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/meditation/">EN GROUPE</a></strong></span></td>
<td style="width: 104.667px; height: 46px;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/en-entreprise/">EN ENTREPRISE</a></strong></span></td>
</tr>
<tr style="height: 46px;">
<td style="width: 104px; height: 46px;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/accueil/portrait/">QUI SUIS-JE ?</a></strong></span></td>
<td style="width: 104.667px; height: 46px;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/evenements/">ÉVÉNEMENTS</a></strong></span></td>
</tr>
</tbody>
</table>
</BR>
</BR><p style="text-align: center;"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/contact/">CONTACT</a></strong></span></p>

Sincèrement désolé pour ces horreurs htmlique !

Bonne journée !

Salut, j'ai recréé ici mais je vois pas le problème
Modifié par JENCAL (27 Apr 2016 - 12:21)

Pardon, j'ai copié le mauvais CSS et me suis rendu compte qu'il n'était peut être pas nécessaire de l'implanter dans le CSS central.

Il suffisait juste de mettre sur chaque balise <TD> les style suivant : border: 2px solid white; padding: 5px;

<table class=" aligncenter" style="height: 81px;" width="223">
<tbody>
<tr style="height: 46px;">
<td style="width: 104px; height: 46px; border: 2px solid  grey; padding: 5px"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/">ACCUEIL</a></strong></span></td>
<td style="width: 104.667px; height: 46px; border: 2px solid  grey; padding: 5px"><span style="color: #ffffff; "><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/therapie-pleine-conscience/">EN INDIVIDUEL</a> </strong></span></td>
</tr>
<tr style="height: 46px;">
<td style="width: 104px; height: 46px;border: 2px solid  grey; padding: 5px"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/meditation/">EN GROUPE</a></strong></span></td>
<td style="width: 104.667px; height: 46px; border: 2px solid  grey; padding: 5px"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/en-entreprise/">EN ENTREPRISE</a></strong></span></td>
</tr>
<tr style="height: 46px;">
<td style="width: 104px; height: 46px; border: 2px solid  grey; padding: 5px"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/accueil/portrait/">QUI SUIS-JE ?</a></strong></span></td>
<td style="width: 104.667px; height: 46px; border: 2px solid  grey; padding: 5px"><span style="color: #ffffff;"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/evenements/">ÉVÉNEMENTS</a></strong></span></td>
</tr>
</tbody>
</table>
</BR>
</BR><p><span style="color: #ffffff;border: 2px solid  grey; padding: 5px"><strong><a style="color: #ffffff;" href="http://sophieguenin.com/wordpress/contact/">CONTACT</a></strong></span></p>

Ce n'est pas super satisfaisant pour autant :
-Est-il possible de créer un cadre fixe plus fin et qui soit le même pour tous les titres sur la base du plus long ?
-Comment faire pour organiser ces titres comme sur l'image de mon premier post ? faut-il obligatoirement passer par les balises TD-TR ?

Merci

sovkipunk a écrit :
[...] ces horreurs htmlique !

ce n'est rien de le dire.

Grâce au modèle de Jencal, je m'aperçois que la "case" contact appartient à un paragraphe (balise P) et non au tableau lui même.

Il te faut rajouter une ligne (TR) contenant une seule cellule (TD) : Contact.


Quand tu mets ceci :
"
<span style="color: #ffffff;"><strong><a style="color: #ffffff;"
"
Tu fais doublon de la propriété color: #ffffff, tu devrais pouvoir supprimer celles des balises A ou mieux encore virer le SPAN qui semble obsolète vu qu'on peut personnaliser soit les liens directement soit les cellules du tableau.

Mais toutefois ça reste du code franchement dégeulasse.

Tu croiseras sur ta route une recommandation qui dit de séparer le style du contenu.
Dans cette optique voici un exemple de ton code rendu un petit peu plus présentable :
(nota : le style est ici inclus dans l'en-tête mais tu verras qu'il est facile après d'exporter la personnalisation dans un fichier externe)

<head>
<!-- Ici tu as sûrement déjà des choses inclues ; tu vas y rajouter ceci: -->
<style>
table {
 width: 223px; // en principe on évite de fixer des dimensions
 height: 81px;
 margin: auto; // les marges en auto centrent le tableau par rapport à son conteneur
}

tr {
 height: 46px;
 text-align: center;
}
td {
 width: 104px;
 height: 100%; // on a déjà défini TR à 46px
// text-align: center; <= finalement je l'applique à TR tout simplement
 color: #fff;
 border: 3px solid  #000;
 padding: 5px;
 border-radius: 10px; // N'oublie pas ici les préfixes propriétaires -moz-, -webkit-.... que j'ai enlevé pour la demo
}
td a {
 display: block; // comme ça A prend toute la place dans TD
 font-weight: bold; // applique la graisse en lieu et place des balises STRONG qui ont un sens sémantique
}

</style>
</head>
<body>
 <table>
  <tbody>
   <tr>
    <td><a href="http://sophieguenin.com/wordpress/">ACCUEIL</a></td>
    <td><a href="http://sophieguenin.com/wordpress/therapie-pleine-conscience/">EN INDIVIDUEL</a> </td>
   </tr>
   <tr>
    <td><a href="http://sophieguenin.com/wordpress/meditation/">EN GROUPE</a></td>
    <td><a href="http://sophieguenin.com/wordpress/en-entreprise/">EN ENTREPRISE</a></td>
   </tr>
   <tr>
    <td><a href="http://sophieguenin.com/wordpress/accueil/portrait/">QUI SUIS-JE ?</a></td>
    <td><a href="http://sophieguenin.com/wordpress/evenements/">ÉVÉNEMENTS</a></td>
   </tr>
   <tr>
    <td colspan="2"><a href="http://sophieguenin.com/wordpress/contact/">CONTACT</a></td>
   </tr>
  </tbody>
 </table>
</body>

Bien sûr en restant dans l'esprit initial qui est une présentation en table.
Avec ça tu vas pouvoir te faire la main mais après faudra voir à transformer tout ça en une belle liste (élément UL).
Modifié par Greg_Lumiere (27 Apr 2016 - 12:57)

Bonjour,

Pour ton exemple, ça donne ça avec les <table>,

Et non seulement, il n'est pas obligatoire d'utiliser les <table>, mais c'est surtout très déconseillé depuis 15 ans !
Y'a encore quelques n'années et les flottants ça donnait ça
Au 3ème millénaire et display:flex, ça donne ça (EDIT : tu noteras, je l'espère, l'allègement au niveau du code HTML )
Modifié par SolidSnake (27 Apr 2016 - 15:52)

Ahaha, j'ai toujours eu un petit faible pour les années 90' !

Merci beaucoup Greg' pour ces explications au top, je me coucherai moins bête (ce qui n'est pas compliqué sur ce sujet !). Tu es un fin pédagogue !

Et mille merci Solid Snake pour cet archéologie du code HTML, tu devrais faire historien CSS ! Je note au passage que c'est beaucoup plus clair, bien propre et super efficace.

J'attendais de vos lumières et je dois bien dire que j'ai été gâté !

Namaste, je salue le divin qui est en vous !
Modifié par sovkipunk (27 Apr 2016 - 22:29)

Rebonsoir !

Bon, j'ai fait des efforts de compréhension du css du thème worpdress où je veux inclure ce style mais là encore je galère... Pourtant j'ai lu ce beau tuto : http://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html

Mais pour mon noobisme ça devient un peu trop complexe...

Alors j'aimerais que seul le widget n°3 du footer (tout à droite) prenne le style de Solide snake sur le site suivant : http://sophieguenin.com/wordpress/

J'ai ouvert firebug et je me retrouve avec beaucoup trop de classes différentes sur le module...

j'ai essayé de styler la suite de classes qui me paraissait la plus précise de la sorte (attention, je sens que vous allez rire ... ) :

/* widget pied n°3 - Bloc */
.et_pb_gutters3.et_pb_footer_columns_1_4__1_2 .footer-widget:nth-child(3) {
	margin: 0;
	padding: 0;
}

.et_pb_gutters3.et_pb_footer_columns_1_4__1_2 .footer-widget:nth-child(3).body {
	background-color: #f59a2f;
	font-family: sans-serif;
}

.et_pb_gutters3.et_pb_footer_columns_1_4__1_2 .footer-widget:nth-child(3).nav {
	margin: 10px auto 0;
	width: 292px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

footer-widget:nth-child(3).a {
	color: #fff;
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	border: 2px solid #fff;
	padding: 5px;
	margin-bottom: 4px;
	font-weight: bold;
	width: 130px;
	text-align: center;
}

.et_pb_gutters3.et_pb_footer_columns_1_4__1_2 .footer-widget:nth-child(3).a:nth-child(2n) {
	margin-left: 4px;
}

.et_pb_gutters3.et_pb_footer_columns_1_4__1_2 .footer-widget:nth-child(3).a:hover {
	color: #f59a2f;
	border-color: #213fb7;
	background: #4f6ff3;
}

/* widget pied n°3 - Bloc */

Je me rends bien compte que ça ne fonctionne pas ... alors est-ce que vous avez des idées ??

Merci pour votre patience et votre pédagogie !
Modifié par sovkipunk (28 Apr 2016 - 23:59)