Centrer mes images en CSS sans bloc

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Centrer mes images en CSS sans bloc

mIRROR

Chevreuillobolchévik

Reprise du message précédent :
je sais, c est semantiquement hideux
meme si c est pas pire qu un entre nous

apres y a peut etre moyen de faire plus propre en js
mais je debute dans le domaine je pourrais pas t aider beaucoup

et pour ce qui est de modifier le script a la mano honnetement j ai pas le courage de m y plonger
ils ont pas un forum ?
il pourraient peut etre t aider

Publicité

koskoz

They see me trollin they hatin

Il est vide leur forum...

---------------
Twitter

nargy

display:block????
nan, display:inline

koskoz

They see me trollin they hatin

J'ai déjà essayé avec le inline

---------------
Twitter

rapper

nargy a écrit :

He oui, on arrive très vite aux limites du CSS (dès la deuxième ligne!).
Je ne vois pas d'autre solution que de trifouiller dans le générateur PHP/Wiki pour encadrer les images d'un div.

mIRROR

Chevreuillobolchévik

tiens grace a un pti coup de main d anapajari j ai reussi a bricoler ca

Code :

<script type="text/javascript">
function centrerImage() {
var imgGoUp = document.getElementsByTagName("img" );
for(i=0;i<imgGoUp.length;i++) {
imgGoUp[i].parentNode.style.textAlign = "center";
}
}
window.onload = centrerImage;
</script>

pt1 mon premier js

[:freekill]

un pack de neuf pour feter ca
testé sur ie6, ff1.5 et opera9
par contre ca va foutre le bordel si t as l habitude de mettre des smileys dans tes posts ^^

koskoz

They see me trollin they hatin

Super le js, merci !

Mais justement, pour ne pas centrer les images que je ne veux pas centrer, est-ce que je ne peux tout simplement appliquer un style aux images que je veux centrer et ton js ne centre que les images avec ce style précis ?

Edit : par contre c'est bien ce que je pensais, ça rentre en conflit avec le reste.
J'ai inclut le script dans mon index, et c'est l'index qui inclut toutes les autres pages, donc comme le script doit forcement être entre deux <head></head>, il n'y avait que là que je pouvais le mettre.
Pour les news, pas de problème, ça centre bien les images. Le problème c'est que si je veux aligner une image à droite ou à gauche, l'image est bien alignée mais c'est le texte qui est centré, même avec la propriété justify [:matleflou]

Donc si on pouvait appliquer un style aux images à centrer et que ton js ne centrer que ces images, se serait merveilleux, sinon ton script ne me sert à rien [:spamafote]

Message édité par koskoz le 04-08-2006 à 12:03:53

---------------
Twitter

Pitsy

koskoz a écrit :

Bon, en gros voilà comme ça se passe

Code :

<ma structure avec tout mes div>
<? echo $news['news']; ?>
</ma structure avec tout mes div>

Bon j'y connais rien au wikirender, balbutie en php, donc on ne se moque pas si la propopsition est idiote :

Et si, à ce niveau, avant d'en faire l'echo, tu retrevaillais $news de la manière suivante(suite à la proposition de narguy avec les regexp):
- remplacer le "<img" par "<div class='center'><img"
- ensuite chercher le suivant et le remplacer par </div>
- ajouter dans le css .center {text-align:center;}

ou encore plus simple, tu remplaces "<img" par "<img"

?

Message cité 1 fois

koskoz

They see me trollin they hatin

Pitsy a écrit :

Ca doit être faisable mais je sais pas si c'est dans mes cordes.
L'histoire du js m'aurait arrangée [:ula]

---------------
Twitter

Pitsy

qqch du genre:

<?
$news['news']=eregi_replace("<img","<img",$news['news']);
echo $news['news']; ?>

Aucune garantie pour la syntax mais tu peux toujours essayer, sans oublier d'ajouter le style...

edit:oups non

y a un lien autour de ton image, ça complique un peu en fait... je vais essayer, inutile de tester le code ci-dessus

Message édité par Pitsy le 04-08-2006 à 12:18:20

Publicité

Pitsy

faudrait qqn qui maîtrise un peu les expressions régulières pour détecter un:
retour de ligne<a n'importe quoi ><img

Message cité 2 fois

mIRROR

Chevreuillobolchévik

bon ca avance

dans le conf ligne 116 tu remplaces le bloc case3
par ce nouveau

Code :

case 3:
if($contents[2]=='l' ||$contents[2]=='L' || $contents[2]=='g' || $contents[2]=='G')
$attribut.=' style="float:left;"';
elseif($contents[2]=='r' ||$contents[2]=='R' || $contents[2]=='d' || $contents[2]=='D')
$attribut.=' style="float:right;"';
elseif( $contents[2]=='centerSelf' )
$attribut.=' class="centerSelf"';
elseif( $contents[2]=='centerParent' )
$attribut.=' class="centerParent"';

donc maintenant pour centrer t as deux nouvelles options centerSelf et centerParent

ca créé des classes que tu definis en css
centerSelf c est pour une image seule et tu fous en css margin: 0 auto;
centerParent c est pour un groupe d images

la il faut reussir a mettre un text-align:center au parent

bon ca marche ~~toujours pas~~ sur ie ~~mais voila ou j en suis pour l instant~~

Code :

function centrerImage() {
var imgGoUp = document.getElementsByTagName("img" );
for(i=0;i<imgGoUp.length;i++) {
if( (imgGoUp[i].getAttribute("class" ) == "centerParent" ) || (imgGoUp[i].getAttribute("className",0) == "centerParent" ) ) {
imgGoUp[i].parentNode.style.textAlign = "center";
}
}
}
window.onload = centrerImage;

~~bon reste plus a savoir pourquoi ca cloche sur ie~~
edit
ca marche au poual

Message cité 1 fois
Message édité par mIRROR le 04-08-2006 à 13:00:28

Pitsy

Pitsy a écrit :

faudrait qqn qui maîtrise un peu les expressions régulières pour détecter un:
retour de ligne<a n'importe quoi ><img

/\n<a.+<img/

ça me détecte la bonne occurence en JS edit: enfin faudrait encore la travailler parce qu'elle renvoie trop là

Après y a juste à remplacer les 3 premiers caractères par et c'est bon. Donc si qqn passe par là et peut pondre plus rapidement ça en php...

Message édité par Pitsy le 04-08-2006 à 13:23:45

koskoz

They see me trollin they hatin

Je tiens à remercier toutes les personnes de ce topic pour leur aide.
Quand je remplirai la page "A propos" je penserai à vous .

En espérant qu'il y ait un peu plus de visiteur pour profiter de tout ce beau travail :'(

D'ailleurs si quelqu'un parmi vous se sens l'âme d'un testeur ou newseur :whistle:

---------------
Twitter

mIRROR

Chevreuillobolchévik

chui ouf j ai pas calculé le coup des liens autour des images

koskoz

They see me trollin they hatin

Pour le js là.
Pas besoin d'une CSS pour centrer une seule image, ça marche tout aussi bien avec le centerParent.
Ou alors il y a un truc, mais se serait plus simple que tout fonctionne avec le centerParent.

mIRROR => ouais, en php avec les regexp ou même si on explode la chaine, c'est un peu chaud.

Message cité 1 fois

---------------
Twitter

mIRROR

Chevreuillobolchévik

koskoz a écrit :

Pour le js là.
Pas besoin d'une CSS pour centrer une seule image, ça marche tout aussi bien avec le centerParent.
Ou alors il y a un truc, mais se serait plus simple que tout fonctionne avec le centerParent.

pas con

mIRROR => ouais, en php avec les regexp ou même si on explode la chaine, c'est un peu chaud.

bon j essaie de voir comment remonter jusqu au p si y a des lins sur les images ^^

Message cité 1 fois

koskoz

They see me trollin they hatin

Je comprend pas, le js fonctionne en local mais aucune image n'est centrée online :cry: .

Regardez le désastre là quand il y a des images dans les news, et remarquez dans le code source que j'ai bien tout fait comme il faut (les images ont une classe, la même que la fonction js récupère).

---------------
Twitter

Pitsy

mIRROR a écrit :

bon j essaie de voir comment remonter jusqu au p si y a des lins sur les images ^^

Mirror tu maîtrises php toi non?

Perso je trouve plus logique de corriger ça côté php que venir par après avec un JS et certainement finalement moins complexe (par contre il est clair que je trouve très "sport" de le faire )

Cette fois je trouve ma regexp assez aboutie:

/\n(<a[^<]+> )?<img/

mais ça va me prendre 3 plombes à traduire ça en bout de code php vu mon niveau ...

koskoz

They see me trollin they hatin

Bon, j'ai trouvé ce qui cloche avec le js.

Dès que mes deux images renvoient vers un lien, elles ne sont plus centrées.
Par contre, si la première renvoie vers un lien mais pas la deuxième, elles restent centrées.

---------------
Twitter

Pitsy

essaie ça:

<?
$str = preg_replace('`( )(\s)?(<a[^<]+> )?(<img)`', '$2$3$4', $news['news']);
echo $str;
?>

et rajoute

.center {text-align:center;}

dans ton css

Message édité par Pitsy le 04-08-2006 à 15:18:19

mIRROR

Chevreuillobolchévik

ok pour le js ca plante parce que j ai pas calculé que l image pouvait entrer dans un lien (t'es sur que ca marche en local ? chez moi non )
et le script devient laid si je rajoute une couche de tests mais je vais essayer quand meme (pour le sport )

@pitsy : maitriser faut le dire vraiment vite

bah sinon les patterns qu il faut c est
(je suppose que le a est facultatif, on sait jamais)

trouver ca ($pattern)
<a facultatif><img class="centerParent"

remplacer par ($replace)
<a facultatif><img

puis apres dans le lib en ligne 505 remplacer

Code :

return implode("\n",$this->_newtext);

par

Code :

return preg_replace($pattern,$replace,implode("\n",$this->_newtext));

apres je te laisse remplacer mon html pourri pas de zoulis patterns et moi je retourne a mon js

Message cité 1 fois

Pitsy

mIRROR a écrit :

@pitsy : maitriser faut le dire vraiment vite

merci ! j'ai testé un truc (cf plus haut). Je me pencherais sur ton truc si ça marche pas

J'ai aussi supposé que le a était facultatif

anapajari

s/travail/glanding on hfr/gs;

mIRROR a écrit :

[cpp]function centrerImage() {
...
if( (imgGoUp[i].getAttribute("class" ) == "centerParent" ) || (imgGoUp[i].getAttribute("className",0) == "centerParent" ) ) {
...
}

Jeune padawan, la ligne ci dessus devrait être remplacer par:

Code :

if ( imgGoUp[i].className == "centerParent" )

comme ça elle marcherait partout, tout le temps

Pitsy a écrit :

faudrait qqn qui maîtrise un peu les expressions régulières pour détecter un:
retour de ligne<a n'importe quoi ><img

Code :

$pattern = "/<a(.*?)><img/is"

Message cité 1 fois
Message édité par anapajari le 04-08-2006 à 15:13:59

mIRROR

Chevreuillobolchévik

anapajari a écrit :

Jeune padawan, la ligne ci dessus devrait être remplacer par:

Code :

if ( imgGoUp[i].className == "centerParent" )

comme ça elle marcherait partout, tout le temps

bien joué
il me faudra un peu de temps pour lire toute la doc menfin ^^
ca rentre

Code :

function centrerImage() {
var imgGoUp = document.getElementsByTagName("img" );
for(i=0;i<imgGoUp.length;i++) {
if( imgGoUp[i].className == "centerParent" ) {
if (imgGoUp[i].parentNode.tagName == "P" ) {
imgGoUp[i].parentNode.style.textAlign = "center";
}
else {
imgGoUp[i].parentNode.parentNode.style.textAlign = "center";
}
}
}
}
window.onload = centrerImage;

maintenant le code marche sur mes trois browsers sauf que j ai une erreur sur cette ligne

Code :

if (imgGoUp[i].parentNode.tagName == "P" ) {

il me dit imgGoUp[i] has no properties pourtant il me fait pas chier ailleurs

anapajari

s/travail/glanding on hfr/gs;

balourde tout le code de la page avec laquelle tu testes, j'ai la flemme d'en faire une!

koskoz

They see me trollin they hatin

Ton js fonctionne mIRROR, merci beaucoup .

Même si ce n'est pas la solution idéale, au moins mes images sont centrées...

---------------
Twitter

Pitsy

T'as testé mon code plus haut juste pour voir stp ?
M'est complètement = que tu ne l'utilises pas mais j'aimerais savoir si ça marche

mIRROR

Chevreuillobolchévik

Citation :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>titre</title>

<script type="text/javascript">

function centrerImage() {

var imgGoUp = document.getElementsByTagName("img" );

for(i=0;i<imgGoUp.length;i++) {

if( imgGoUp[i].className == "centerParent" ) {

if (imgGoUp[i].parentNode.tagName == "P" ) {
imgGoUp[i].parentNode.style.textAlign = "center";
}
else {
imgGoUp[i].parentNode.parentNode.style.textAlign = "center";
}

}

}

}
window.onload = centrerImage;
</script>
</head>
<body>
<a href="#"><img class="centerParent" src="a.gif"></a> 
<img class="centerParent" src="a.gif"> 
<img src="a.gif">

</body>
</html>

(je le mets entre quote c est mieux pour copier )

Message édité par mIRROR le 04-08-2006 à 16:25:38

anapajari

s/travail/glanding on hfr/gs;

pas d'erreur avec ton code mIRROR

Message cité 1 fois

mIRROR

Chevreuillobolchévik

anapajari a écrit :

pas d'erreur avec ton code mIRROR

oui y a que firebug qui peste
(la console de firefox dit rien non plus ^^)

en tout cas ravi de t avoir aidé koskoz =)

koskoz

They see me trollin they hatin

pisty => ton code c'est la regexp qui entoure chaque image d'un ou alors qui entoure un bloc d'image ?

Message cité 1 fois

---------------
Twitter

Pitsy

koskoz a écrit :

pisty => ton code c'est la regexp qui entoure chaque image d'un ou alors qui entoure un bloc d'image ?

Ma regexp remplace le avant l'image (avec éventuellement un lien entre 2) par un (ou si tu préfères tu peux mettre directement ). ça ne rajoute donc rien, c'est censé faire exactement ce que fait le js de mirror en fait, soit rendre le paragraphe qui contient les images centré

Message cité 1 fois

koskoz

They see me trollin they hatin

Pitsy a écrit :

[:nico54]

Je teste dès que je peux

---------------
Twitter

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Centrer mes images en CSS sans bloc

Sujets relatifs
probléme d'images	[HTML/CSS/JS/PHP] DEBUTANTS / NEWBIES, ce topic est pour vous :)
[CREATION] Hermeshop : BANQUE/EDITEUR d'images en JS.	[resolu] problème d'affichage d'images sous IE
script html pour afficher images en miniatures	Probleme Css IE /FireFox
rollover avec deux images	[CSS] Afficher des tabs jolis et proprement.
Centrer un block et pas le text	[PHPNuke] limitation pour inclure un fichier dans un bloc ?
Plus de sujets relatifs à : Centrer mes images en CSS sans bloc

Page générée en 0.101 secondes