Aller au contenu

Centrer une image

Kyo57

Par Kyo57
dans Systèmes de publication

 Partager

Sujets conseillés

Kyo57

Kyo57

Posté
Posté

Bonjour,

J'ai installer joomla 1.7 pour un amis,

quand en crée un article et quand place une image il est impossible de centrer cette image et je ne sais pas doù cela pourrait venir.

Si quelqu'un avait la solution ce serait super ^^ merci d'avance

Aenoa

Aenoa

Posté
Posté

passes en mode "source" et rajoute align="center" à ta balise image ;)

si ça ne fonctionne toujours pas, fais de même mais cette fois ci dans une "div" qui entourera l'image.

Kyo57

Kyo57

Posté
  • Auteur
Posté

passes en mode "source" et rajoute align="center" à ta balise image ;)

si ça ne fonctionne toujours pas, fais de même mais cette fois ci dans une "div" qui entourera l'image.

Le souci ses que la personne qui va géré le site après moi ne sait pas faire se genre de chose, y a t'il une correction a faire dans un script du module ou autres pour que cela fonctionne?

Lautre souci aussi que j'ai oublies de préciser ses une fois mis l'image après on mes le texte et il se place sur la droite de l'image alors on est obliger de taper plusieurs fois entrer (10 a 20x selon l'image) pour que le texte se trouve en dessous. :wacko: pas génial tous sa.

Bidule21

Bidule21

Posté
Posté

Bonjour,

Essaie d'utiliser l'éditeur de texte JCE plutôt que Tiny MCE qui est installé d'origine : http://www.joomlacontenteditor.net/

Il permet de facilement sélectionner les positions des images par rapport au texte, et tout un tas de choses que tu pourras découvrir sur le site donné ci-dessus.

Bonne chance !

  • 4 semaines plus tard...
Kyo57

Kyo57

Posté
  • Auteur
Posté (modifié)

jme suis rendu compte que en faite ses le templates qui a une erreure :(

Quelqu'un serait dou sa peut venir ?

Modifié par Dan
Merci de faire attention à l'orthographe !!! Ton IP est chez SFR donc j'imagine que tu es en France. Un peu de respect pour notre langue ne serait pas un luxe.
Bidule21

Bidule21

Posté
Posté

Bonsoir,

Avec un lien, ce serait plus simple pour tout le monde pour regarder :)

Mais si cela te fait la même chose sur toutes les images, ça se joue sûrement au niveau d'une classe qui s'ajoute à ton image et qui est gérée par ton css.

Ou alors l'image se place directement dans le corps du paragraphe auquel est assigné un text-align pour tous tes textes, auquel cas les images les subissent aussi...

Bonne chance,

Rizer

Rizer

Posté
Posté (modifié)

Dans ton CSS est-ce qu'il y a quelque chose comme ça ?


img {

text-align:left;

}

Ou un élément qui dépend d'une zone css qui aligne forcément les images ou le texte à gauche ou à droite ?

Modifié par Rizer
Kyo57

Kyo57

Posté
  • Auteur
Posté

bonsoir, ses pour se Template la 1.6.

Pour centrer un texte sa fonctionne.

le souci est quand ne peut centres l'image, et de plus, le texte qui se trouvera en dessous de l'image va se placer sur la droite de l'images, donc je suis obliger de descendre 10x le texte après l'image.

Ses pour le site d'un amis Domainedesultina

et voilà le css:

/*****************************/
/*** Core html setup stuff ***/
/*****************************/
html, body { height: 100%; margin: 0px; padding: 0px; }
form { margin: 0px; padding: 0px; vertical-align:middle;	display:inline; }
ul  {	margin: 0px; padding: 0px; list-style: none; }
a,img{ outline:none; margin:0; padding:0; border:none; }
p { margin-top: 0px; margin-bottom: 5px; }
.clear, .clr { clear: both; overflow:hidden; font-size:0; line-height:0; }
.left { float: left; }
.right { float: right; }
h2, h3, h4, h5, h6{  margin:10px 0px; line-height:normal; }
h1 { font-size:24px; margin:0px;}
h2 { font-size:20px; width: 100%; float:left; display:block;}
h3 { font-size:18px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:11px;}

a:link, a:visited {text-decoration: none; font-weight: normal;}
a:hover, a:active, a:focus {text-decoration: underline; font-weight: normal; outline:none;}

body {width:100%; text-align: center;}
body, td, div, p {font-family: Trebuchet MS, Verdana, sans-serif; font-size: 14px;	line-height: 1.3em;}
td, div, p {text-align: left;}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#wrapper{
	width:1000px;
	padding:0px;
	margin:0px auto;
	position: relative;
}

#header{
	float: left;
	width:1000px;
	height:332px;
	padding:0px;
	margin:0px;
}

#title {
	float: left;
	margin: 0px;
	padding: 0;
	font-family: Arial Black, Arial, Verdana, sans-serif;
	font-size: 30px;
	letter-spacing: -2px;
	font-weight: bold;
	text-align: left;
	position:absolute;
	top:6px;
	left:260px;
}

/**********************/
/*** Top Navigation ***/
/**********************/
#topnavi {
	float: left;
	width:1000px;
	height:30px;
	margin:0px;
	padding:0px;
	position:absolute;
	top:262px;
	left:0px;
}

#topnavi ul {
	float: left;
	width: auto;
	height:30px;
	margin: 0px 0 0 10px;
	padding: 0px;
	list-style:none;
}

#topnavi ul li {
	float: left;
	height: 30px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	position: relative;
	display: block;
}
#topnavi ul li a {
	float:left;
	height: 30px;
	cursor:pointer;
}

#topnavi ul li a span{
	float:left;
	height: 30px;
	margin: 0px;
	padding: 0 15px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	display: block;
}

#topnavi ul li a:hover {
	float:left;
	cursor:pointer;
	text-decoration: none;
}

#topnavi ul li a:hover span{
	float:left;
	margin: 0px;
	padding: 0 15px;
	line-height: 30px;
	text-decoration: none;
	display: block;
}

#topnavi ul li#current a span{
	margin: 0px;
	padding: 0 15px;
	line-height: 30px;
	text-decoration: none;
	display: block;
}

/**********************/
/*** User 4 (Search menu) ***/
/**********************/
#search{
	float: left;
	margin:0px;
	padding:0px;
	position:absolute;
	top:8px;
	left:856px;
}

#search div.search .inputbox{
	width:120px;
	height:20px;
	margin:0;
	padding:0px 2px;
	font-size:12px;
	line-height:20px;
}

/**********************/
/*** Top (Newsflash) ***/
/**********************/
#header_text {
	float: left;
	width: 370px;
	margin: 0px;
	padding: 0px;
	position:absolute;
	top:70px;
	left:230px;
}

#header_text div.newsflash {
	margin: 0px;
	padding: 0px;
	text-align:left;
	overflow: auto;
}
/**********************/
/*** Main Body ***/
/**********************/
#main{
	float:left;
	width:1000px;
	margin:0px;
	padding:20px 0;
}

/**********************/
/*** Left Column ***/
/**********************/
#leftcol {
	float: left;
	width:213px;
	padding: 0px;
	margin: 0px 0 0 7px;
}

#leftcol h3{
	width:213px;
	height:32px;
	padding: 0px;
	margin: 0px;
	font-family: Arial Black, Arial, Verdana, sans-serif;
	font-size: 16px;
	letter-spacing: -1px;
	font-weight: bold;
	line-height: 32px;
	text-align: center;
}

#leftcol div.module_menu , #leftcol div.module, #leftcol div.moduletable, #leftcol div.moduletable_menu {
	width:213px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
} 
#leftcol div.module_menu div div div, #leftcol div.module div div div, #leftcol div.moduletable div div div, #leftcol div.moduletable_menu div div div{
	padding: 0px 0 10px 0;
} 

/*Controls margins and paddings of side content */
#leftcol div.module div div div div, #leftcol div.module div div div p, #leftcol div.moduletable div div div div, #leftcol div.moduletable_menu div div div div {margin:0px; padding: 5px 10px;}
#leftcol div.module div div div div p {margin:0px; padding:0px;}
#leftcol div.module_menu ul, #leftcol div.moduletable ul, #leftcol div.module ul  {margin:0px; padding: 5px 10px;}
#leftcol div.module_menu ul ul, #leftcol div.moduletable ul ul, #leftcol div.module ul ul {margin:0px; padding: 0 0 0 10px;}

/**********************/
/*** Right Column ***/
/**********************/
#rightcol {
	float: right;
	width:213px;
	padding: 0px;
	margin: 0px 7px 0 0;
}

#rightcol h3{
	width:213px;
	height:32px;
	padding: 0px;
	margin: 0px;
	font-family: Arial Black, Arial, Verdana, sans-serif;
	font-size: 16px;
	letter-spacing: -1px;
	font-weight: bold;
	line-height: 32px;
	text-align: center;
}

#rightcol div.module_menu , #rightcol div.module, #rightcol div.moduletable, #rightcol div.moduletable_menu {
	width:213px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
} 
#rightcol div.module_menu div div div, #rightcol div.module div div div, #rightcol div.moduletable div div div, #rightcol div.moduletable_menu div div div{
	padding: 0px 0 10px 0;
} 

/*Controls margins and paddings of side content */
#rightcol div.module div div div div, #rightcol div.module div div div p, #rightcol div.moduletable div div div div, #rightcol div.moduletable_menu div div div div {margin:0px; padding: 5px 10px;}
#rightcol div.module div div div div p {margin:0px; padding:0px;}
#rightcol div.module_menu ul, #rightcol div.moduletable ul, #rightcol div.module ul  {margin:0px;	padding: 5px 10px; text-align:left;}
#rightcol div.module_menu ul ul, #rightcol div.moduletable ul ul, #rightcol div.module ul ul {margin:0px; padding: 0 0 0 10px;}

/******************************************************************/
/* Controls Link Icon appearance in side modules */
/******************************************************************/
#leftcol ul.menu li a,
#leftcol ul.menu li ul li a,
#rightcol ul.menu li a,
#rightcol ul.menu li ul li a,
#leftcol ul#mainlevel li a,
#leftcol ul#mainlevel li ul li a,
ul.mostread li a,
ul.latestnews li a,
.moduletable ul li a {
	padding:0 0 0 15px;
	margin:0px;
	list-style:none;
	line-height:normal;
	display:block;
}

/**********************/
/*** Main Content Menu ***/
/**********************/
#maincol0 {
	float: left;
	width:530px;
	margin: 0px 15px 10px 15px;
	padding: 0px;
}

#maincol1 {
	float: left;
	width:750px;
	margin: 0px 15px 10px 15px;
	padding: 0px;
}
#maincol2 {
	float: left;
	width:750px;
	margin: 0px 15px 10px 15px;
	padding: 0px;
}
#maincol3 {
	float: left;
	width:970px;
	margin: 0px 15px 10px 15px;
	padding: 0px;
}

#maincol_body {float: left; width:100%;}

#maincol_body h3 {}
#maincol_body h2 {
	font-family: Arial Black, Arial, Verdana, sans-serif;
	font-size: 24px;
	letter-spacing: -2px;
	font-weight: bold;
}

span.item-title a {font-weight:bold;}
.first dl dt,
.first dl dd {display:inline; margin:0px; padding:0px;}
dl {margin-bottom: 20px;}

/*** Controls images in main content ***/
#maincol_body img {float:left; margin:5px; padding:0px;}

#pathway {
	padding:0px;
	margin:0 0 10px 0;
	text-align:left;
	font-size:12px;
	font-weight:bold;
	line-height:30px;
	display:block;
}

/*** Controls publishing information: date, writer and hits ***/
.article-info {font-size:12px;}
.article-info-term {	font-weight: bold;}

/*** Controls "Print" and "Email" icons ***/
ul.actions {float:right;}
ul.actions li{	float:left; height: 20px; margin:0 5px;}

/*** Controls page navigation***/
div.pagenavcounter{width:100%; text-align:center;}
div.pagination, p.counter{width:100%; text-align:center; margin:15px 0 10px 0;}
div.pagination ul li{display:inline; padding: 0 3px;}
ul.pagenav {width:100%; text-align:center;}
ul.pagenav li{display:inline;}


.readmore a {
	height:17px;
	padding-left: 20px;
	line-height:17px;
	font-size:14px;
	font-weight:bold;
	text-decoration: none;
	margin:10px 0px 0px 0px;
	display:block;
}

/*** Controls distance between articles***/
.item-separator {margin-bottom:10px;}
.row-separator {margin-bottom:10px;}

/**************************/
/*** Banner ***/
/**************************/
.banneritem, .banneritem img {
	margin:10px auto;
}

/*******************/
/***  Login Form  ***/
/*******************/
.button {height:25px; cursor:pointer;} /***Controls button in login page***/
.inputbox {padding:0 0 0 2px;} /***Controls inputs in login form on home page***/
.login-fields input {width:200px; height:20px; padding:0 0 0 2px;} /***Controls inputs in login page***/

fieldset {border: none; padding:0px;}

/***Controls lower links in login form***/
#login-form ul li{ padding-left: 10px; }
#login-form ul li a {text-align: left; padding: 0px; font-size: 12px;}

/***Controls inputs and labels in login form on home page***/
#login-form fieldset p#form-login-username label,
#login-form fieldset p#form-login-username input,
#login-form fieldset p#form-login-password label,
#login-form fieldset p#form-login-password input {
	margin-left:10px;
	display: block;
}

#modlgn-username, #modlgn-passwd {width:150px; height:20px;}
#form-login-remember label{margin-left:10px;}
#login-form fieldset input.button {margin-left:20px;}

/***Controls login page***/
.login-fields{margin-bottom:10px;}
.login-fields label,
.login-fields input {
	margin-left:10px;
	display: block;
}
button.button {margin:10px 0 0 10px;}


/******************/
/***  Footer  ***/
/******************/

#footer_top{
	float:left;
	width:1000px;
	height:3px;
	margin:0px;
	padding:0;
	font-size:0; 
	line-height:0;
}
#footer{
	float:left;
	width:1000px;
	margin:0px;
	padding:10px 0;
}

.footer_small {
	float: left;
	width:205px;
	padding: 0 0 0 5px;
	margin: 0px 0 0 10px;
}
.footer_big {
	float: left;
	width:349px;
	padding: 0 5px 0 10px;
	margin: 0px 0 0 20px;
}
#footer h3{
	margin:0px 0px 10px 0px;
	padding:0 10px;
	font-family: Arial Black, Arial, Verdana, sans-serif;
	font-size: 24px;
	letter-spacing: -2px;
	font-weight: bold;
	line-height: 30px;
}

/******************/
/***  Copyright  ***/
/******************/
.footer1, .footer2 {
	float:left;
	width:1000px;
	margin:0px;
	padding:0px;
	text-align:center;
}

#copyright_bkg {
	float:left;
	width:1000px;
	margin:0px;
	padding:0px;
}
#copyright {
	float:left;
	width:1000px;
	margin:0px;
	padding:10px 0px;
	font-size: 12px;
	text-align:center;
	position:relative;
}

#copyright div, #copyright a:link, #copyright a:active, #copyright a:visited {
	font-size: 12px;
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}

#syndicate{
	float:left;
	padding-left: 25px;
}



Merci pour votre aide

Ernestine

Ernestine

Posté
Posté

Salut,

Le problème n'est pas dans le template ni la feuille de style. C'est au moment de l'édition (l'écriture) du texte que tu dois aligner correctement les images.

As-tu essayé la méthode proposée par Bidule21 ci-dessus ? Il me semble qu'il t'a donné une excellente piste :

Essaie d'utiliser l'éditeur de texte JCE plutôt que Tiny MCE qui est installé d'origine : http://www.joomlacontenteditor.net/

Il permet de facilement sélectionner les positions des images par rapport au texte, et tout un tas de choses que tu pourras découvrir sur le site donné ci-dessus.

Kyo57

Kyo57

Posté
  • Auteur
Posté

Salut,

Le problème n'est pas dans le template ni la feuille de style. C'est au moment de l'édition (l'écriture) du texte que tu dois aligner correctement les images.

As-tu essayé la méthode proposée par Bidule21 ci-dessus ? Il me semble qu'il t'a donné une excellente piste :

oui mais sa ne ferait que détournée le problème.

Bidule21

Bidule21

Posté
Posté

Salut,

La solution à ton problème est là dans ton CSS, lignes 321 et 322 :

/*** Controls images in main content ***/

#maincol_body img {float:left; margin:5px; padding:0px;}

,à peu de chose près comme l'avait dit Rizer :)

Maintenant, tu n'as plus qu'à l'adapter en fonction de tes besoins.

Ernestine

Ernestine

Posté
Posté
La solution à ton problème est là dans ton CSS, lignes 321 et 322 :

/*** Controls images in main content ***/

#maincol_body img {float:left; margin:5px; padding:0px;}

Même s'il supprime le "float: left", je doute que ça fonctionne : le bloc dans lequel sont contenues les images est en text-align: left, donc les images resteront collées à gauche.

Quant à appliquer un "text-align: center" sur les images ça n'aura aucun effet : ce n'est pas aux images qu'il faudrait l'appliquer, mais au bloc parent dans lequel est contenue l'image.

Pour résoudre ce problème, il faudrait que les images soient inclues dans un bloc sur lequel serait appliqué le style "text-align: center", mais ça, c'est bel et bien à l'éditeur de texte de le faire, voila pourquoi il devrait le remplacer, comme conseillé ci-dessus. Mais puisque notre ami Kyo a décrété que c'était une mauvaise solution...

Bidule21

Bidule21

Posté
Posté (modifié)

Oops, autant (au temps, on ne vas pas recommencer les petites batailles ;) ) pour moi, je n'ai pas fait attention effectivement au bloc parent... Bon bah j'en reviens donc effectivement à ma première proposition, JCE, qui est un éditeur de texte vraiment pratique et puissant. Et j'ajouterai au final, plutôt que partir sur :

la personne qui va géré le site après moi ne sait pas faire se genre de chose

Cela vaudrait peut-être le coup de prendre une heure pour lui expliquer comment fonctionne l'éditeur de texte. Voire au pire, lui mettre le bout de code à rajouter dans un coin en lui montrant comment faire.

Ah et aussi, attention à la taille des images, sur la page d'accueil, il y en a deux qui font 1,4 Mo...

Modifié par Bidule21
  • 2 semaines plus tard...
Soundboy39

Soundboy39

Posté
Posté

Bonjour Kyo57,

Pardonne moi pour la réponse tardive,

Il y a en fait 2 problèmes :

1.L'attribut float:left de l'ID #maincol_body img à la ligne 322 de template CSS.

=> le virer sans le remplacer.

2.Il y a en tout 8 paragraphes <p></p>

présents entre la balise <img /> de l'image

et la balise <p> de la zone de texte, je pensse

à un problème de saisie.

Un outil pour tester et corriger facilement les problèmes de HTML / CSS

=> FIREBUG

Bon courage à toi,

Mickael

  • 2 semaines plus tard...
Kyo57

Kyo57

Posté
  • Auteur
Posté (modifié)

Merci pour vos aides :)

Modifié par Patrick
Inutile de reprendre la réponse précédente, on vient de la lire, merci.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...