Redimensionnement page = chevauchement total

**Federico_muy_bien** · 28/05/2009, 11h06

Salut !!
Voila j'ai des pages XHTML valides (oua la classe !

) et du css.
Tout va bien sur mon ecran en plein ecran et là j'ai eu l'idée de redimensionner ma fenetre firefox ....

bim !!

Quelles sont les propriétés CSS que j'utilise (ou pas) qui empécherai le chevauchement de tous mes blocs ...

exemple de code XHTML :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- titre de la page en cours -->
	<title>ICeE - Insert experiment</title>
	<link rel="icon" type="image/png" href="../images/favicon.png" /><!-- pour les navigateurs standards -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="../html/style.css" />	
	<script  type="text/javaScript" src="../js/scripts.js" ></script>	
	<script type="text/javascript" src="../js/jquery-1.2.3.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.easing.min.js" ></script>
 
	<script type="text/javascript">
		$(document).ready(function(){
			$(".onglets a").hover(function() {
				$(this).next("em").animate({opacity: "show", top: "-90"}, "slow");
			}, function() {
				$(this).next("em").animate({opacity: "hide", top: "-105"}, "fast");
			});
		});
	</script>
</head>
 
<body>
 
	<!-- Ligne de la bannière -->
	<div id="banniere"></div>
 
	<!-- ligne des onglets -->
	<ul class="onglets">
 
		<li class="onglets">
			<a class="onglets" onclick="javascript:logout(); return false;" href="#">&nbsp;Logout</a>
			<em><img src="../images/lock.png" id="logout" height="25px" alt="#" /><br />Good Bye ...</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../php/home.php">&nbsp;Home</a>
			<em><img src="../images/home.png" id="home" height="25px" alt="#" /><br />Go to Home</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../php/insert_exp0.php">&nbsp;Add experiment</a>
			<em><img src="../images/add.png" id="add" height="25px" alt="#" /><br />Add an experiment</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../php/search.php">&nbsp;Search experiment</a>
			<em><img src="../images/search_loup.png" id="search_loup" height="25px" alt="#" /><br />Search an experiment</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../php/user_options.php">&nbsp;Settings</a>
			<em><img src="../images/Settings.png" id="Settings" height="25px" alt="#" /><br />Change your ICeE</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../php/credits.php">&nbsp;Credits</a>
			<em><img src="../images/credits.png" id="credits" height="25px" alt="#" /><br />About ICeE ...</em>
		</li>
 
		<li class="onglets">
			<a class="onglets" href="../about/ICeE_User_instruction_manual.pdf" target="_blank">&nbsp;Help</a>
			<em><img src="../images/help.png" id="help" height="25px" alt="#" /><br />Show the manual</em>
		</li>	
	</ul>
 
 
 
	<!-- Menu de gauche -->
	<div id='menu_gauche'>
		{lien}
	</div>
 
	<div id='corps_central'>
		<!-- Corps central de la page -->
		<br />
 
		<h2>Insert the experiment</h2>
 
		{erreur}
		<div class="data">
			.
                        .
			[BLABLA]
                        .
                        .
			<div class="boutons">
 
				<p style="margin:auto">
					If you want to insert this experiment in the ICeE database, press the button:
				</p>
 
				<br />
 
				<a href="../php/shortcut.php?page=10">
				<img src="../images/previous.png"
					onmouseover="this.src='../images/previoush.png'"
					onmouseout="this.src='../images/previous.png'" alt="#"
					title='Go to the previous step without saving' />
				</a>
 
				<input type='image' value="Save this step"
					onclick="self.location.href='../php/insert_exp8.php'"
					src='../images/save_exp.png'
					onmouseover="this.src='../images/save_exph.png'"
					onmouseout="this.src='../images/save_exp.png'"
					title='Insert this experiment in the database' alt="#" />
 
				<img src="../images/next.png" title='' alt="#" />
			</div>
		</div>
	</div>
</body>
</html>

Donc j'ai une banniere en haut puis une menu animé en JQuery puis une partie centrale qui contient un menu fixe à gauche et la partie a droite la partie où on insere les données ...

bout de code CSS :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
 
/*==============================================
==================== Body ======================
================================================*/
 
body {
	background: url(../images/back_icee2.png);
	background-repeat : repeat-x ;
	font-family: arial, verdana, sans-serif ;
	padding : 0;
	margin : 0 ;
	text-align : center;
 
}
 
/*==============================================
============= ul a et li de la barre d'onglets ==========
================================================*/
ul.onglets{
	/*position: absolute;*/
	margin:0px 0px 5px 0px  ;
	padding: 5px 0px 0px 0px;
	list-style-type: none;
	width : 100% ;
	height : 31px ;
	background-image : url(../images/nav_bar.jpg);
	background-repeat : repeat-x ;
}
 
li.onglets{
	width:170px;
	height:31px;
	position: relative;
	float:left;
	color:#FFF;
	/*overflow:hidden;*/
	margin : 0px 0px 0px 10px ;
	vertical-align : middle ;
}
 
a.onglets{
	color:#FFF;
	text-decoration: none;
	border:0;
}
 
.onglets li em {
	background: url(../images/hover.png) no-repeat;
	width: 180px;
	height: 70px;
	position: absolute;
	top: -105px;
	left: -20px;
	text-align: center;
	padding: 10px 12px 10px;
	z-index: 2;
	color : #000 ;
	display: none;
	border : 0 ;
}
 
 
/*==============================================
==================== <div> ======================
================================================*/
 
div#banniere {
	background-image : url(../images/banniere1.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 109px;
	padding: 0;
	margin : 0 ;
	text-align : right ;
}
 
/*contenu*/
div.content{
	width : 800px ;
	border: 5px solid #339999;
	border-radius: 5px 5px; 
	-moz-border-radius: 5px;
	display:block;
	margin : auto ;	
	padding : 30px 0px 0px 0px ;
	background-image : url(../images/index_04.jpg);
}
 
div#footer {
	text-align : center ;
	width: 500px;
	height: 44px;
	padding : 50px 0px 0px 0px ;
	margin : auto ;							
}
 
div#central{
	float : left ;
}
 
div#menu_gauche {
	position : relative ;
	float : left ;
	border : groove 2px #FFF ;
	text-align : center ;
	width: 180px ;
	margin : 0  ;
	padding : 5px ;
	height : 600px ;
	background-color : #77a6b6;
	top : -9px ;
}
 
div#lien{
	border : groove 0px #25FDE9 ;
	border-collapse : collapse;
	width: 100% ;
	padding : 5px;
}
 
div.data{
	padding: 10px;
	margin : 10px auto ;
	text-align: left ;
	width : 800px ;
	border : 1px solid ;
	/*background-image : url(../images/index_04.jpg);
	background-repeat: repeat;*/
}
 
div.boutons{
	margin : 0px 0px 0px 270px ;
}
 
 
/*==============================================
==================== div erreur =================
================================================*/
#info{
	border: 1px solid;
	margin: auto ;
	padding: 15px 5px 15px 20px ;
	position:relative;
	color: #00529B;
	background-color: #BDE5F8;
	width : 700px ;
}
 
/*==============================================
==================== formulaire ==================
================================================*/
 
div.data label{
	font-weight: bold;
	display: inline;
	float: left;
	width: 200px;
	text-align : right ;
	margin : 0px 10px 0px 0px ;
}
 
/*==============================================
==================== <H> ======================
================================================*/
 
h2 {
	text-align : center ;
}
 
/*==============================================
==================== <p> ========================
================================================*/
 
p.small{
	font-size : 8px ;
	margin : auto ;
}

Je pense avoir abusé des positions absolute, relative et float sans savoir exactement comment ça va rendre ...
Du coup en passant à une résolution plus petite je pense que j'aurais aussi des surprises ...

Comment le rendre plus portable et plus souple ??

EDIT : J'ajoute les images du rendu dans les deux cas :

Tout beau :

Tout laid :

**desert** · 28/05/2009, 16h40

Bonjour,
7 onglets x 170px de largeur chacun = 1190px d'espace à occuper (sans compter les margin ou padding).
Si tu veux conserver une largeur variable pour le menu (width: 100%), tu vas devoir retirer sur les 170px afin que le menu tienne au moins sur une résolution de 1024x768.
Sinon, tu fixes la largeur du menu en utilisant le px comme unité au risque d'avoir un scrollbar horizontal pour ceux qui ne disposent pas d'une résolution égale ou supérieure à la tienne.

**Federico_muy_bien** · 08/06/2009, 08h49

Salut desert ...
c'est vrai que etant débutant mes pages et interfaces sont trés peu souvent sorties de mon écran ... et c'est mon vrai probléme j'ai un 17' !!

J'ai peur qu'une résolution plus petite n'engendre pas une scroll horizontal mais plutot un passage a la ligne des onglets comme dans la 2eme photo

Je vais donc reduire la taille des onglets dans un premier temps mais quel attribut CSS je dois enlever ou ajouter à mes LI ou UL pour avoir un scroll horizontal, ce qui serait déja mieux qu'un passage à la ligne ?

Merci a toi !!

**desert** · 08/06/2009, 17h44

Envoyé par Federico_muy_bien

quel attribut CSS je dois enlever ou ajouter à mes LI ou UL pour avoir un scroll horizontal, ce qui serait déja mieux qu'un passage à la ligne ?

Tu dois changer le 100% de la propriété width de ta balise ul.onglets par une valeur fixe (en px donc).

Code css :

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

1
2
3
4
ul.onglets {
   width: ****px; /* Il faudra calculer la largeur totale */
   ...
}

**Federico_muy_bien** · 11/06/2009, 11h39

Salut ...

j'ai fixé la taille de mes onglets (li) à 130px maintenant.

Mais ce que je veux c'est que la barre (ul) prenne toute la place (100%).
Donc si je veux la fixer en px alors il faut que j'ai acces à la résolution de l'écran de l'utilisateur ?? Ca devient trop compliqué.

Et il n'y a pas une solution pour juste que si la page est redimenssionée les onglets (li) ne passent pas à la ligne mais juste subisent le redimensionnement et disparaissent a droite ... ? Comme la barre d'onglets générale de Developpez.net ???

**lifty** · 11/06/2009, 12h08

tu peut soit fixer une taille minimum avec les attributs css min-height et min-width (attention au crossbrowser) comme ça lors du redimensionnement tes onglets disparaissent (mais inevitablement un scroll apparait

).
Où comme tu le disais récuperer la taille de ton écran. Tu as le javaScript qui fait ça avec :

Code js :

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

1
2
screen.width;
screen.height;

**Federico_muy_bien** · 16/06/2009, 11h17

Merci a toi lifty !!

Je pensais qu'un css il y aurait une solution. Si il faut passer par du javascript ça devient trop compliqué ... Merci a toi

**12monkeys** · 22/06/2009, 20h31

Bonsoir

Envoyé par Federico_muy_bien

Et il n'y a pas une solution pour juste que si la page est redimenssionée les onglets (li) ne passent pas à la ligne mais juste subisent le redimensionnement et disparaissent a droite ... ? Comme la barre d'onglets générale de Developpez.net ???

Tu peut indiquer une largeur min-width au ul.

Après avoir atteint cette largeur minimale la barre ne se réduit plus et disparait à droite avec apparition d'une barre de scroll.

IE 6 ne comprends pas min-width, il faudra une alternative en javascript...

Redimensionnement page = chevauchement total [CSS 2]

Dimensionnement en CSS

Discussions similaires

Partager

Partager