Alignement de titre
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
Tout les titres des modules ce positionne comme je le souhaite, cependant je voudrais le titre du modules pages en center,
{mode kalimero_on} une image comme d'ab sinon je suis un incompris sniff... {mode_kalimero_off}
Donc si possible comment afficher le tire au centre, j'ai bidouiller le page.css et le design.css mais pas trouver. En plus ça fait appel au module_top je crois donc je vois pas pourquoi il ne redimensionne pas commes les autres titres . svp. Merci.
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
sinon tu peux creer une class specifique et la rajouter sur le tpl (pour un seul module)
module.css
.maclass {
texte au milieu
}
module.tpl
<div class="module_top maclass">
<div class="module_top_title">titre</div>
</div>
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Avec un text-align:center; cela doit suffir
ElenWii
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
Je comprend pas par ce que le module_top et module_top_title sont en text-align:center;
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
Sinon oui le lien cette page par exemple: http://www.tchatt.net/web/web-3-5.php le titre du site est à gauche.
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Le screen ne m'aide pas vraiment pour lire le CSS
Donc en fait, tu as un float:left qui t'empeche de faire de des alignements.
Il faut que tu revoit le title en supprimant les float:left. (du coup tu dois modifier l'emplacement des commentaires ou appliquer le float différemment)
ElenWii
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
Oui c'est sure ^^
Ok, les commentaires sont en float right mais ceci me va c'est que le titre que je veux mettre en center.
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
ElenWii
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
Comment ça inversser les commentaires et le titre ?
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
<div>
<div style="float:right;"> Commentaires
<div style="float:right;"> Commentaires
Le corps de ton texte
</div></div>
ElenWii
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
En méttant juste
<div style="text-align:center">
{NAME}
à la place de
<div style="float:left">
{NAME}
C'est bien centrer mais du coup le poster un com est dans le vide
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
montre ton code
ElenWii
riptide Membre non connecté
-
Booster Roquette
- Voir le profil du membre riptide
- Inscrit le : 29/02/2012
- Site internet
- Groupes :
Désoler Elenwii j'avais un peu zapper ce truc, en faite je m'était résigner à afficher à gauche et droite
Caché :
{JAVA}
# IF C_WEB_CAT #
<div class="module_position">
<div class="module_top_l"></div>
<div class="module_top_r"></div>
<div class="module_top">
<div class="module_top_title">
{L_WEB} - {L_CATEGORIES}
</div>
<div class="module_top_com">
# IF C_IS_ADMIN #
<a href="{PATH_TO_ROOT}/web/admin_web_cat.php{SID}" title="{L_EDIT}">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{LANG}/edit.png" class="valign_middle" alt="" />
</a>
# ENDIF #
{PAGINATION}
</div>
</div>
<div class="module_contents">
# START cat_list #
<div style="float:left;text-align:center;width:{cat_list.WIDTH}%;">
{cat_list.U_IMG_CAT}
[url={PATH_TO_ROOT}/web/web{cat_list.U_WEB_CAT}]{cat_list.CAT}[/url] <span class="text_small">({cat_list.TOTAL})</span>
<span class="text_small">{cat_list.CONTENTS}</span>
</div>
# END cat_list #
<div class="text_small" style="padding-top:10px;text-align:center;clear:both">
{TOTAL_FILE} {L_HOW_LINK}
</div>
</div>
<div class="module_bottom_l"></div>
<div class="module_bottom_r"></div>
<div class="module_bottom">
<div style="float:right">
{PAGINATION}
</div>
</div>
</div>
# ENDIF #
# IF C_WEB_LINK #
<div class="module_position">
<div class="module_top_l"></div>
<div class="module_top_r"></div>
<div class="module_top">
<div class="module_top_title">
{L_WEB} - {CAT_NAME}
</div>
<div class="module_top_com">
# IF C_IS_ADMIN #
<a href="{PATH_TO_ROOT}/web/admin_web_cat.php{SID}" title="{L_EDIT}">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{LANG}/edit.png" class="valign_middle" alt="" />
</a>
# ENDIF #
{PAGINATION}
</div>
</div>
<div class="module_contents">
<table class="module_table">
<tr>
<th style="text-align:center;">
[url=web{U_WEB_ALPHA_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_LINK}
[url=web{U_WEB_ALPHA_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_DATE_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_DATE}
[url=web{U_WEB_DATE_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_VIEW_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_VIEW}
[url=web{U_WEB_VIEW_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_NOTE_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_NOTE}
[url=web{U_WEB_NOTE_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_COM_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_COM}
[url=web{U_WEB_COM_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
</tr>
# START web #
<tr>
<td class="row2">
[url=web{web.U_WEB_LINK}]{web.NAME}[/url]
</td>
<td class="row2" style="text-align: center;">
{web.DATE}
</td>
<td class="row2" style="text-align: center;">
{web.COMPT}
</td>
<td class="row2" style="text-align: center;">
{web.NOTE}
</td>
<td class="row2" style="text-align: center;">
{web.COM}
</td>
</tr>
# END web #
</table>
<p style="text-align:center;padding:6px;">{NO_CAT}[/p]
</div>
<div class="module_bottom_l"></div>
<div class="module_bottom_r"></div>
<div class="module_bottom">
<div style="float:left">
{CAT_NAME}
</div>
<div style="float:right">
{PAGINATION}
</div>
</div>
</div>
# ENDIF #
# IF C_DISPLAY_WEB #
<div class="module_position">
<div class="module_top_l"></div>
<div class="module_top_r"></div>
<div class="module_top">
<div style="float:left">
{NAME}
</div>
<div style="float:right">
{COM} {EDIT}{DEL}
</div>
</div>
<div class="module_contents">
<p class="text_center">
<button type="button" name="{NAME}" class="visit" onclick="document.location = 'count.php?id={IDWEB}';" value="true">
{L_VISIT}<img src="{PATH_TO_ROOT}/web/templates/images/web.png" class="valign_middle button_img"/>
</button>
[/p]
</div>
<div class="module_bottom_l"></div>
<div class="module_bottom_r"></div>
<div class="module_bottom text_small">
{KERNEL_NOTATION}
</div>
</div>
{COMMENTS}
# ENDIF #
# IF C_WEB_CAT #
<div class="module_position">
<div class="module_top_l"></div>
<div class="module_top_r"></div>
<div class="module_top">
<div class="module_top_title">
{L_WEB} - {L_CATEGORIES}
</div>
<div class="module_top_com">
# IF C_IS_ADMIN #
<a href="{PATH_TO_ROOT}/web/admin_web_cat.php{SID}" title="{L_EDIT}">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{LANG}/edit.png" class="valign_middle" alt="" />
</a>
# ENDIF #
{PAGINATION}
</div>
</div>
<div class="module_contents">
# START cat_list #
<div style="float:left;text-align:center;width:{cat_list.WIDTH}%;">
{cat_list.U_IMG_CAT}
[url={PATH_TO_ROOT}/web/web{cat_list.U_WEB_CAT}]{cat_list.CAT}[/url] <span class="text_small">({cat_list.TOTAL})</span>
<span class="text_small">{cat_list.CONTENTS}</span>
</div>
# END cat_list #
<div class="text_small" style="padding-top:10px;text-align:center;clear:both">
{TOTAL_FILE} {L_HOW_LINK}
</div>
</div>
<div class="module_bottom_l"></div>
<div class="module_bottom_r"></div>
<div class="module_bottom">
<div style="float:right">
{PAGINATION}
</div>
</div>
</div>
# ENDIF #
# IF C_WEB_LINK #
<div class="module_position">
<div class="module_top_l"></div>
<div class="module_top_r"></div>
<div class="module_top">
<div class="module_top_title">
{L_WEB} - {CAT_NAME}
</div>
<div class="module_top_com">
# IF C_IS_ADMIN #
<a href="{PATH_TO_ROOT}/web/admin_web_cat.php{SID}" title="{L_EDIT}">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{LANG}/edit.png" class="valign_middle" alt="" />
</a>
# ENDIF #
{PAGINATION}
</div>
</div>
<div class="module_contents">
<table class="module_table">
<tr>
<th style="text-align:center;">
[url=web{U_WEB_ALPHA_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_LINK}
[url=web{U_WEB_ALPHA_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_DATE_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_DATE}
[url=web{U_WEB_DATE_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_VIEW_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_VIEW}
[url=web{U_WEB_VIEW_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_NOTE_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_NOTE}
[url=web{U_WEB_NOTE_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
<th style="text-align:center;">
[url=web{U_WEB_COM_TOP}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/top.png[/img][/url]
{L_COM}
[url=web{U_WEB_COM_BOTTOM}][img class="valign_middle"]{PATH_TO_ROOT}/templates/{THEME}/images/bottom.png[/img][/url]
</th>
</tr>
# START web #
<tr>
<td class="row2">
[url=web{web.U_WEB_LINK}]{web.NAME}[/url]
</td>
<td class="row2" style="text-align: center;">
{web.DATE}
</td>
<td class="row2" style="text-align: center;">
{web.COMPT}
</td>
<td class="row2" style="text-align: center;">
{web.NOTE}
</td>
<td class="row2" style="text-align: center;">
{web.COM}
</td>
</tr>
# END web #
</table>
<p style="text-align:center;padding:6px;">{NO_CAT}[/p]
</div>
<div class="module_bottom_l"></div>
<div class="module_bottom_r"></div>
<div class="module_bottom">
<div style="float:left">
{CAT_NAME}
</div>
<div style="float:right">
{PAGINATION}
</div>
</div>
</div>
# ENDIF #
# IF C_DISPLAY_WEB #
<div class="module_position">
<div class="module_top_l"></div>
<div class="module_top_r"></div>
<div class="module_top">
<div style="float:left">
{NAME}
</div>
<div style="float:right">
{COM} {EDIT}{DEL}
</div>
</div>
<div class="module_contents">
{L_DESC}: {CONTENTS}
{L_CAT}:
<a href="{PATH_TO_ROOT}/web/web{U_WEB_CAT}" title="{CAT}">{CAT}</a>
{L_DATE}: {DATE}
{L_VIEWS}: {COMPT} {L_TIMES}
<span class="spacer"> </span>
<p class="text_center">
<button type="button" name="{NAME}" class="visit" onclick="document.location = 'count.php?id={IDWEB}';" value="true">
{L_VISIT}<img src="{PATH_TO_ROOT}/web/templates/images/web.png" class="valign_middle button_img"/>
</button>
[/p]
</div>
<div class="module_bottom_l"></div>
<div class="module_bottom_r"></div>
<div class="module_bottom text_small">
{KERNEL_NOTATION}
</div>
</div>
{COMMENTS}
# ENDIF #
Édité par riptide Le 25/03/2013 à 11h45
Teki Membre non connecté
-
Booster Mortier
- Voir le profil du membre Teki
- Inscrit le : 17/02/2013
Je me permet de prendre le sujet en cours :
Un élément flottant (float) est un élément qui est sorti du flux, il ne peut-donc pas être centré normalement (centré par rapport à quoi ?)
Cette manip devrait fonctionner :
Dans ton .module_top, ajoute cette ligne :
Code CSS :
text-align:center;
Ensuite, dans ton .module_top_title, remplace :
Code CSS :
float:left;
Par :
Code CSS :
display:inline-block;
Cette propriété (inline-block) reste très floue pour une majorité alors qu'elle est très pratique
Edit : Pour aligner un ou des blocs en float, il faut impérativement définir ou connaitre la largeur du conteneur ainsi que celle du/des blocs à centrer.
Édité par Teki Le 25/03/2013 à 14h27
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie