Défilement horizontale

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Défilement horizontale

Message par Alexandra59 Ven 25 Mar 2011 - 19:01

Bonjour/bonsoir ! Voilà j'ai un petit problème. Ayant trouver un code pour un tableau sur ce site, je l'ai pris. Or le défilement (qui est verticale) ne me plait pas visuellement. Je voudrais qu'il soit horizontale de haut en bas. En gardant l'effet d'arret quand on passe la souris dessus. Voici le code CSS :

Code:
/* =================
                              ===== Message d'accueil =====
        script by James1920 de CSSACTIF et LBTPROD - Novembre 13, 2010
      http://www.themes-fa.com - BY-NC  (http://creativecommons.org/licenses/by-nc/2.0/fr/)

 =================  */

 
 
  /*----------------- Ma g�n�ral ----------------- */
 

 /* Pour les défilement */
#scroller_container
{
padding-top: 15px;
overflow: hidden;
}
/* CSS Hack Safari */
#dummy
{
;#
}
#scroller_container
{
overflow: auto;
}


/*le tableau invisible */

.table25
{
border: none ;
}


/* Liens */

.a2
{
display: block;
width: 130px;
color: black;
text-align:center;
border: 1px solid black;
 -moz-border-radius: 5px;
height: 30px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}


.a2:hover
{

background-color: black;
color: white;
}



#table22 /* fond du ma */
{
width: 770px;
background-color: #454545;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}




/*-----------------Titre----------------- */


/* Le titre special pour le texte de bienvenu */

.h2_themebienvenu
{
font-size: 14px;
background-color: #000;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
/max-width: 367px;
}


/* le titre special pour les credits */


.h2_themecredit
{
font-size: 14px;
background-color: #000;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
/max-width: 160px;
}

/* le titre pour les autres boites */



.h2_theme
{
font-size: 14px;
background-color: #000;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;

}


/* effet de transparance FF */

.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}

.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}

/*-----------------Les boites contenant les textes----------------- */





/* Navigation */

 .navi_ma
 {
  background-color:#afaeae;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 16px;
height: 300px;
margin: 10px;
width: 130px;
padding: 5px;
line-height:34px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6;
-moz-box-shadow: 4px 4px 0 #e6e6e6;
-khtml-box-shadow: 4px 4px 0 #e6e6e6;
padding-top: 20px;

}


/* News  */

 .news
 {
 background-color: #afaeae;
  -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 120px;
width: 160px;
margin: 10px;
overflow-y: auto;
overflow-x: visible;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6;
-moz-box-shadow: 4px 4px 0 #e6e6e6;
-khtml-box-shadow: 4px 4px 0 #e6e6e6;
}

/* Partenaires */

.partenaire_test
{
 background-color: #afaeae;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 105px;
width: 160px;
margin: 10px;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6;
-moz-box-shadow: 4px 4px 0 #e6e6e6;
-khtml-box-shadow: 4px 4px 0 #e6e6e6;
padding-top: 20px;

}


/* message de bienvenu */


#bienvenu_ma
{
 background-color: #afaeae;
  -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 120px;
margin: 10px;
overflow-y: auto;
overflow-x: visible;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6;
-moz-box-shadow: 4px 4px 0 #e6e6e6;
-khtml-box-shadow: 4px 4px 0 #e6e6e6;
width: 370px;
}
 
/* membres staffs */
 

 
 .staff
{
 background-color: #afaeae;
 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 10px;
height: 105px;
width: 180px;
margin: 10px;
padding: 5px;
font-size: 14px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6;
-moz-box-shadow: 4px 4px 0 #e6e6e6;
-khtml-box-shadow: 4px 4px 0 #e6e6e6;
padding-top: 20px;
}


/*crédits */

 
 .credits
 {
 background-color: #afaeae;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 105px;
width: 160px;
margin: 10px;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #e6e6e6;
-moz-box-shadow: 4px 4px 0 #e6e6e6;
-khtml-box-shadow: 4px 4px 0 #e6e6e6;
padding-top: 20px;

}




/*-----------------inffobulles----------------- */

 
div.infobulle
{
 position: relative;
 float: left;
color: black;
}

div.infobulle span
{
 display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  color: black;
}


/* style de l infobulle */

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 10px; /* on positionne notre infobulle */
background-color: black;
color: #175FA3;
 padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
}

Merci d'avance !


Dernière édition par Alexandra59 le Ven 25 Mar 2011 - 20:33, édité 1 fois
Alexandra59

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Défilement horizontale

Message par Ea Ven 25 Mar 2011 - 19:08

Bonjour,


Hum je ne comprends pas trop mais surtout si il y a un défilement le css n'a probablement rien à voir avec.

Vous avez un code html avec un marquee ou bien avec du javascript ?

( et puis éventuellement une page sur laquelle on voit l'action du code )

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Défilement horizontale

Message par Alexandra59 Ven 25 Mar 2011 - 19:09

Voici le code de la page d'accueil. J'ai également un autre problème. Voici le tableau :

Code:
<center><div id="table22">
<table class="table25">

<tr>

<td rowspan="2"><h2 class="h2_theme">Navigations</h2><div class="navi_ma">
<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>

<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>
<a href="#" class="a2">liens 1</a>
</div>
</td>

<td align="left">
<h2 class="h2_theme">New's</h2><div class="news">
<p>Nouveau message d'accueil<br>
Nouveau message d'accueil<br>

Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>

Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br>
Nouveau message d'accueil<br></p>
</div>
</td>

<td align="justify" colspan="3">
<h2 class="h2_themebienvenu">Bienvenu sur Elfheim !</h2><div id="bienvenu_ma">Blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla.

</div>
</td>
</tr>

<tr>
<td align="left">
<h2 class="h2_theme">Nos Amis</h2><div class="partenaire_test" id="scroller_container">
 <div class="jscroller2_left jscroller2_speed-60 jscroller2_mousemove" style="font-size:14px; line-height:50px; white-space:nowrap; margin: 0;"><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a>


<a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a><a href="http://www.css-actif.com/"><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif" border="0" class="transparence"></a></div></div>
</td>

<td align="left" colspan="2">
<h2 class="h2_theme"> Les Dieux </h2><div class="staff"><div class="infobulle"><img src="http://i65.servimg.com/u/f65/11/95/30/70/416.jpg"  class="transparence" /><span>Admin en chef<div><img src="http://i65.servimg.com/u/f65/11/95/30/70/312.jpg" /></div><div><a href="#">Profil</a></div><div><a href="#">Mp</a></div>

</span></div><div class="infobulle"><img src="http://i65.servimg.com/u/f65/11/95/30/70/416.jpg"  class="transparence" /><span>Admin en chef<div><img src="http://i65.servimg.com/u/f65/11/95/30/70/312.jpg" /></div><div><a href="#">Profil</a></div><div><a href="#">Mp</a></div>
</span></div><div class="infobulle"><img src="http://i65.servimg.com/u/f65/11/95/30/70/416.jpg"  class="transparence" /><span>Admin en chef<div><img src="http://i65.servimg.com/u/f65/11/95/30/70/312.jpg" /></div><div><a href="#">Profil</a></div><div><a href="#">Mp</a></div>
</span></div>
</div>
</td>

<td align="left">
<h2 class="h2_themecredit">Crédits</h2><div class="credits" >© Concept : Crowley
© Codage : Ryôfu Itô
© Graph' : Gabrielle

</div>

</td>
</tr>
</table>
</div>


<script type="text/javascript" src="http://www.lbtprod.tk/cssactif/jsscroller.js"></script></center>

Dans la partie bienvenue, le défilement de texte est aussi horizontale, mais je le veux en verticale. Comment fait-on ?
Alexandra59

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Défilement horizontale

Message par Ea Ven 25 Mar 2011 - 19:14

Et bien il y a "jscroller2_left" comme classe à l'élément qui défile, il vous suffit de mettre "jscroller2_up" pour que ça aille vers le haut.

Sinon il faudra mettre des
entre les images pour faire des retours à la ligne parce que là vous avez tout sur la même ligne donc vous ne verrez qu'une seule ligne monter. J'imagine que vous vouez un logo par ligne alors il suffit de mettre entre les "</a><a href="...">" un "<br />" donc ainsi avoir "</a><br /><a href="...">".


Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Défilement horizontale

Message par Alexandra59 Ven 25 Mar 2011 - 20:33

Merci beaucoup ! Ca marche nickel Wink
Alexandra59

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum