Aide pour Colonne + Titre + Texte En Css
Résolu/Fermé
linuxnoir
Messages postés
38
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
-
Modifié le 8 avril 2017 à 11:27
Utilisateur anonyme - 8 avril 2017 à 14:31
Utilisateur anonyme - 8 avril 2017 à 14:31
A voir également:
- Aide pour Colonne + Titre + Texte En Css
- Déplacer une colonne excel - Guide
- Mettre un texte en majuscule - Guide
- Colonne word - Guide
- Je cherche une chanson dont je ne connais pas le titre - Guide
- Transcription audio en texte word gratuit - Guide
2 réponses
ckvtdn
Messages postés
756
Date d'inscription
lundi 19 février 2007
Statut
Membre
Dernière intervention
24 novembre 2020
141
8 avril 2017 à 13:16
8 avril 2017 à 13:16
Bonjour,
Je ne comprend pas le passage "Une image de fond avec un titre dedans". Peux-tu être plus clair ?
Je ne comprend pas le passage "Une image de fond avec un titre dedans". Peux-tu être plus clair ?
linuxnoir
Messages postés
38
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
2
8 avril 2017 à 13:43
8 avril 2017 à 13:43
Bonjour ckvtdn,
merci de ta réponse :)
je me douter que j'étais pas clair d’où mon image.
En gros j'ai une colonne avec plusieurs box et je veut mettre une image en dessous du titre titrebox.png comme sur la photo du haut :
Dessus cette Image qui sera dans tout mes box il y aura un titre différent exemple dans la colonne de gauche Date dans le box 1, dans le box 2 recherche. et a droite la même chose avec titre différent.
Cordialement,
merci de ta réponse :)
je me douter que j'étais pas clair d’où mon image.
En gros j'ai une colonne avec plusieurs box et je veut mettre une image en dessous du titre titrebox.png comme sur la photo du haut :
Dessus cette Image qui sera dans tout mes box il y aura un titre différent exemple dans la colonne de gauche Date dans le box 1, dans le box 2 recherche. et a droite la même chose avec titre différent.
Cordialement,
Pour ça il suffit d'utiliser la propriété background-image.
Ensuite pour tes titres au lieu d'utiliser las balises
H1 étant le plus haut niveau de titre (généralement le nom du site dans le header) et H6 le plus bas niveaux (une sous-sous.... catégorie en général).
Même si ils ont des tailles différentes, gère bien les niveau de titre, c'est important pour le référencement, car même si tu veux un titre assez gros, vaut mieux prendre le niveau qui correspond et changer la taille ensuite.
C'est un peu le même principe, pour les
Il existe le display:block les margins, padding, pour gérer les retours à la ligne et les espaces entre les éléments.
Voici un peu de documentation sur le background-image et les balise h1-h6.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements
https://developer.mozilla.org/fr/docs/Web/CSS/background-image
Ensuite pour tes titres au lieu d'utiliser las balises
<p>pour tes titres, qui servent pour les paragraphes, utilises les h1-h6 qui sont fait pour les titres.
H1 étant le plus haut niveau de titre (généralement le nom du site dans le header) et H6 le plus bas niveaux (une sous-sous.... catégorie en général).
Même si ils ont des tailles différentes, gère bien les niveau de titre, c'est important pour le référencement, car même si tu veux un titre assez gros, vaut mieux prendre le niveau qui correspond et changer la taille ensuite.
C'est un peu le même principe, pour les
<br>, il faut en mettre si le retour à la ligne est obligatoire, et si c'est impossible de faire ce retour avec une balise HTML ou/et du CSS.
Il existe le display:block les margins, padding, pour gérer les retours à la ligne et les espaces entre les éléments.
Voici un peu de documentation sur le background-image et les balise h1-h6.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements
https://developer.mozilla.org/fr/docs/Web/CSS/background-image
linuxnoir
Messages postés
38
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
2
8 avril 2017 à 14:07
8 avril 2017 à 14:07
Bonjour ZeNairolf,
Tout ce que tu me dit je le c'est et déjà testé le gros souci c'est que j'arrive pas a mettre en œuvre, faut dire aussi que je débute :$
Car un coup mon image et trop petite, un coup mon titre et trop gros, un coup c'est pas centré, un coup mon image background-image et trop sur la gauche etc...
un grosse galère depuis une semaine environ d'ou ma demande aide :)
Cordialement,
Tout ce que tu me dit je le c'est et déjà testé le gros souci c'est que j'arrive pas a mettre en œuvre, faut dire aussi que je débute :$
Car un coup mon image et trop petite, un coup mon titre et trop gros, un coup c'est pas centré, un coup mon image background-image et trop sur la gauche etc...
un grosse galère depuis une semaine environ d'ou ma demande aide :)
Cordialement,
linuxnoir
Messages postés
38
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
2
8 avril 2017 à 14:11
8 avril 2017 à 14:11
Ah oui les <br /> j'ai juste oublié de les supprimer :)
Utilisateur anonyme
>
linuxnoir
Messages postés
38
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
8 avril 2017 à 14:31
8 avril 2017 à 14:31
J'ai fait vite fait le code mais ça peut donner un truc du genre:
Si tu remplaces tes titres par de vrai H2 ou autres selon le niveau.
Du coup là au lieu d'utiliser une image, vu que c'est un simple dégradé, autant utiliser le dégradé en CSS.
Tu peux aller ici pour générer un dégradé:
https://www.cssmatic.com/gradient-generator
h2 { text-align: center; margin: 0; border-radius: 10px; color: white; font-size: 20px; padding: 5px 0; background: rgba(190,79,54,1); background: -moz-linear-gradient(top, rgba(190,79,54,1) 0%, rgba(226,5,9,1) 10%, rgba(226,5,9,1) 90%, rgba(190,79,54,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(190,79,54,1)), color-stop(10%, rgba(226,5,9,1)), color-stop(90%, rgba(226,5,9,1)), color-stop(100%, rgba(190,79,54,1))); background: -webkit-linear-gradient(top, rgba(190,79,54,1) 0%, rgba(226,5,9,1) 10%, rgba(226,5,9,1) 90%, rgba(190,79,54,1) 100%); background: -o-linear-gradient(top, rgba(190,79,54,1) 0%, rgba(226,5,9,1) 10%, rgba(226,5,9,1) 90%, rgba(190,79,54,1) 100%); background: -ms-linear-gradient(top, rgba(190,79,54,1) 0%, rgba(226,5,9,1) 10%, rgba(226,5,9,1) 90%, rgba(190,79,54,1) 100%); background: linear-gradient(to bottom, rgba(190,79,54,1) 0%, rgba(226,5,9,1) 10%, rgba(226,5,9,1) 90%, rgba(190,79,54,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#be4f36', endColorstr='#be4f36', GradientType=0 ); }
Si tu remplaces tes titres par de vrai H2 ou autres selon le niveau.
Du coup là au lieu d'utiliser une image, vu que c'est un simple dégradé, autant utiliser le dégradé en CSS.
Tu peux aller ici pour générer un dégradé:
https://www.cssmatic.com/gradient-generator
linuxnoir
Messages postés
38
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
2
8 avril 2017 à 14:24
8 avril 2017 à 14:24
Je pense avoir trouvé :
#colonne-gauche h3, #colonne-droite h3 { color: #D6DBDC; text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; background:url(interface/titrebox.png) no-repeat; margin: 7px; background-position:top left; line-height: 30px; }