3 petits problèmes CSS

4 octobre 2017 à 19:48:12

Bonjour,

Etant en train de réaliser un petit projet de cours (qui consiste à créer une page web only html de 10 pages max). Je rencontre quelques petits soucis sur le CSS.

Je vous donne tout d'abord le test.html et styletest.css (qui ne sont pas mes pages web juste pour que vous voyez le problème)

test.css

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="styletest.css">
	</head>

	<body>
		<div id="menu">
			<p>test</p> 
			<p>test</p> 
			<p>test</p> 
			<p>test</p> 
			<p>test</p> 
			<p>test</p> 

		</div>
		
		<div id="contenu">
			<p>ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,ceci est du contenu,</p>
		</div>
	</body>
</html>

styletest.css

#menu {
	background-color:silver;
	width:15%;
  	height:100%;
    	float:left;
	border-radius:5px;
	/* border-style:double;
	border-width:0.5px; */

}

#contenu {
    background-color:yellow;
    width:85%;
    height:100%;
    float:right;
    border-radius:5px;
    /* border-style:double;
    border-width:0.5px; */
}

1) Comme vous le voyez (on ne s'occupe pas des lignes mises en commentaire pour l'instant, c'est le troisième problème), je veux que mes divs fassent un height de 100%. Mais le problème, c'est que je veux que ça fasse 100% de la page, or ici, ça s'arrête à l'endroit où il n'y a plus de texte.

Je vous mets une petite image du problème en cas où vous avez pas le temps de tester

Avez vous une petite idée de faire en sorte que ça fasse toute la page ?

2) Ensuite pour le second problème, si vous faites le test avec mes codes, vous voyez que les div sont très collées entre elles, il y a t'il un moyen de décaler un peu la div "contenu" pour éviter qu'elles se collent ?

Cf: image du dessus qui montre aussi que c'est collé

3) Enfin, je pense que si le problème ci-dessus est résolu, le problème suivant le sera automatiquement. Mais comme vous l'apercevez en "décommentant" les lignes css, lorsque je mets une bordure sur la div "menu", la div"contenu ne reste pas à droite, mais descend (car manque de place)

Encore une petite image :

Une solution à tous ces petits problèmes ?

Merci d'avance pour votre aide et bonne soirée / journée

-
Edité par Wanheda 4 octobre 2017 à 19:57:34

Anonyme

4 octobre 2017 à 20:03:14

Hello,

1) pour donner une taille à un block, faut avoir donné préalablement une taille au block parent. Ici body et son parent html. Donc html, body{height:100%;}

2) utilises les marges extérieures (margin) sur ton menu ou ton contenu ou les deux pour avoir le rendu désiré. Par exemple #menu{margin-right:20px;}

3) pareil qu'au numéro 2

Wanheda

4 octobre 2017 à 21:02:25

Merci pour le premier c'est résolu (c'était tout bête en fait)

Mais pour les margin ça ne marche pas, si je fais margin-right sur le "contenu", il part à gauche donc passe en dessous de "menu", mais lorsque je fais margin-left, il ne se décale pas du tout

Anonyme

4 octobre 2017 à 22:35:03

De base avec ton code si tu ajoutes "border-sizing:border-box" à "menu" et "contenu" tu ne devrais plus avoir "contenu" qui passe en dessous.

Sinon changes la largeur de ton contenu: < que 85%.

Je te conseil de voir comment positionner les blocs avec flexbox ou grid plutôt que float C'est plus pratique.

Wanheda

4 octobre 2017 à 22:58:21

J'ai essayé avec border sizing j'ai toujours le problème. Je vais voir le reste demain

Edit: Problème résolu en mettant <85%. En fait c'était tout bête il suffisait que je mette le body en 100% et manipuler un peu pour que ça marche. En voulant chercher dans le compliqué, finalement, c'était plutôt facile ...

Merci

Edit 2 : En fait pour le premier c'est pas résolu. En faisant le body et html à 100% sur mon vrai site, au bout d'un moment quand on scroll la page vers le bas, le "menu" s'arrête, donc ne descend pas tout en bas. Pareil en sur le "contenu", qui au bout d'un moment lorsque je mets le border-style, ça ne descend pas tout en bas

-
Edité par Wanheda 5 octobre 2017 à 16:03:00

Wanheda

7 octobre 2017 à 10:10:58

Un moment ça sort comme ça

Wanheda

8 octobre 2017 à 19:19:21

Bon ben apparement je n'aurai pas la solution

Quand je mets seulement body en height 100% ou seulement html en height 100%, la div "contenu" fait 100% de la page mais pas la div "menu" qui elle s'arrête après le dernier texte.

Quand je mets body ET html en height 100%, ca fait comme le screen au dessus

Mewen_bzh

10 octobre 2017 à 15:51:55

Au vu de ton problème, je te conseille de regarder les unités css telles que vh et vw qui sont relatives à la taille du viewport (vh pour "viewport height" et vw pour "viewport width"). 100vh par exemple donne une hauteur de 100% de la taille du viewport.

Sachant cela, à toi de vérifier si cette solution te convient notamment en prenant soin de vérifier la compatibilité sur les différents navigateurs (https://caniuse.com/#search=vh) et supports (notamment mobiles).

Je ne réponds pas aux messages privés.