Défilement horizontale
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Défilement horizontale
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 :
Merci d'avance !
- 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
Re: Défilement horizontale
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.
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- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Défilement horizontale
Voici le code de la page d'accueil. J'ai également un autre problème. Voici le tableau :
Dans la partie bienvenue, le défilement de texte est aussi horizontale, mais je le veux en verticale. Comment fait-on ?
- 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 ?
Re: Défilement horizontale
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.
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- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Défilement horizontale
Merci beaucoup ! Ca marche nickel
Sujets similaires
» Barre de défilement horizontale en trop
» Suppression de la scrollbar horizontale
» Scrollbar horizontale
» Soulignement Menu horizontale
» QEEL : images horizontale
» Suppression de la scrollbar horizontale
» Scrollbar horizontale
» Soulignement Menu horizontale
» QEEL : images horizontale
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum