width non pris en compte

Invité · 30/08/2016, 00h16

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

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 html :

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
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>

Invité · 30/08/2016, 08h01

Bonjour,

Code html :

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

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 css :

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
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 :

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
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;
}

Invité · 30/08/2016, 22h16

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 css :

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

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

width non pris en compte

CSS

Discussions similaires

Partager

Partager