Discussion :

[PaulineGjm]

Bonjour,

J'ai une question peut être toute bête mais je voudrais mettre une div qui remplie la fenêtre de navigation. J'utilise le 100% du coup mais j'ai comme résultat une div qui dépasse la fenêtre et du coup j'ai des ascenseurs...

Vous pouvez voir par vous même à cette adresse : http://paulinemartel.franceserv.com/

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
body {
	margin:0 0 0 0;
	min-height: 100%;
	/*width:100%;*/
}
 
html
{
	height:100%;
}
 
#accueil
{
	background-color:#536D84;
	color:white;
	height:100%;
	width:100%;
	font-family:arial;
	font-size:36;
	padding:30% 30% 30% 30%;
 
}

La div qui doit prendre toute la place est donc #accueil.

Vous pouvez m'aider ?

Bonne journée.

[Torgar]

Salut,

Deux possibilités :

- utiliser la propriété box-sizing : http://paulund.developpez.com/tutoriels/css/box-sizing/
- adapter la largeur en prenant en compte les padding de 30%, donc width : 40%

Tout dépend du niveau de compatibilité que tu souhaites avoir.

Tu peux simplifier les margin et padding aussi :

Code :

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

1
2
margin: 0;
padding: 30%;

[PaulineGjm]

Ah merci c'est les paddings, je pensais que c'était par rapport à la div elle même et en fait non... Merci

Façon l'utilisation du padding doit pas être terrible, je voudrais que le texte soit centré horizontalement et verticalement, tu as une idée comment faire ? J'ai essayé avec vertical-align:middle mais soit c'est pas ça, soit je l'utilise mal

[Torgar]

Pour le centrage horizontal :
- text-align: center si ton élément est de type inline.
- margin: 0 auto si c'est de type block.

Pour le centrage vertical :
- vertical-align: middle si ton élément est une cellule de tableau ou si l'élément est de type inline-block. vertical-align
- si tu n'as qu'une ligne et qu'il s'agit d'un élément de type block : height et line-height à la même valeur. Ça fera un centrage vertical automatique.

[PaulineGjm]

J'ai tout essayé, j'arrive pas à le centrer verticalement... Je mets en display:inline-block pour utiliser vertical-align:middle mais ça fait rien :/

[Torgar]

Montre ton code généré s'il te plait.