Div, placement en %

**Miistik** · 08/03/2014, 12h19

Bonjour,

Je me dirige vers vous car j'ai un petit souci.

J'ai l'impression que mon CSS n'agit pas.

Voici ma page html :

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
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>produits</title>
    <link rel="stylesheet" href="css/fichier.css" />
    <script src="js/jquery-1.7.min.js" type="text/javascript" ></script>
	<script src="js/produit.js" type="text/javascript" ></script>
  </head>
  <body>
	<div id="page">
		<div id="header">
			<div id="bandeau">
				<h1> ROBOTWITHME </h1>
			</div>
				<div id="menu">  
					<ul>  
						<li> <a href= "about_us.html"> about us 		</a> </li> 
						<li> <a href= "produits.html"> products 		</a> </li> 
						<li> <a href= "inscription.html"> inscription 	</a> </li>
						<li> <a href= "connexion.html"> connexion 		</a> </li>   
					</ul>
				</div>
		</div>
	</div>
  </body>
 </html>

Et mon 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
html {
	height:100%;
}
 
/* Div après body  */
#page {
	min-height:100%;
	margin:0;
	padding:0;
}
 
/* Div Titre + Menu */
#header {
	height:30%;
	width:100%;
}

J'ai lu pas mal de tuto mais vous utilisez tous les tailles en px.
J'aimerai utiliser la relation de contenant pour être plus adaptable.

Dois-je spécifier dans mon id page une taille en px initiale en px et le reste en % ?

Bref, je comprends pas trop.

Merci à vous.

**Candygirl** · 08/03/2014, 13h12

Bonjour,

Tu devrais décrire plus précisément ton problème. Que veux-tu obtenir ? qu'est-ce qui ne fonctionne pas ? "mon CSS n'agit pas" est un peu vague...
Du bout de css que tu donnes on peut dire ceci:

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
html {
	height:100%;
}
 
/* Div après body  */
#page {
	min-height:100%; /* ne sera pas pris en compte à moins d'avoir mis un height de 100% sur le body */
	margin:0; /* ne sert à rien */
	padding:0; /* ne sert à rien */
}
 
/* Div Titre + Menu */
#header {
	height:30%; /* ne sera pas pris en compte puisque le parent #page n'a pas de height spécifiquement renseigné */
	width:100%;  /* ne sert à rien */
}

En général quand on débat de design fixe, fluide,... on disserte sur l'aspect horizontal.
D'après ton code, tu te préoccupes plutôt de la verticalité. En principe, on évite de définir des hauteurs pour les parties contenant du texte puisqu'on ne maîtrise pas l'espace nécessaire à son affichage (dépendante des préférences de l'utilisateur).

Essaie de détailler plus précisément ce que tu voudrais obtenir qu'on puisse mieux t'aider.

**Miistik** · 08/03/2014, 13h25

Bonjour,

Merci pour cette réponse.

Comme tu l'as indiqué, je me focalise pour l'instant sur l'aspect vertical.
J'essaye de fonctionner en étape.

J'essaye de faire un menu simple correctement affiché :

Texte centré : text-align:center;
Liste horizontale : li {display:inline;}
Header 30% de la page, bordure solid black 1px
Bandeau 10% bordure également, petite majuscule
Menu 20% bordure également
etc ..

**Miistik** · 17/03/2014, 17h32

Bon à défaut de maîtriser tout cela, j'ai utilisé des px.

Tant pis.

Div, placement en %

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager