IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

menu css/javascript


Sujet :

CSS

  1. #1
    Futur Membre du Club
    Inscrit en
    Avril 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 14
    Points : 6
    Points
    6
    Par défaut menu css/javascript
    Salut à tous et à toutes

    J'ai tenté d'utiliser un effet en javascript sur mon site,
    Mais je me heurte à pas mal de problèmes :

    Voici la base ::: http://www.phatfusion.net/imagemenu/

    Moi j'utilise cet exemple pas pour un menu, mais pour un bandeau d'affichage des dernieres images uploadees.

    Voici une premiere version de mon adaptation :::

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
     
    <?php
    require_once("backend/functions.php");
    dbconn();
     
    $site_config['LEFTNAV'] = false;
    $site_config['RIGHTNAV'] = false;
     
    stdhead("");
    begin_frame("");
     
    ?>
    <script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/mootools.js"></script> 
    <script type="text/javascript" src="http://www.alamandra-team-host.net/domaine/shortripv3/_common/js/imageMenu.js"></script> 
    <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: repeat scroll 0%;
    	border-right: 2px solid #fff;	cursor:pointer;
     display:block; overflow:hidden; width:100px; height: 200px;}
    </style>
     
     
    <div align="center" border="0" cellspacing="0" cellpadding="0">
    <table width="1077" align="center" border="0" 
    style="background-url: ('http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/bgmain.gif');" height="293" cellspacing="0" cellpadding="0">
    <tr>
    <td width="1077"  height="293"  align="center" border="0"  colspan="4" background="http://www.alamandra-team-host.net/domaine/shortripv3/_common/images/MAINTABSRV5.gif">
     
    <div align="center" border="0" cellspacing="0" cellpadding="0">
    <div  width="60" height="212"  align="center" border="0">&nbsp;</div>
    <table border="0" width="830" height="212">
    <tr>
    			<td height="206" width="860" rowspan="2" align="center" >
     
    			<div id="container"> 
    			<div id="example"> 
    			<div id="imageMenu" style="width: 860px; height: 200px"> 
    			<ul style="margin: 0px; display: block; height: 200px; width: 860px; list-style: none;"> 
     
    <?				
    $news = mysql_query("SELECT id, name, added, image1, image2 FROM torrents WHERE banned = 'no' AND visible='yes'");			
     
    if (mysql_num_rows($news) > 0) 			{
     
    		while ($row2 = mysql_fetch_array($news, MYSQL_NUM)) 			{
    			$tor = $row2['0'];
    			$altname = $row2['1'];
    			$date_time=get_date_time(time()-(3600*1280)); // the 24 is the hours you want listed change by whatever you want
    			$orderby = "ORDER BY torrents.id DESC"; //Order
     
    			$limit = "LIMIT 9"; //Limit<img src=\"http://www.alamandra-team-host.net/domaine/shortripv3/uploads/images/$row[image1]\" width=\"500\" height=\"200\">
     
    			$where = "WHERE banned = 'no' AND visible='yes' AND torrents.id='$tor'";
     
    			$res = mysql_query("SELECT torrents.id, torrents.image1, torrents.image2, torrents.added, categories.name AS cat_name FROM torrents LEFT JOIN categories ON torrents.category = categories.id $where AND torrents.added >='$date_time' $orderby $limit");
    			$row = mysql_fetch_array($res);
    			$cat = $row['cat_name'];
     
    			$img1 = "<a href='$site_config[SITEURL]/torrents-details.php?id=$row[id]'><img border='0' src='uploads/images/$row[image1]' alt=\"$altname / $cat\" width='500'></a>";
     
    										if ($row["image1"] != "")						{
     
     
    $imgslide = "<li><a href=\"$site_config[SITEURL]/torrents-details.php?id=$row[id]\"><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;\"></li></a></li>";
     
    										print("". $imgslide ."");
     
     
    																						}
     
    																		}
     
     
    					}
     
    ?>
    				</ul> 
    			</div> 
    			<script type="text/javascript"> 
    				window.addEvent('domready', function(){
    				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2});
    					});
    			</script> 
     
    			</div>			
    			</div>	
    			</td>
     
     
    </tr>
    </table>
    </div>
     
    </div>
    </td>
     
    </tr>
    </table>
    </div>
     
     
    <?
    end_frame();
    stdfoot();
    ?>

    Si quelqu'un est interréssé à bosser là dessus,
    Je poursuivrai mes explications.

    Mon principal souci, est que les images ne sont pas affichees de la meme façon, suivant le navigateur utilise

    ICI une page de test ::: http://www.alamandra-team-host.net/d...v3/aaatest.php

  2. #2
    Modérateur
    Avatar de sabotage
    Homme Profil pro
    Inscrit en
    Juillet 2005
    Messages
    29 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Juillet 2005
    Messages : 29 208
    Points : 44 155
    Points
    44 155
    Par défaut
    Bonsoir et bienvenu sur le forum,

    Tu devrais reduire ton probleme a un code HTML/CSS minimal avec lequel tu reproduis le probleme ca serait plus facile a debuguer.

  3. #3
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Points : 3 747
    Points
    3 747
    Par défaut
    Bonsoir,

    Ton Doctype HTML4 Transitionnel incomplet (Sans URI) bascule les navigateurs graphiques en mode de rendu Quirks.
    Commence par ajouter un Doctype complet :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

  4. #4
    Futur Membre du Club
    Inscrit en
    Avril 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 14
    Points : 6
    Points
    6
    Par défaut
    OK merci de me répondre, en tout cas
    Bon je vais recomposer cela en une page sans aucune fioriture, ok !
    Pour mon doc type, je vasi essayer ta suggestion , re merci, A+

    EDIT ::::: Ouuula catastrohe, il semble que ce doc type ne soit pas bon a utiliser dans mon cas
    là je n'ai carrement plus aucune image affichee egalement avec IE,
    qui etait le seul a tout bien afficher, de plus mes blcoks et frames sont cassees, peut etre un autre type conviendrait mieux ?

    De tout façon,

    Je vous fais une page de test ultra simple,
    Hors Contexte de mon environnement.....

    EDIT ::: voilà une page minimaliste ::: http://www.alamandra-team-host.net/d...DV_test_00.php

  5. #5
    Futur Membre du Club
    Inscrit en
    Avril 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 14
    Points : 6
    Points
    6
    Par défaut
    Oups, désolé, j'ai trouvé !
    Non, sérieux, un enorme eclair a illuminer mes 2 neurones , oufff ouff
    Merci quand meme les gars,
    Je vais en profiter pour me balader sur vos forums,
    Doit y avoir des milliers de bonnes idées....A+

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    Février 2007
    Messages
    229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 229
    Points : 87
    Points
    87
    Par défaut
    Salut, pourrais-tu partager ta solution ? Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. menu css/javascript incompatible ie6
    Par 3psilOn dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 01/07/2010, 16h09
  2. menu CSS + javascript
    Par taffMan dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/01/2007, 00h34
  3. Menu css/javascript
    Par vincedjs dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 22/02/2006, 11h37
  4. [CSS-Javascript] Menu déroulant
    Par JeromeR dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/10/2004, 17h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo