28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour à tous,


voilà j'ai découvert très récemment la balise "marquee" et je trouve ça très bien. Seulement j'aimerai bien faire quelque chose avec mais je n'arrive pas.


j'ai un texte géneré dynamiquement et je voudrais le faire défiler (cf code en exemple).
J'ai donc utilisé la balise marquee et j'ai mis mon texte dedans. Jusque là ok ça défile.
Je voudrais maintenant que le texte défile uniquement lorsque je suis sur les fleches gauche ou droite.
j'ai fait une fonction javascript, et jusque là ok ça marche.

là j'ai 2 problèmes :

- je voudrais que mon texte soit affiché dès le départ (car là il est masqué et il s'affiche qu'à partir du moment où je lance le défilement)

j'ai essayé avec ce code :
marquee div{
	background-color:blue;
	margin-left:-490px;
	display:inline;
}

et ça marche que sous ie !! quelqu'un sait pkoi ?



- je voudrais que mon texte s'arrete de défiler juste à la fin du texte, est-ce possible ?


voici mon code (y a juste à copier-coller dans un fichier pour tester)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<style>
		table {
			width:600px;
			height:20px;
			text-align:center;
		}
		table td{
			border:1px solid black
		}

		marquee{
			width:500px;
		}
		marquee div{
			background-color:blue;
			display:inline;
		}
		#cellMiddle{
			width:500px;
		}
		
	</style>
	<script language="JavaScript1.2" type="text/javascript">
		var marquise = null;
		function stopScroll()
		{
			marquise.stop();
			marquise.scrollAmount=0;
		}
		function startScroll()
		{
			marquise.start();
			marquise.scrollAmount=5;				
		}
		function leftScroll()
		{
			marquise.direction="left";
		}
		function rightScroll()
		{
			marquise.direction='right';
		}

	</script>
	</head>	

	<body>
 
		<table cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td  valign="middle">
					<a href="#" 
					   onmouseover="rightScroll();startScroll();" 
					   onmouseout="stopScroll()" >
						<< 
					</a>
				</td>
				<td id="cellMiddle" valign="middle">
					<span class="gen">
						<marquee style="" id="marquise" scrollamount="3" direction="left" height="20">
							<nobr>
							<div>
								<font color="red" size="10">test1&nbsp;|</font>
								<font color="red" size="10">test2&nbsp;|</font>
								<font color="red" size="10">test3&nbsp;|</font>
								<font color="red" size="10">test4&nbsp;|</font>
								<font color="red" size="10">test5</font>										
							</div>
							</nobr>
						</marquee>
					</span>
				</td>
				<td valign="middle" >
					<a href="#" 
					   onmouseover="leftScroll();startScroll();" 
					   onmouseout="stopScroll()" >
						>>
					</a>
				</td>
			</tr>
		</table>


		<script language="JavaScript1.2" type="text/javascript">
			marquise = document.getElementById('marquise');
			stopScroll();
		</script>
	</body>
</html>






Merci à ceux qui pourront ou essayeront de m'aider.
Modifié par PoichOU (25 Jul 2006 - 16:37)
Bonjour,
marquee est une balise propriétaire d'ie, même si FF le reconnait, sur se forum, il ne laboure pas pour ie...
PS: ton code xhtml n'est pas conforme 2005 Smiley cligne mais année 1990.
Modifié par derniersite (30 Dec 2005 - 16:00)
Bonjour,

Marquee est une balise propriétaire Microsoft et ne fonctionne donc que sur IE.

Note du vendredi: faire défiler du texte sans que l'utilisateur ne puisse l'arrêter c'est mal et intrusif. Il aurait mieux valu que tu ne la découvres jamais. Smiley cligne

Quelques infos dans ce post:[Réglé] <marquee> et le XHTML 1.0 strict
Bonjour

Au fait, vous connaissez l'astuce pour remplacer <marquee> de manière valide dans une page XHTML1.0 strict ?

Bwa... Le texte mis en gif animé. Evidemment. Smiley ravi
Merci à vous pour ces infos.

Igor a écrit :
Note du vendredi: faire défiler du texte sans que l'utilisateur ne puisse l'arrêter c'est mal et intrusif. Il aurait mieux valu que tu ne la découvres jamais. Smiley cligne

Je pense que n'a pas compris ce que je souhaite faire. Test le code que j'ai mis plus haut, ça sera certainement plus clair que mes explications.


Laurent Denis : bonne idée ! lol ! pas possible puisque c'est des liens !!

derniersite : j'ai pas tout compris Smiley confus ! en quoi mon code ne va pas ?
PoichOU a écrit :

Je pense que n'a pas compris ce que je souhaite faire. Testes le code que j'ai mis plus haut, ça sera certainement plus clair que mes explications.


Autant pour moi, je viens de tester.
Modifié par Igor (30 Dec 2005 - 16:52)
des propriétés font dans l'xgtml, je suis pas un expert mais c'est du html, tu ferai mieux par exemple :
de déclarer la taille, la couleur, l'espacement des mots....
dans une déclaration de style !
ex:
#introduction {
position:absolute;
top:450px;
left:350px;
word-spacing:2px;
font-size:105%;
}

c'est aussi bien et conforme avec le web d'aujourd'hui et du futur...
En gros les css il faut t'en servir !
derniersite : oui oui j'suis tout à fait d'accord avec toi, là c'est juste du code fait rapidement pour l'exemple...


no prob Igor !

Si j'utilise "marquee" c'est pas vraiment par choix (une balise propiétaire d'ie Smiley angry !!). Mais je ne sais pas faire autrement...

Y a-t-il une solution à ce que je veux faire (sans utiliser flash) ?
Bonjours,
PoichOU a écrit :

Laurent Denis : bonne idée ! lol ! pas possible puisque c'est des liens !!
Des liens dans un <marquee> ? C'est un jeu ?
Tu peux cliquer sur un .gif ; si tu mets un lien !
ui je compte mettre des liens dans un <marquee>, et non ce n'est pas pour un jeu. C'est une sorte de pseudo menu...

je peux mettre plusieurs liens dans 1 seul gif ??? Smiley rolleyes
PoichOU a écrit :
ui je compte mettre des liens dans un <marquee>, et non ce n'est pas pour un jeu. C'est une sorte de pseudo menu...

je peux mettre plusieurs liens dans 1 seul gif ??? Smiley rolleyes


Et tu trouves cela pratique, ergonomique, accessible de faire un menu avec des liens dans un texte défilant ! Smiley biggol Smiley lol
oui.

c'est une sorte de menu rapide si l'utilisateur a envie. ça n'est pas obligatoirement affiché et ça n'est pas la seul façon d'aller sur les liens.
euh... Si tu tiens à utiliser <marquee>, alors il faut virer le DOCTYPE parce que :

DOCTYPE + <marquee> = non-sens Smiley smile
Re-bonsoir,

Plus sérieusement, cette fois, que mon précédent message : pourquoi diable ne pas franchir résolument le pas, bénéficier de possibilité graphiques étendues, et nous faire ce menu tapis roulant en flash ?

Ce ne sera pas moins accessible que le marquee javascripté, sans doute plus heureux visuellement, et nettement plus maniable Smiley cligne

(Et cela n'interdit pas le doctype)
Modifié par Laurent Denis (30 Dec 2005 - 21:01)
Modérateur
bonjour,
<marquee> a mon sens entre dans la categorie "dhtml" même si proprietaire IE, il me semble que son "defilement" saccadée devient inoperant si le javascript est desactivée (sous ff surement, IE je ne suis plus trop sur, cela depend peut-etre des versions , je dis ça car je viens d'a voir l a surprise de remarquer encore un comportement different sous mon IE6 et celui installé sur un autre pc.. difference xp home et professionnel ?!).
Donc même probleme que flash pas sur que 100% de tes internautes auront le plug-in ou le javascript activé.

Cependant en faisant une recherche via google genre "marquee valide xhtml" tu as tout de suite des reponses.

Un javascript te permettra d'avoir plus de possibilité "interactive" sens du deroulement ... selon la position de la souris, vitesse et fluidité plus agreable, etc... une multitude de script deja tout fait te permettent d'entrevoir les possibilité et/ou de les utiliser ou creer ton propre script.

Pense seulement a faire en sorte que tes liens soit effectivement apparent sur la page (si ils sont important) si le javascript est desactivé.

Le flash permet des choses visuel beaucoup plus elaborée, ... mais par exemple, je n'ai plus le plug-in d'installer, car les sites avec intro ou anime flash qui mettent plus de 30 sec a se charger, ça ne m'attire pas trop.Mais bon , cela depend aussi des internautes que tu cible...

Grosso-modo, et perso, quand je pense <marquee> je me tourne aussitot vers un javascript dans l'idée qu'il s'agit seulement "d'un gadget" dont la page peut se passer.

a plus
Laurent Denis a écrit :

Au fait, vous connaissez l'astuce pour remplacer <marquee> de manière valide dans une page XHTML1.0 strict ?


<script type="text/javascript">
<!--
document.write('<marquee ... >Mon joli texte qui défile !</marquee>');
// -->
</script>


Smiley lol Smiley lol Smiley exit OK, je sors

if (QuentinC < BonConseil) {
  // microsoft tags
  sendRedirect("http://totalementcretin.apinc.org/");
} else {
  tu_sors();
}
re-moi !

voici la soluce pour ceux qui tomberont sur ce topic :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

	#element {
		left:100px;
		top:100px;
		color:#ff0000;
		font-size:25px;
		position:relative;
		width:200px;
	}
</style>

<script type="text/javascript">
	// Défilement 4 directions multiple
	function Defilant(id, pos_init, pos_min, pos_max, delta, direction) {
	   this.id          = id;
	   this.element     = document.getElementById(id);
	   this.pos_init    = pos_init;
	   this.pos_min     = pos_min;
	   this.pos_max     = pos_max;
	   this.pos_current = pos_init;
	   this.delta       = delta;
	   this.direction   = direction;
	}
       
	Defilant.prototype.defile = function() {
	   if (!this.element) {
	      this.element = document.getElementById(this.id);
	   }
	   if (this.element) {
	      if(this.direction == 'vertical'){
	         if(this.pos_current < (this.pos_min - this.element.offsetHeight) ){
	            this.pos_current = this.pos_init;
	         } else if (this.pos_current > this.pos_max ) {
	            this.pos_current = this.pos_init - this.element.offsetHeight;
	         } else {
	            this.pos_current += this.delta;
	         }
	         this.element.style.top = this.pos_current+"px";
	      } else if(this.direction == 'horizontal') {
	         if(this.pos_current < (this.pos_min - this.element.offsetWidth) ){
	            this.pos_current = this.pos_init;
	         } else if (this.pos_current > this.pos_max ) {
	            this.pos_current = this.pos_init - this.element.offsetWidth;
	         } else {
	            this.pos_current += this.delta;
	         }
	         this.element.style.left = this.pos_current+"px";
	      }
	   }
	}
</script>
</head>

<body>
<div style='position: relative;overflow: hidden;width: 130px;height: 20px;'>
        <span	id='defileH1' 
		style='position: absolute;width: 90px;background-color:red;' 
		onMouseover="defileH_1.delta=0"
 		onMouseout='defileH_1.delta=deltaH1'
	>
		mon texte
	</span>
</div>

<script type="text/javascript">
	var deltaH1 = -1;
	var defileH_1 = new Defilant('defileH1', 130, 0, 130, deltaH1,'horizontal');
	setInterval("defileH_1.defile()",30);
</script>
</body>
</html>


merci à M. N et à dasdeb...

bonne année à tous !

PoichOU
Je viens d'utiliser ce code pour faire défiler des bannières de gauche à droite... Le problème étant qu'au départ les bannières apparaissent groupés, càd les unes au dessous des autres... une fois que la seconde bannière a de la place pour se placer à droite elle s'y met et ainsi de suite jusqu'à ce que les bannière s'alignent et traverse la page...

Je voudrais que les bannière s'affichent l'une à côté de l'autre dès le début de la page.

Voicice que j'ai modifié du code précédent:

<div style='position: relative;<!--overflow: hidden;-->width: 900px;height: 20px;'>

        <span	id='defileH1' 

		style='position: absolute;' 

		onMouseover="defileH_1.delta=0"

 		onMouseout='defileH_1.delta=deltaH1'

	>

		<img src="logo_defil/cetal.jpg">   <img src="logo_defil/leclerc.gif">

	</span>

</div>



<script type="text/javascript">

	var deltaH1 = -1;

	var defileH_1 = new Defilant('defileH1', 730, 0, 800, deltaH1,'horizontal');

	setInterval("defileH_1.defile()",10);

</script>
Pages :