Positionner un affichage
kahilesgi
Messages postés
79
Statut
Membre
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
bonjour
voila mon script m affiche deux elements
en effet lorsqu il m affiche le premier (lign1)il me cache le second(ligne2)
et lorsqu il m affiche le second(ligne2)il me cache le premier(ligne1)
comment faire pour afficher les deux elements aux meme endroits
meme ligne!
faut il faire appel aux feuille de styles?
comment positionner mes deux elements!
merci
voila mon script m affiche deux elements
en effet lorsqu il m affiche le premier (lign1)il me cache le second(ligne2)
et lorsqu il m affiche le second(ligne2)il me cache le premier(ligne1)
comment faire pour afficher les deux elements aux meme endroits
meme ligne!
faut il faire appel aux feuille de styles?
comment positionner mes deux elements!
merci
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script src="prototype.js"></script>
<script language="JavaScript">
function affichage(eltAafficher, eltAcacher)
{
var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.style.visibility="visible";
var eltAcacher = document.getElementById(eltAcacher);
eltAcacher.style.visibility="hidden";
}
</script>
</head>
<body>
<div id="courant" class="focus" ; position:absolute; visibility:hidden;">
aaaaa
</div>
<div id="titre" class="cache" ; position:absolute; visibility:hidden;">
bbbbbbbb
</div>
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
<body>
</html>
A voir également:
- Positionner un affichage
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Positionner des points sur une carte - Guide
- Affichage ips processeur graphique ✓ - Forum Matériel & Système
- Problème affichage fenêtre windows 10 - Guide
8 réponses
Bonjour,
Pas besoin de syles pour placer des éléments côte à côte.
Il suffit d'utiliser des éléments “en ligne” plutôt que des “blocs”.
Dans l'exemple que tu donnes, des <div> ont été utilisées. Or, elles se placent, par défaut, les unes en dessous des autres.
Essaye ça :
Cependant, si tu as besoin des ces <div> ou si tu tiens à utiliser des styles, tu peux t'y prendre, par exemple, comme ça :
Pas besoin de syles pour placer des éléments côte à côte.
Il suffit d'utiliser des éléments “en ligne” plutôt que des “blocs”.
Dans l'exemple que tu donnes, des <div> ont été utilisées. Or, elles se placent, par défaut, les unes en dessous des autres.
Essaye ça :
<span id="courant" class="focus"> aaaaa </span> <span id="titre" class="cache"> bbbbbbbb </span>Tu remarqueras au passage que j'ai supprimé les “ ; position:absolute; visibility:hidden;"” qui, utilisés comme ça, ne servent qu'à générer des erreurs (-;
Cependant, si tu as besoin des ces <div> ou si tu tiens à utiliser des styles, tu peux t'y prendre, par exemple, comme ça :
<div id="courant" class="focus" style="display:inline;"> aaaaa </div> <div id="titre" class="cache" style="display:inline;"> bbbbbbbb </div> <p> </p>Tu pourrais aussi utiliser du “float”.
kahilesgi
Messages postés
79
Statut
Membre
2
toujours le meme probleme ca m affiche l un en dessous de lautre!
en fait c est assez compliquer je travailler avec un module sur un portail
dans un module jai
mes div :
et dans l autre module jai mon script et mes boutons
mais mon script ne gere pas la classe
quelle fonction je dois lui ajouter pour qu il tienne compte de la class
comme ca je pourrai changer la class dans mes feuilles de styles et lui atribuer une hauteur 0px par exemple
dans un module jai
mes div :
<div id="courant" class="focus" > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div id="titre" class="cache" > bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div>
et dans l autre module jai mon script et mes boutons
mais mon script ne gere pas la classe
quelle fonction je dois lui ajouter pour qu il tienne compte de la class
comme ca je pourrai changer la class dans mes feuilles de styles et lui atribuer une hauteur 0px par exemple
function affichage(eltAafficher, eltAcacher)
{
var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.style.visibility="visible";
var eltcacher = document.getElementById(eltAcacher);
eltcacher.style.visibility="hidden";
}
</script>
</head>
<body>
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre', 'courant');">
</body>
Bon alors, fais les 1res modif. que je te proposais : remplace les “div” par des “span”
<span id="courant" class="focus"> aaaaa </span> <span id="titre" class="cache"> bbbbbbbb </span>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
jai remplacer les div par les span ca na rien changer
jai inserer une fonction qui apel ma class,pour qu elle tienne compte des modification de ma class
et voici mon fichier css avec mes class
je veux faire en sorte que je puisse parametrer dans ma feuille de style le positionnement de l affichage
que mes deux elements aaaaaa et bbbb soit aficher dans le meme emplacement!
jai inserer une fonction qui apel ma class,pour qu elle tienne compte des modification de ma class
function affichage(eltAafficher, eltAcacher)
{
var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.className="focus";
var eltcacher = document.getElementById(eltAcacher);
eltAfficher.className="cache";
}
et voici mon fichier css avec mes class
.focus{
display: block;
visibility: hidden;
color: blue;
font-size: 18px;
}
.cache{
height: 0px;
display: none;
visibility: hidden;
color: blue;
font-size: 18px;
}
je veux faire en sorte que je puisse parametrer dans ma feuille de style le positionnement de l affichage
que mes deux elements aaaaaa et bbbb soit aficher dans le meme emplacement!
C'est normal, je te propose d'utiliser des élément en ligne et toi tu mes les transforme en bloc (-;
“display: block;” !
Essaye :
“display: block;” !
Essaye :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Proposition pour hidden superposé</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="#" />
<style type="text/css">
.focus, .cache {
position : absolute;
margin : .5em;
}
.focus {
/*display: block;*/
visibility: hidden;
color: blue;
font-size: 18px;
}
.cache {
visibility: hidden;
color: blue;
font-size: 18px;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" language="JavaScript">
function affichage(eltAafficher, eltAcacher)
{
var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.style.visibility="visible";
var eltAcacher = document.getElementById(eltAcacher);
eltAcacher.style.visibility="hidden";
}
</script>
</head>
<body>
<span id="courant" class="focus" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
<span id="titre" class="cache" >
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</span>
<br /><br />
<form action="">
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
</form>
</body>
</html>
ui ca marche mais le probleme c est que ca n aparai pas a l interieur de mon module
en fait
quand c est : position absolu ca marche et le module n aparai pas!
et quand c est position relative le module aparait mais l afichage marche pas ca s afiche a deux endroit differents
en fait
quand c est : position absolu ca marche et le module n aparai pas!
et quand c est position relative le module aparait mais l afichage marche pas ca s afiche a deux endroit differents
Je ne sais pas ce qu'est ton module.
Peut-être t'est-il possible de le positionner en “relative” ?
Sinon, essaye de les insérer dans une <div> positionnée en “relative” :
Peut-être t'est-il possible de le positionner en “relative” ?
Sinon, essaye de les insérer dans une <div> positionnée en “relative” :
<div style="position:relative;">
<span id="courant" class="focus" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
<span id="titre" class="cache" >
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</span>
</div> <-- et ici
<br /><br />
<form action="">
<input type="button" value="compte1" onclick="affichage('courant', 'titre');">
<input type="button" value="compte2" onclick="affichage('titre','courant');">
</form>
</div> <-- ou ici
