width non pris en compte

Version imprimable

Bonjour,

Voici ce que j'essaye de faire:
* Avoir sur une seule ligne deux sections contenant du texte <= cela fonctionne
* Avoir la taille de la première section variable et celle de la deuxième fixe <= là je n'y arrive pas :calim2:
Si je réduis la taille de la fenêtre, la taille des deux sections diminuent alors que j'aimerais que seule la première diminue réellement. La deuxième étant sensée avoir un width fixe ...

J'ai utilisé des propriété css pour qu'on puisse faire défiler le texte de la première section même s'il dépasse. Mais même sans ces propriétés cela ne fonctionne pas.
Test fait aussi en mettant la section que je veux fixe au début mais rien de mieux.

Auriez-vous une idée ? C'est sans doute lié au div, mais je ne trouve pas d'autre propriété que flex pour avoir les deux sections sur une ligne.
Merci d'avance.

Ci-dessous le code:

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
 
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <style>
        * {
            box-sizing: border-box;
        }
        
        *::-webkit-scrollbar {
            display: none;
        }
        
        body {
            margin: 0em;
            padding: 0em;
            color: #000000;
        }
 
        div {
            display: flex;
        }
        
        .liste {
            /* Pour avoir un défilement horizontal */
            white-space: nowrap;
            overflow-y: hidden;
            text-overflow: ellipsis;
 
            border-width: 2px;
            border-style: solid;
            border-color: #00FF00;
        }
 
        .titre {
            width: 10em;
 
            border-width: 2px;
            border-style: solid;
            border-color: #0000FF;
        }        
    </style>
</head>
 
<body>
    <header>
        <div>
            <section class="liste">
                Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte
            </section>
            <section class="titre">
                <span id="titre_01">Titre de la section</span>
            </section>
        </div>
    </header>
    <main>
    </main>
    <footer>
    </footer>
</body>
 
</html>

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
	<header>
		<div id="liste">
			<p>Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte | Que du texte</p>
		</div>
		<div id="titre">
			<h1>Titre de la section</h1>
		</div>
	</header>
	<main>
		main
	</main>
	<footer>
		footer
	</footer>

1/ Avec display:table / table-cell;

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
 
*::-webkit-scrollbar {
  display: none;
}
 
body {
  color: #000000;
}
 
body > header {
  display: table;
  width: 100%;
}
 
#liste {
  display: table-cell;
  position:relative;
  border-width: 2px;
  border-style: solid;
  border-color: #00FF00;
}
#liste > p {
  /* Pour avoir un défilement horizontal */
  position:absolute;
  width:100%; 
  top:0; left:0;
  height:2em; line-height:2em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#titre {
  display: table-cell;
  width: 10em;
  border-width: 2px;
  border-style: solid;
  border-color: #0000FF;
}
#titre h1 {
  font-size:1.1em;
  height:2em; line-height:2em;
  text-align:center;
}

2/ Avec display:flex;

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
 
*::-webkit-scrollbar {
  display: none;
}
 
body {
  color: #000000;
}
 
body > header {
  display: flex;
  flex-direction: row;
  width: 100%;
}
 
#liste {
  flex: 1 1 auto;
  position:relative;
  border-width: 2px;
  border-style: solid;
  border-color: #00FF00;
}
#liste > p {
  /* Pour avoir un défilement horizontal */
  position:absolute;
  width:100%; 
  top:0; left:0;
  height:2em; line-height:2em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#titre {
  width: 10em;
  border-width: 2px;
  border-style: solid;
  border-color: #0000FF;
}
#titre h1 {
  font-size:1.1em;
  height:2em; line-height:2em;
  text-align:center;
}

30/08/2016, 22h16
Invité
Merci pour ton aide.

J'avais oublié d'enlevé le text-overflow, et le overflow doit être un overflow-y.
Voici la correction dans ta première version :
Code:

1 2 3 4 5 6 7 8 9 #liste > p { /* Pour avoir un défilement horizontal */ position:absolute; width:100%; top:0; left:0; height:2em; line-height:2em; white-space: nowrap; overflow-y: hidden; }
Ca me semble très bien comme ça. En plus avec le système des tables je pourrais facilement centrer verticalement :)