CSS probleme de overflow hidden + definition variable [ Résolu ]

(reprise du message précédent)

Voilà pourquoi dasn mon dernier exemple,
j'ai carrement vire l'appell au fichier .css
j'ai tente d'integrer les definitions des <li> direct dans le code html et php

$fondimage = 'http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row ';



$imgslide = "<li><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row \"><li class=\"all\" style=\"background: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row ') repeat scroll 0%; overflow: hidden; position: relative; width:98px; height: 200px; text-indent: -1000px; border-right: 2px solid #fff; cursor:pointer; display: block;\"></li></a></li>";


la premiere serie de <li> c ok ça marche
c est la serie en 98 x 200

et qui doit se cacher pour afficher la deuxieme serie de <li> en 500 x 200

ha ben bon allergique au rar , et ça change quoi du rar ou du zip ?
je pige pas là lo, ça fait la job demandee, ça compresse, no , bon je te refais ça en zip , et avec quoi, winzip j imagine, faut que je le retrouve kelkepart, a plus et merci encore man

OK winzip trouve, je te refais ça de suite, A + je vais manger un morceau, je me leve a peine, là en fait, hehe

j'en remet une tite couche pour etre sur que on se comprend bien !!

DONC

ce systeme d'affichage utilise des images, ouffff ouffff no sans dec ?

excusez, j'ai la rigolade facile, vaut mieux je pense, hihihi

RE DONC :::

on prend un pack de 5 images par exemple, SI ELLES SONT FIXES , c OK evidemment, et cela ne m'aurait pose aucun probleme de faire un copie / colle du code de base, re lol

MAIS !

MOI j'utilise des images qui viennent de ma DB, et changent souvent,

J prends les X dernieres images d'une certaine table ....


DONC ::::: on decoupe chaque image en 2 morceaux !

1 morceua pour u nli en 98 x 200 et un autremorceau pour un li en 500 x 200

toujours OK les gars ? vous suivez ?


Ma Foi c' est le principe de base pour un slide de ce genre

le li en 98 x 200 representye une sorte de " onglet ",

Lorsque on passe la souris dessus,

ça s'ouvre, heheh magie, oufff ouffff, ET ON VOIT LE 2ieme LI ! en 500 x 200

voili voilou


avec des images style toto.jpg et suivants, toto1, toto2....... ok c tres simple meme

MAIS AVEC UN WHILE en PHP et qui tourne avec du $row(image) remplacer les () par des [] c une autre galere

PUISQUE je n'arrive PAS a INTEGRE une var au fichier css

----------------------------------------------------------------------------

ça, cette serie de definitions de li dans le css

#imageMenu ul li.landscapes a {
	background: url(http://www.alamandra-team.net/_common/images/landscapes.jpg) repeat scroll 0%;
}

et puis une autre, et une autre et une autre ................


ça devient une seule ligne, si on pouvait le faire ::::::::

#imageMenu ul li.all a {
	background: url(http://www.alamandra-team.net/_common/images/$row(image)) repeat scroll 0%;
}

remplacez toujours les () par des [], votre forum aime po les [] apparemment


vous comprennez ?

les #imageMenu ul li.landscapes ou nature ou abstarct ou whatever ....

ça devrai devenir pour moi

#imageMenu ul li.all ........................... $row(image)
Modifié par alamandra (14 Apr 2009 - 18:56)

un de ces jours, lorsque j'aurai fini mon site,
Je me lancerai à tout réécrire mon theme en pure css, mais je sais par avance, les maux de tete terribles en perspective .... les definitions en html c'est tellemnt plus simple et plus rapide a mettre en oeuvre pour les " bricoleurs " du code....comme bibi...
j'ai deja enormement de temps a passer pour coder le php , le sql, le ajax ... pi sur cs3 aussi beaucoup de temps pour le design,.... alors les css definitions, ça passe souvent .... à la trappe, trop long, trop prise de tete, parce que je touche po ma bille des masses en css ....
Bonne soiree les gars,

Vous etes en tout cas extraordinaire d'altruisme et d'implication pour de parfaits inconnus !
c'est aussi ma philosophie de vie, mais il me semble, que c'est de plus en plus rare,
Les personnes autant attentionnees et serviables et desinterressees...

BIG UP pour vous tous ! .... et tite pause avec ce qui va bien , lol

BON, je viens de re re re chercher une nouvelle fois sur des forums etrangers :::::

No and not, pas de variables dnas un .css, cette fois ça rentre dans ma tite tete TETUE , hihi
OK
alors, pouvez m'aider à genérer mes css dans mon code html/php ?

Ce que j'ai commence a faire comme suivant :::

#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:98px;
	height: 200px;
}

DEVIENT DONC ::::::::::::::::

<li class=\"all\" style=\"background: url('http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]') repeat scroll 0%;  overflow: hidden; position: relative; width:98px; height: 200px; text-indent: -1000px; border-right: 2px solid #fff; cursor:pointer; display: block;\">

Modifié par alamandra (14 Apr 2009 - 19:23)

Salut,

@FoxLeRenard > hem... visiblement tu as oublié notre récente conversation !

de plus j'ai vu que tu as repris mes H REFs, mailbox.php, tartenpion.php du début .....

Ce ne sont pas les H REF que j'utilise en fait !
Les hrefs sont AUSSI définis en tant que variable ,
ils correspondent à la page concernee par la thumbnail affichee avec ses copines,
Dans mon Panneau D'Affichage

On commence souvent par en dire un peu sur un nouveau sujet dans un FAUX RHUM, hihihi,
Puis SI on rencontre des gens serieux et motives par sa demande,
Ben on explique mieux les choses , au fur et a mesure on regle sa façon d'expliquer ses problemes, sur la façon de recevoir les infos et de les comprendre, de la part de ses interlocuteurs

SO,

tout ça pour dire, que je suis tres bavard, mais ça vous l'aviez deja remarqué


donc mon code PHP, est la premiere chose a comprendre,
pour y integrer les css,

L'adresse d'une Image + son h ref sont des VAR,
Donc il me faut trouver un chemin détourné

Si on fusionne les css + le html, on se retrouve avec quoi, :::::


2 Slides déclarés en tant qu elements d'une liste li dans un tableau de liste ul

J'ai reussi 50% du chemin en declarant les attributs css de mon 1ier Slide,
Dans ma ligne de code php, j'en ai donné une copie un peu plus haut dans la discussion

la premiere <li> c est facile elle peut se declarer dans le code php ou html
la deuxieme <li> elle est cree comme calque par les css, on tourne en rond,
puisque les css ne gerent pas les var....................................

Je pense que je vais tout simplement virer les li ......

Refaire ce principe de calques de slide, par une cascade de DIV, savamment déclaré et portant les attributs css des <li> et <ul>

1 DIC container, 3 DIV Hidden, dont 2 correspondront aux <li> en 500px X 200 px, ET 98 X 200 px

et puis il va falloir trifouiller le js , pour qu il sache qu il va manipuler des DIV et non plus des LI, quoi ... je vois que cette façon pour arriver au résultat, à moins que....d'ici quelques jours, une lumiere jaillisse dans nos esprits


En effet,.... CE PROBLEME est rencontré par TOUS CEUX qui veulent utiliser l'ensemble des fantastiques javascripts que nous offre gracieusement et abondamment la communauté du net, TOUS CEUX qui s'amusent avec ces scripts, se rtégalent, n'est ce pas, c simple on copie colle, on suit les instructions, et hop on se fait passer pour un codeur.......on se fait plaisir a tout le moins, et c'est bien aussi l'essentiel, lol


Mais dès que l'on code " réellement ", on met les mains dans le cambouis du code,

ENORMEMENt de gens se heurtent à ces Problèmes de Variables,
C'est meme l'attrait essentiel d'un effet visuel, en l'occurence, de pouvoir le retravailler et l integrer dans un contexte de donnees traitees par DBs, mixer ça avec un bout de PHP, ou d'AJAX, une pincee de DHTML, du SQL, un peu de flash aussi , c joli.......


CONCLUSION pour cette Nuit ::::

Laissons tomber l'impossible, et refaisons ce code en remplacant les <li> et <ul> par des DIV imbriques, on devrait arriver au meme resultat sans trop de difficultes
dans les jours qui viennent je vais m'atteler à cette approche et voir ce que ça peut donner
[/blue]

Bon Courage pour le Taff demain, et RE MERCI à Tous pour le Présent et l'avenir aussi

Hiiiiiii l'Ami tu es tellement sur que ça marche pas !! j'ais dis quoi ??
ma solution va chercher dans une base MYSQL ou se trouvent 10.000 photos, et affiches celles que le critére de choix désigne !! en fabriquant dynamiquement le HTML désolé l'Ami c ' est toi qui n'a pas pris le temps de me lire ...
Si non a quoi serviraient les 3 array dont je parles

Allez A+
Modifié par FoxLeRenard (15 Apr 2009 - 05:12)

Les Gars une tite derniere remarque et je file sous la couette :

Je vais finalement franchir le pas et carrement coder tout ça direct dans le js,

J'ai déjà mis une raclée à jcarousel.jquery pour definir plus de choses dedans,
so je vais aller trifouiller ce motools, et y creer des variables et peu etre controler les css un peu plus a ma convenance, je vais tester ça

A+ et RE BIG UP à vous tous

Mai mon cher Fox, tu utilises des adresses fixes dans tes css,
c po possible pour moi, jamais je n'utiliserai 2 fois landscapes ou abstract, jamais !
je ne peux donc pas ecrire leur adresse dans les background url des css,
ou je te capte po alors ????!!!!

a quoi servent ces images que tu declares dans tes css, si on ne s'en sert pas ?

tu vas les cherche avec un bout de code en php sql tes images, et donc avec une var pour l adresse, no ?

haaaaaaaaaaaaaaaaa no suis trop bete !

MOI je t'ai posté mes codes sources, TOI tu postes le code genere, OK OK

So j'attends de voir ton code php , en effet suis ultra curieux de voir concretement comment tu procedes alors
Modifié par alamandra (15 Apr 2009 - 05:22)

alamandra a écrit :
tu vas les cherche avec un bout de code en php sql tes images, et donc avec une var pour l adresse, no ?
haaaaaaaaaaaaaaaaa no suis trop bete !
MOI je t'ai posté mes codes sources, TOI tu postes le code genere, OK OK
So j'attends de voir ton code php , en effet suis ultra curieux de voir concretement comment tu procedes alors

Voila EXACTEMENT !! tu verras on fait ce qu'on veut le jour ou on a compris que
PHP est coté serveur et te fabrique non seulement du HTML, mais des bouts de JS et même des CSS !!

Tout ça arrives chez le client, (visiteur) qui ne sais même pas comment on a fait ...

Tiens j'ais fais un portfolio a un ami photographe qui lui affiche les premiéres images avec une fonction aléatoire, tu va sur son site, t'a jamais la les même images ........ bon on vois ça demain mais attention le principe je veux dire un vrais code PHP mais pour cinq six photos, aprés tu transposera ...

Donc voici le PHP je répétes donc que sur une cinquantaine de photos
j' en prends 16 a chaque fois que la page est chargée, par exemple a
chaque fois que vous faites F5

Donc tout est généré par le PHP !!

<?PHP
/* ===============mon environement MYSQL de test=========== */
session_start();
include("".$LeWeb."_lesw/wsession.php");
include("".$LeWeb."_logos/".$LeWeb.".php");

$LeCheminNomX = array();
$LeCheminNomX[0]="";
$LaClass = array();
$LaClass[0]="";
$LeLien = array();
$LeLien[0]="";
$LeTxt = array();
$LeTxt[0]="";

$Nbr=1;
/* ================ Aleas ou regle de l affichage du jour ====== */
if (!isset($_SESSION['Choix']))   {$_SESSION['Choix']=1;$Choix=1;}
     else {$Choix=$_SESSION['Choix'];}
$Choix=$Choix+1;
if ($Choix>30) $Choix=1;
$_SESSION['Choix']=$Choix;
/* ================ On liste TOUT le fichier =================== */

   $Flag1=mysql_connect($Serveur,$User,$Mdp);
   $Flag2=mysql_select_db($MaBase);
   $result=mysql_query("select * from ".$LeWeb."_photo
     ORDER BY IndexPhoto ");
   while ($row=mysql_fetch_array($result)) 
     {
       $IndexPhoto=stripslashes($row['IndexPhoto']);
       $Active_O_N=stripslashes($row['Active_O_N']);
       $LeCheminNom=stripslashes($row['LeCheminNom']);
       $Categorie=stripslashes($row['Categorie']);
       $Libelle=stripslashes($row['Libelle']);
       if($IndexPhoto>=$Choix  && $Nbr<17)
         {
           $LeCheminNomX[$Nbr] = $LeCheminNom;
           $LaClass[$Nbr]=$LeCheminNom;
           $LaClass[$Nbr]=str_replace(".jpg","",$LaClass[$Nbr]);
           $LaClass[$Nbr]=str_replace("0test/","",$LaClass[$Nbr]);
           $LaClass[$Nbr]=$LaClass[$Nbr]."".$IndexPhoto;
           $LeLien[$Nbr]=$Libelle."".$IndexPhoto.".php";
           $LeTxt[$Nbr]=$Categorie."".$IndexPhoto;
           $Nbr=$Nbr+1;
         }
    }
   mysql_close();

?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<script type="text/javascript" src="0test/mootools.js"></script> 
<script type="text/javascript" src="0test/imagemenu.js"></script>
<script type="text/javascript" src="0test/imagemenu2.js"></script> 
<BODY bgColor=#606070 scroll=no >
<style>
#imageMenu { position: relative; width: 800px; height: 260px;
	overflow: hidden;}
#imageMenu ul {	list-style: none;	margin: 0px;	display: block;
 height: 260px; width: 1000px; }
#imageMenu ul li {	float: left;}
#imageMenu ul li a {	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;	cursor:pointer;
 display:block; overflow:hidden; width:100px; height: 200px;}

<?PHP
for ($a=1;$a<9;$a++)
  { echo ("#imageMenu ul li.".$LaClass[$a]." a { background: url(".$LeCheminNomX[$a].") repeat scroll 0%;}");}  
?>


#ImageMenu2 { position: relative; width: 800px; height: 260px;
	overflow: hidden;}
#ImageMenu2 ul { list-style: none; margin: 0px; display: block;
 height: 260px; width: 1000px; }
#ImageMenu2 ul li { float: left;}
#ImageMenu2 ul li a { text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;	cursor:pointer;
 display:block; overflow:hidden; width:100px; height: 260px;}
<?PHP
for ($a=9;$a<17;$a++)
  { echo ("#imageMenu2 ul li.".$LaClass[$a]." a { background: url(".$LeCheminNomX[$a].") repeat scroll 0%;}");}  
?>
.clear {	clear: both;}
</style>
<div id="container"> 
<div id="imageMenu" style="width: 860px; height: 260px"> 
<ul>
<?PHP
for ($a=1;$a<9;$a++)
  { echo ("<li class='".$LaClass[$a]."'><a href='".$LeLien[$a]."'>".$LeTxt[$a]."</a></li> ");}  
?>
</ul> 
</div></div><br /><br /><br />
<script type="text/javascript"> 
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});});
</script>

<div id="container"> 
<div id="ImageMenu2" style="width: 860px; height: 200px">
<ul> 
<?PHP
for ($a=9;$a<17;$a++)
  { echo ("<li class='".$LaClass[$a]."'><a href='".$LeLien[$a]."'>".$LeTxt[$a]."</a></li> ");}  
?>
</ul>
</div></div><br /><br /> <br />
<script type="text/javascript"> 
window.addEvent('domready', function(){
    var myMenu = new ImageMenu2($$('#ImageMenu2 a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});	});
</script>
</body></html>

Modifié par FoxLeRenard (25 Apr 2009 - 11:13)