Réduction fenêtre de navigation

**yanniks** · 26/02/2013, 09h38

Bonjour à tous,

Je viens de recommencer à créer un site internet ...

J'utilise les balises div pour organiser mon site. Voici l'extrait du css et de la page index.

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
body {
	margin:1% 10% 1% 10%;
	}
 
div {
	text-align:left;
	}
 
div#bandeau {
	width:100%;
	height:auto;
	background-color:#00CCFF;
		}
div#barremenu {
	width:100%;
	height:auto;
	background-color:#FF5555;
		}
div#menu {
	float:right;
	width:20%;
	height:auto;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:80%;
	height:auto;
	background-color:#FFCC00;
	}
div#pied_page {
	clear:both;
	width:100%;
	height:50px;
	background-color:#33FF99;
	}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
 
	<div id="bandeau">
<?php include("bandeau.php") ?>
	</div>
 
	<div id="barremenu">Ceci est la barre du menu
<?php include("menu.php") ?>
	</div>
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu</div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

Le soucis c'est que lorsque je réduis la taille de ma fenêtre de navigation , les éléments repartent à la ligne pour ne pas avoir d'ascenseur horizontal. mais ça fait quand même franchement moche. (cf image)

http://www.noelshack.com/2013-09-1361867880-pb-site.jpg

Merci de votre aide.

**Torgar** · 26/02/2013, 10h34

Salut,

Il nous faudrait le code source généré s'il te plait !

**yanniks** · 26/02/2013, 11h51

Voici le code source du bandeau .... (bandeau.php)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<img src="Images/logocrf.jpg"/>
<img src="Images/bandeau.jpg"/>
</body>
</html>

**Torgar** · 26/02/2013, 12h02

Il va falloir revoir les règles d'inclusions de page HTML. Il est interdit, sémantiquement parlant, de faire ce que tu fais !

Un docytype ne se déclare qu'une fois et doit être en premier dans un document HTML. Il est en est de même avec <body> et <html>, il ne faut pas les redéclarer dans un document que l'on inclus. Cela ne sert à rien et c'est faux. Pour la feuille de style CSS c'est pareil, autant l'ajouter dans l'en-tête du document hôte.

En l'état, ton document à inclure ne devrait comprendre que deux lignes :

Code :

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

1
2
<img src="Images/logocrf.jpg"/>
<img src="Images/bandeau.jpg"/>

De plus, il faut préciser un attribut alt="" pour chaque image, au cas où l'image ne soit disponible.

**yanniks** · 26/02/2013, 18h48

Salut,

Merci pour ton aide ça m'a permis de rendre mon code plus propre.

Mais cela ne change en rien mon problème initiale

**Bovino** · 26/02/2013, 21h04

Ce qu'il faut se dire, c'est que tu ne peux pas mettre sur une seule ligne plus d'éléments qu'il n'y a de place.
A toi donc de définir la largeur que tu estimes minimale pour ton site et de ne mettre que les éléments de navigation qui y entrent.
Ensuite, si l'utilisateur veut utiliser son navigateur en 640x480, tant pis pour lui si "ça devient moche"...

Réduction fenêtre de navigation

HTML

Vue hybride

Discussions similaires

Partager

Partager