étirer du texte sans provoquer un décalage

**laurentSc** · 21/10/2013, 14h22

Bonjour,

je dispose de 2 "div" avec une fonction "expand" ; par contre, si j'"expande" (ou étire pour parler français) le 1er "div", il s'affiche étiré mais le 2e se décale pour s'afficher à la suite ; voici mon code actuel :

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
<!DOCTYPE><html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <script>
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Fermer" : "Ouvrir";
 
}
function init() {
    expand("test1", window.location.hash==="#expanded");
    expand("test2", window.location.hash==="#expanded");
}
</script> 
  </head>
  <body>
    <body onload="init();">
<a id="test1Bt" href="#" onclick="expand('test1');">Ouvrir</a>
<div id="test1">test1<br /></div> 
<a id="test2Bt" href="#" onclick="expand('test2');">Ouvrir</a>
<div id="test2">test2</div><br/>
  </body>
</html>

et ce que je souhaite, c'est que le 2e ne se décale pas, donc que si j'étire le 1er, le 2e soit masqué ; comment faire ?

**NoSmoking** · 21/10/2013, 19h25

Bonjour,
un indice...les éléments A sont des éléments inline.

http://giminik.developpez.com/xhtml/a.html

**rodolphebrd** · 21/10/2013, 20h54

Bonjour,

si j'ai bien tout compris on peut réaliser cela en pur CSS avec la pseudo-classe Target:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <ul>
    <li><a href="#test1">Ouvrir 1</a>
      <div id="test1">Test 1 </div>
    </li>
    <li><a href="#test2">Ouvrir 2</a>
      <div id="test2">Test 2 </div>
    </li>
    <li><a href="#test3">Ouvrir 3</a>
      <div id="test3">Test 3 </div>
    </li>
  </ul>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
ul li {
	display:block;
	float:left;
	padding:5px;
}
 
 ul li div {
	display:none;
}
 
ul li div:target {
	display:block;
}

http://codepen.io/anon/pen/Gnyol

**NoSmoking** · 21/10/2013, 21h57

si j'ai bien tout compris on peut réaliser cela en pur CSS avec la pseudo-classe Target:

c'est une des bonnes utilisations de :target.

**laurentSc** · 21/10/2013, 23h00

Merci de me proposer un truc, mais ça répondrait mieux si les 3 li étaient alignés verticalement et pas horizontalement...

**Muchos** · 22/10/2013, 03h02

Envoyé par laurentSc

Merci de me proposer un truc, mais ça répondrait mieux si les 3 li étaient alignés verticalement et pas horizontalement...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
ul li {
	display:block;
	float:left;
	padding:5px;
}

Néanmoins, je trouve la version avec float plus jolie

**laurentSc** · 22/10/2013, 18h56

Bonsoir, j'ai commenté le float:left, mais ça se décale quand j'étire...

**Candygirl** · 22/10/2013, 19h15

position:absolute ?

**NoSmoking** · 22/10/2013, 19h29

Je doute que tu ais exploré cette piste

Envoyé par NoSmoking

un indice...les éléments A sont des éléments inline.

**laurentSc** · 22/10/2013, 19h53

position:absolute pas bon, car du coup, les 3 li sont empilés l'un par-dessus l'autre...

Envoyé par NoSmoking

Je doute que tu ais exploré cette piste

exact, sachant que je n'ai pas compris la piste...

**Candygirl** · 22/10/2013, 23h22

Envoyé par laurentSc

position:absolute pas bon, car du coup, les 3 li sont empilés l'un par-dessus l'autre...

Pas sur les li

Mais sur les div ?

**laurentSc** · 23/10/2013, 00h36

Cela confirme ma nullité en CSS (comme l'avait déjà remarqué Muchos). Par contre si les li ne se décalent plus, je souhaiterais que quand on étire, ce qui est étiré masque les li ; pour faire ça, j'ai tenté un truc, mais ça ne marche pas :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function act1()
{
document.getElementById("id1").style.display=="block";
document.getElementById("id2").style.display=="none";
document.getElementById("id3").style.display=="none";
}
function act2()
{
}
function act3()
{
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <ul>
    <li><a id="id1" href="#test1" onclick="act1()">Ouvrir 1</a>
      <div id="test1">Test 1<br/>test 1<br/>test 1<br/>test 1<br/> </div>
    </li>
    <li><a id="id2" href="#test2" onclick="act2()">Ouvrir 2</a>
      <div id="test2">Test 2 </div>
    </li>
    <li><a id="id3" href="#test3" onclick="act3')">Ouvrir 3</a>
      <div id="test3">Test 3 </div>
    </li>
  </ul></div>

**laurentSc** · 25/10/2013, 17h12

comme j'aborde le même sujet dans une autre discussion , je clos celle-ci.

étirer du texte sans provoquer un décalage

CSS

Discussions similaires

Partager

Partager