En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Politique de confidentialité.
Forum - GuppY 5.0 - Vos questions - Ecartement des colonnes en boîte libre, fond des boîtes libre?

 


le 18/05/2014 @ 17:26
par ALAIN92220

ALAIN92220



Bonjour Sabine,

Je suis sur l'édition des boîtes libres.
J'ai bien cherché la réponses dans les tuto, mais je n'ai pas trouvé.
Trois questions :
- L’espacement horizontale des boîtes libres me pose problème, elles sont trop proche et les colonnes cote à cote, ne sont pas très lisible existe t'il un moyen de fixer un écartement. Le % d'occupation ne semble pas opérer, j'ai mis 30% + 30% + 20% (80%) je pensais que 20% ce répartirais?
- Si je veux mettre un fond opaque ou une trame, sous le texte d'une ou de toutes les boîte libre, je n'ai pas trouvé.
- Dernière question, dans l'éditeur, je n'ai pas trouvé comment fonctionne l'affichage des blocs et si il est possible de les dimensionner, fractionner, fusionner.

Merci de votre aide.

Le site de test http://pg92220.fr/
Info technique : GuppY 5.0.4
Système d'exploitation du serveur : Linux
PHP : 5.3.27 / MET=60 - ML=128M - UMF=10M - PMS=8M - MFU=20
URL du site : http://pg92220.fr/
Plugins : Horloge, Devinette, Vitesse de Connexion
UA: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0
Device: computer
Résolution écran : 1467x825 / 1467x788
Site web ALAIN92220
Poster une réponse Haut  
Réponse n° 1
--------
le 19/05/2014 @ 07:43
par Sabine

Sabine



Bonjour Alain,

Pour fixer la largeur des 3 boîtes qui sont positionnées sur la 3ème ligne de l'éditorial :
 
Code : css
#EditoBoxes .row.row3 .tbl {
width: 300px;
}
 Pour mettre un espace à gauche et à droite de la boîte du milieu (colonne 1) :
 
Code : css
#EditoBoxes .row.row3 .col.col1 {
padding: 0 8px;
}
 Pour mettre un fond aux boîtes de l'éditorial :
 
Code : css
#EditoBoxes .tbl, #EditoBoxes .tblover {
background: #fff;
}
 Pour la dernière question, je ne suis pas sûre de comprendre. Les différentes sections de GuppY (#Edito, #TopBoxes, #BottomBoxes, etc) sont construites comme un tableau, avec 3 colonnes (.col0, .col1, .col2) et plusieurs lignes.

On en peut pas fusionner les lignes, ni les colonnes.

Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 2
--------
le 20/05/2014 @ 03:48
par ALAIN92220

ALAIN92220

visiteur

Merci pour votre aide,

J'ai modifié comme ci-dessous en décomposant :

/* Mise en forme boîtes dans la zone "éditorial" */
/* ligne N°x collone N° x (0¦1¦2) */
#EditoBoxes .row.row2 .col.col1 { /* colonne de gauche */
   padding-top: 0px;
   padding-right: 12px;
   padding-bottom: 0px;
   padding-left: 12px;
}
#EditoBoxes .row.row3 .col.col0 { /* colonne de gauche */
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 12px;
}
#EditoBoxes .row.row3 .col.col1 { /* colonne centrale */
   padding-top: 0px;
   padding-left: 16px;
   padding-right: 16px;
   padding-bottom: 0px;
}
#EditoBoxes .row.row3 .col.col2 { /* colonne droite */
   padding-top: 0px;
   padding-right: 12px;
   padding-bottom: 0px;
   padding-left: 0px;
}

Je voudrais aussi centrer le titre, "faux texte" pour chaque colonne.

Encore merci pour votre aide.
Avez à me conseiller un bon ouvrage pour apprendre le CSS ?
Rectifié par ALAIN92220 le 20/05/2014 @ 08:34
Ecrire à ALAIN92220 Site web ALAIN92220
Poster une réponse Haut  
Réponse n° 3
--------
le 20/05/2014 @ 17:59
par Sabine

Sabine



Bonjour,

Pour centrer les titres de TOUTES les boîtes de l'éditorial :
 
Code : css
#EditoBoxes .titre, #EditoBoxes .titrebox {
text-align: center;
}
Pour centrer les titres des boîtes de la 3ème ligne uniquement :
 
Code : css
#EditoBoxes .row.row3 .titre, #EditoBoxes .row.row3 .titrebox {
text-align: center;
}
 
Je ne connais pas de livre pour apprendre le CSS.

J'aime bien le site OpenClassroom (ancien site du zéro) : http://fr.openclassrooms.com/informatique/css/cours

Il y a beaucoup d'informations et ce n'est pas toujours évident de s'y retrouver quand on débute (... et même après !).

Sur le même site, il y a un mémento des propriétés de base, je le trouve très utile : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/m emento-des-proprietes-css#r-1613905

Sabine
Site web Sabine
Poster une réponse Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum  



Vous êtes ici :   Accueil » Forum » GuppY 5.0 » Vos questions » Ecartement des colonnes en boîte libre, fond des boîtes libre?