Problème de placement de <html> et <body>

Les balises ne prennent pas toute la place qu'il faudrait

1 juillet 2020 à 15:26:01

Bonjour,

je rencontre actuellement un problème avec mon html ainsi que son style.

Le HTML ne va pas jusqu'au bout !

Je pense que le screen shoot explique bien la situation. J'ai exposé mon problème à une communauté de dev sur Discord et m'ont dit de faire un fichier CSS de reset :

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Ils m'ont aussi dit de modifier dans le body (j'ai rajouté le html) la taille qu'il prenait :

body, html{
height: 100vh;
}

Le problème est résolu. Maintenant je me retrouve face à un autre problème :

Le footer se trouve trop bas et cela peu importe la page de mon site ...

Le problème viendrait-il du fichier reset ? Car je dois avouer que cela est nouveau pour moi, je ne connaissais pas avant et je me demande si je ne dois pas apprendre à coder différemment par rapport à ce fichier ...

Merci d'avance à ceux qui me répondront.

Cordialement.

FloJDM

1 juillet 2020 à 15:55:25

Salut,

Pourrais-tu également nous partager ton fichier HTML ?

A première vu, ce serait la taille de 100vh que tu donnes à ton body et html pour moi le problème.

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

AtyZeph

1 juillet 2020 à 16:58:12

FloJDM a écrit:

Salut,

Pourrais-tu également nous partager ton fichier HTML ?

A première vu, ce serait la taille de 100vh que tu donnes à ton body et html pour moi le problème.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!--"reset.css" before other styles-->
	<link rel="stylesheet" type="text/css" href="reset.css">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<title>WhiteDemonS - Connexion</title>
</head>
<body>

<nav class="nav_bar">
	<ul>
		<li class="box"><a class="btn" href="Index.html">Accueil</a></li>
		<li class="box"><a class="btn" href="Connexion.html">Connexion</a></li>
		<li class="box"><a class="btn" href="Forum.html">Forum</a></li>
		<li class="box"><a class="btn" href="Inscription.html">Inscription</a></li>
	</ul>
</nav>
<h1>Page de connexion</h1>

<div class="form">
	<form name="logs" action="" method="post">
		<p>Entrez votre nom d'utilisateur :</p>
		<input type="text" name="Pseudo">
		<p>Entrez votre mot de passe :</p>
		<input type="password" name="Password">
		<button class="submit" type="submit">Connexion</button>

		<a href="Recup_mdp.html">Récupérer mon mot de passe</a>
	</form>
	
</div>
<footer>
	<nav class="social">
		<ul class="logo">
			<li><a class="discord" href=""></a><img src="" alt="logo_discord"></li>
			<li><a class="twitter" href=""></a><img src="" alt="logo_twitter"></li>
			<li><a class="twitch" href=""></a><img src="" alt="logo_twitch"></li>
			<li><a class="instagram" href=""></a><img src="" alt="logo_instagram"></li>
			<li><a class="facebook" href=""></a><img src="" alt="logo_facebook"></li>
			<li><a class="youtube" href=""></a><img src="" alt="logo_youtube"></li>
		</ul>
	</nav>
</footer>

</body>
</html>

FloJDM

1 juillet 2020 à 17:06:43

Tu as essayé ce que je t'ai dit ?

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

Lamecarlate

1 juillet 2020 à 17:08:49

Bonjour,

évite les resets. C'est sortir le bazooka pour tuer une mouche, vraiment. Ça a été conçu pour lisser les différences entre navigateurs, différences qui n'existent plus.

Ton besoin c'est de mettre un footer en bas de ta page ? Lis https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/ .

Pas d'aide concernant le code par MP, le forum est là pour ça :)

AtyZeph

1 juillet 2020 à 17:54:48

Lamecarlate a écrit:

Bonjour,

évite les resets. C'est sortir le bazooka pour tuer une mouche, vraiment. Ça a été conçu pour lisser les différences entre navigateurs, différences qui n'existent plus.

Ton besoin c'est de mettre un footer en bas de ta page ? Lis https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/ .

D'accord merci, je vais donc supprimer ce fichier

Edit :

Par contre ton lien ne correspond pas à ce que je souhaiterais faire ... Je voudrais que le footer soit en bas de la page sans pour autant avoir un scroller trop long

FloJDM a écrit:

Tu as essayé ce que je t'ai dit ?

Quoi donc ?

Je viens de bidouiller et j'ai remarqué qu'en mettant le body et le html à 24vh tout en retirant la marge de ma liste (dans le footer) j'obtenais ce que je voulais, mais ... C'est pas une façon de faire ça ... Si ?

-
Edité par AtyZeph 1 juillet 2020 à 18:11:12

Lamecarlate

1 juillet 2020 à 18:53:03

> Je voudrais que le footer soit en bas de la page sans pour autant avoir un scroller trop long

Mais c'est ce que propose pourtant le lien fourni… Ou alors je n'ai pas compris. Tu peux faire un (des) schéma de ce que tu attends, dans différentes configurations ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

AtyZeph

1 juillet 2020 à 20:44:16

Lamecarlate a écrit:

> Je voudrais que le footer soit en bas de la page sans pour autant avoir un scroller trop long

Mais c'est ce que propose pourtant le lien fourni… Ou alors je n'ai pas compris. Tu peux faire un (des) schéma de ce que tu attends, dans différentes configurations ?

Au temps pour moi, j'avais compris que le footer allait rester en bas de l'écran tout en étant détaché de la page ...

EmmanuelBeziat

1 juillet 2020 à 22:52:03

Edit: Je fus doublé !!

-
Edité par EmmanuelBeziat 2 juillet 2020 à 12:36:47

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Lamecarlate

2 juillet 2020 à 11:24:40

Déjà donné, Manu, pas besoin de faire ta pub toi-même, je m'en suis chargée

Pas d'aide concernant le code par MP, le forum est là pour ça :)

EmmanuelBeziat

2 juillet 2020 à 12:37:30

Ah ben mince, j'ai plussoyé ton message et je l'ai même pas vu. En fait en revenant sur le sujet, je viens même de voir trois posts que j'avais raté… Je sais pas si j'étais claqué ou quoi.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !