Discussion :

[philippef]

Bonjour,
je suis prêt à mettre le site en ligne mais je me pause une question :
j'ai fait le site sur mon pc qui est un 17 pouces et je me demande ce que cela va donner sur les écrans plus petits.

Quand je clique sur le signet "Niveau inf." en haut à droite de l'écran et que je "rétrécis" le site avec la souris les div se chevauchent et pourtant j'ai fait à peu près ce qui est indiqué http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/.
D'ailleurs j'ai fait le test et là aussi les div passent les uns sous les autres.
Est ce que l'on peut éviter ça?
j'espère avoir clair dans ce que je veux expliquer

[undead001]

Bonjour,
Oui c'est bien claire, mais sans exemple concret on ne peut pas t'aider...
le code html avec le css serait un debut

Cordialement

[Invité]

Bonjour,

Mets-le en ligne et donne l'URL.
On verra bien.

[philippef]

Je mettrai le site en ligne la semaine prochaine. Je cherche un hébergeur.
En attendant je mets mon code
CSS pour la partie architecture

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
 
body {
	margin:0px;
  	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
  	-o-background-size: cover; /* pour Opera */
  	background-size: cover; /* version standardisée */
}
div#bandeau {
	width:100%;
	height:150px;
	background-color:#A52A2A;
}
div#mainmenu {
	display:flex;
	flex-direction:row;
}
div#menu {
	width:13.5%;
	float:left;
	padding: 0px;
	background-color:#A52A2A;
}
div#contenu {
	float:left;
	margin-left:2em;
	margin-top: 1em;
	width:77em;
	color: #FFFFFF;
	font-family:verdana;
	font-size:13px;
	min-height:1200px;
	background-color:#FFFFFF;
}
div#footer {
	float : left;
	width : 100%; 
	height : 50px;
	color : #FFFFFF; 
	background-color:#A52A2A;
}

La page index expurgée du code du fil d’Ariane, du menu, et des include dans le conteneur pour ne laisser que le principal

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
<div id="bandeau">
		<img src="images/logo_association.jpg" alt="" style="margin-left:1em;height:150px;" align="left"/>
		<a href="index.php?page=accueil"><img src ="images/crypte.jpg" alt="" style="margin-left:2em;height:150px;" align="left"></a>
		<span style="color:yellow;font-family:Comic Sans MS;font-size:38px;margin-left:100px">Association pour l'Animation Culturelle</span><br> 
		<span style="color:yellow;font-family:Comic Sans MS;font-size:38px;margin-left:240px">de Troissy~Bouquigny</span>
</div>
	<div style="background-color:#8E514D;height:25px;color:white" width="100%">
		<img src="images/fonds_suivi.jpg" alt="" /> Vous êtes ici <img src="images/ariane.jpg" alt=""/>
		<?php 
                if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
                        switch($page){
                                case 'accueil': echo("Accueil");break;
 
                                case 'reservations': echo("Réservations visites");break;
                        }
                if (isset($_SESSION['utilisateur'])){
                        echo "<label style='margin-left:970px;font-size:13px;vertical-align:center;font-family:verdana;color:white'>";
                        echo $_SESSION['utilisateur']; echo "</label>";
                        echo "<a href='index.php?deconnexion' style='margin-left:40px;vertical-align:center;'>déconnexion</a>";
                }
                ?>
	</div>
<div id="mainmenu">
	<div id="menu"><br>
	<nav>
		<ul>
			<li><a href="index.php?page=accueil">Accueil</a></li>
		</ul>
	</nav>
	</div>
	<div id="contenu">
		<?php 
                switch($page){
                        //menu général
                        case 'accueil': include ('accueil.php');break;
                }
                ?>
	</div>
</div>
<div id="footer">
<p align="center" style="color:white; font-size:11px; font-family:verdana">
<a href ="index.php?page=log" style="color:white">se connecter</a> | Plan du site | 
<a href ="index.php?page=mentions_legales" style="color:white">Mentions légales</a> </p>
</div>
</body>
</html>

si vous voulez toute la page, pas de problème

[Invité]

Bonjour,

dans le forum CSS, on n'a pas besoin de code avec du PHP.

Par contre, il faut le code HTML généré ! ("Afficher la source" ou "Ctrl"+"U").

De la page complète, tant qu'à faire.

[philippef]

je mets 2 fichiers.
merci

[Invité]

Je n'ouvre pas les fichiers joints.

[Invité]

Bonsoir,

Un layout Flexbox se veut flexible. Ainsi, si vous diminuez la taille de la page, les blocks vont essayer de s'y adapter. A moins que vous ayez renseigné une largeur.
Bon à savoir également : le contenu joue un rôle sur la taille de la flexbox.

Mon conseil : doublez vos éléments flex d'un min-width égale à width.
De même, si vous avez deux blocks en ligne (flex-direction ROW), veillez à ce que le conteneur de ces deux blocs soient suffisamment grand pour les contenir tous les deux lorsqu'ils atteignent leur taille minimale.

[Invité]

Exemple :

https://jsfiddle.net/Maels1991/y6qqh3v7/