Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Largeur d'une ligne modifiable en .css

iro

Bonjour,

je souhaiterais modifié la largeur de la première ligne en fonction du texte qui s'y affiche.
J'ai mis un border pour visualiser le tableau.

Actuellement, j'ai joué avec la valeur width. Mais selon le texte, l'écart est soit un peu trop important soit le texte est tronqué.
J'avais pensé à max-width, mais ça n'a pas d'effet car il s'agit d'un tableau :/

En espérant que vous pourrez m’aider.

abelthorne

Je comprends pas bien : ton tableau a une bordure verte, donc ce qui est au-dessus (heure + lune) n'en fait pas partie ? C'est cette partie-là que tu voudrais modifier ou la première ligne du tableau ?

Si c'est le tableau, tu ne pourras pas modifier une seule ligne, ce sera la largeur de l'ensemble. Tu devrais pouvoir le mettre en width: auto pour qu'il ne prenne que la place nécessaire sans s'étendre sur toute la largeur, en rajoutant éventuellement du padding dans les cellules pour avoir un peu de marge autour du texte et que ça reste lisible.

iro

Bonsoir,

Je comprends pas bien : ton tableau a une bordure verte, donc ce qui est au-dessus (heure + lune) n'en fait pas partie ?

Oui c'est ça, ce n'est que la partie encadré vert qui constitue mon tableau et ce que je veux modifier.

Pour width: auto;, j'y avais pensé mais ce n'est pas pris en compte :/
Aurais-tu une autre idée ?

abelthorne

Tu aurais éventuellement le code HTML et les CSS déjà en place de disponibles ?

iro

L'applet est écrite en javascript, pour le css j'ai trouvé ça; mais je ne suis pas sur que ça t'aide :

/* taken from gnome-shell.css, .dash-search-button */
.popup-menu-content.weather-menu {
    padding-bottom: 0em;
    padding-top: 0em;
}

.weather-current-location-link {
    text-align: center;
}

.weather-current-summarybox {
    padding-top: 5px;
}

.weather-current-summary {
    font-size: 35px;
    padding-top: 10px;
    padding-bottom: 15px;
}

.weather-current-databox {
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
}

.weather-current-icon {
    padding: 0 30px;
}

.weather-current-iconbox {
    padding: 10px;
}

.weather-icon {
    padding-right: 5px;
}

.weather-icon-rtl {
    padding-left: 5px;
}

.weather-current-databox-captions {
    text-align: right;
    padding-right: 5px;
    color: #999999;
}

.weather-current-astronomy {
    color: #AAAAAA;
}

.weather-forecast-icon {
   padding: 0 10px 10px 15px;
}

.weather-forecast-databox {
    padding: 0 20px 10px 0;
}

.weather-forecast-container {
    margin: 10px 10px 0px 10px;
}

.weather-forecast-day {
  color: #999999;
  font-size: 90%;
}

.weather-config {
  padding-right: 10px;
}

.bottombar {
    padding: 7px 10px 7px 10px;
}

.hourly-time {
    color: #999999;
    font-size: 90%;
    text-align: center;
}

.hourly-data {
	text-align: center;
	padding: 0px 5px;
}

.hourly-box {
	padding: 10px 10px 0px 10px;
}

.hourly-icon {
    padding: 5px 20px 5px 20px;
}

.location-selector {
    margin-right: 5px;
    margin-left: 5px;
}

Ce que je souhaite modifier : hourly-data
Ce que j'ai rajouté dans mon fichier css :

.hourly-data {
    width: 110px;
}

Avec ce code la largeur est prise en compte mais si le texte est trop grand, il sera tronqué et si le texte est court, il y a un peut trop d'espace.

abelthorne

C'est pas évident sans comprendre comment les éléments s'imbriquent, à quels éléments correspondent les classes, etc. Mais du coup, j'imagine que les colonnes du tableau doivent rester alignées avec les éléments qu'il y a au-dessus (heure/lune) ? Et que c'est peut-être ces éléments-là qui s'étendent trop en largeur, étirant le conteneur parent et le tableau.

Est-ce qu'en modifiant les paddings gauche et droite de .weather-current-databox et .weather-current-icon (qui sont à 30 px) ça rétrécit l'ensemble et donne un tableau plus compact qui se rapproche de ce que tu veux ?

Je cite ces deux classes parce qu'elles ont un padding qui a l'air important mais je ne sais pas du tout si elles correspondent effectivement aux "blocs" où il y a l'heure et la lune.

iro

Les classes que tu cite ont une autre fonction. Celles qui correspondent à l'image sont hourly-*:
* hourly-time correspond à l'heure
* hourly-icon correspond aux icônes (soleil, lune, pluie…)
* hourly-box correspond à l'ensemble de l'image du premier message.