5568 sujets

Sémantique web et HTML

Enlever le blanc en pas de page

Bonjour, je n'arrive pas à enlever un grand espace blanc qui se trouve en bas de ma page.
Ici le code html :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>Lunarya</title>
    </head>
    <body>	
		</p><a class="Titre_haut_de_page" href="Site.html">
				   ?      ?      ?      ?      ?      ?      ?      ?     ?      ?      ?      ?      ?      ?      ?      ?      ?       ?   Lunarya   ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?      ?   
		</a></p>
		<a href="Site.html"><img class="logo" src="logo.png" alt="Logo" height="108" width="130" /><a/>
		<a href="Site.html"><img class="logocopy" src="logo.png" alt="Logo" height="108" width="130" /><a/>
		<div class="nav">
			<ul class="menu1">
				<li class="acceuil"><a href="acceuil.html">Acceuil</a></li>
				<li class="rejoindre"><a class="active" href="nous_rejoindre.html">Nous Rejoindre</a></li>
				<li class="forum"><a href="forum.html">Forum</a></li>
				<li class="team"><a href="team.html">Team</a></li>
				<li class="contact"style="float:right"><a href="contact.html">Contact</a></li>
			</ul>
		</div>
		
		<p><center> <a class="intro">
			Découvrez un nouveau monde qui privilégie l'intéraction aux armes, une carte perfectionée,</br>
			de nouveaux métiers, une police beaucoup plus stricte et deux fois plus de fun. Créez votre</br>
			personnage en y ajoutant votre touche de personalité et partagez de bons moments avec la communauté.
		</center></a></p>
		
		<hr class="ligne1" width="90%" size="4" color="black">
		<hr class="ligne2" width="90%" size="1" color="black">
		<hr class="ligne3" width="90%" size="1" color="black">
		<hr class="ligne4" width="90%" size="1" color="black">
		<hr class="ligne5" width="90%" size="4" color="black">
		
		<p><center><a class="intro2">
			Un staff à l'écoute, un serveur performant et une communauté unique !
		</p></center></a>
		
		<img class="maj_icon" src="maj_icon.png" alt="maj_icon"/>
		<p><a class="title_maj_icon">
			Mise à jours
		</a></p>
		<p><a class="text_maj_icon"><center>
			Des développeurs qui travaillent pour</br>
			pouvoir perfectionner le serveur avec</br>
			de nombreuses mise à jours, pour vous</br>
			proposer du nouveau contenu régulièrement.
		</a></p></center>
		
		<img class="avatar_icon" src="avatar_icon.png" alt="avatar_icon"/>
		<p><a class="title_avatar_icon">
			Staff
		</a></p>
				<p><a class="text_avatar_icon"><center>
			Un staff qui est toujours prêt à vous</br>
			écoutés, que ce soit en jeu, sur le </br>
			TeamSpeak ou sur le forum.</br>
		</a></p></center>
		
		<img class="ts_icon" src="ts_icon.png" alt="ts_icon"/>
		<p><a class="title_ts_icon">
			TeamSpeak
		</a></p>
				<p><a class="text_ts_icon"><center>
			Nous avons un TeamSpeak obligatoire</br>
			pour vous, avec assez de place pour</br>
			tout le monde et des channels adaptés.</br>
		</a></p></center>
		
		<img class="metier_icon" src="metier_icon.png" alt="metier_icon"/>
		<p><a class="title_metier_icon">
			Métiers
		</a></p>
				<p><a class="text_metier_icon"><center>
			Vous allez pouvoir avoir un salaire</br>
			en travaillant, que ce soit dans le</br>
			légal ou l'illégal. Vous pourrez aussi</br>
			travailler pour des entreprises locales</br>
			ou même en créer une vous même !</br>
		</a></p></center>
		
		<img class="money_icon" src="money_icon.png" alt="money_icon"/>
		<p><a class="title_metier_icon">
			Bourse
		</a></p>
				<p><a class="text_metier_icon"><center>
			Les ressources ont été adaptées afin</br>
			que chaque métiers soient rentables en</br>
			fonction du chemin parcouru, sauf pour</br>
			les ressouces illégales car l'utilisateur</br>
			prend beaucoup plus de risque.</br>
		</a></p></center>
		
		<img class="game_icon" src="game_icon.png" alt="game_icon"/>
		<p><a class="title_game_icon">
			Serveur
		</a></p>
				<p><a class="text_game_icon"><center>
			Vous serez le futur du serveur car se </br>
			sara vous qui construirez l'avenir, vous</br>
			aurez votre propre personalité et passions,</br>
			vous allez faire vos preuves dans la ville.</br>
			Vous irez même voter pour élir un maire.</br>
		</a></p></center>
	</body>
</html>

Ici le code css :
@font-face 
{
font-family: "police_gta";
src: url("police_gta.ttf");
}
@font-face 
{
font-family: "bebas_neue";
src: url("bebas_neue.otf");
}
@font-face 
{
font-family: "police_noodle";
src: url("police_noodle.ttf");
}
@font-face 
{
font-family: "police_gravity";
src: url("police_gravity.otf");
}


.Titre_haut_de_page
{
	font-family: "bebas_neue";
	font-size: 100px;
	letter-spacing : 8px;
	position: relative;
	left: 50px;
	color: White;
	text-decoration:none;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 10px;
	text-shadow: #000000 3px 3px, #000000 -3px 3px, #000000 -3px -3px, #000000 3px -3px;
}

.logo
{
	position: relative;
	left : 100px;
	bottom: 130px;
	border-radius: 10px;
}

.logocopy
{
	position: relative;
	left : 900px;
	bottom: 130px;
	border-radius: 10px;
}

.nav ul {
	list-style: none;
	background-color: rgb(160,9,9);
	text-align: none;
	padding: 0;
	margin: 0;
	border-radius : 10px;
	width: 93%;
	position: absolute;
	right: 3%;
	top: 250px;
}
.nav li {
  font-family: "police_noodle" ;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
  text-align: center;
}
 
.nav a:hover {
  background-color: #670E0E;
  text-decoration: underline;
  ;
}
 

 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

.intro
{
	font-family: Arial;
	position: relative;
	bottom: 130px;
	left: 0px;
	font-size: 22px;
	color: Black;
}

body
{
	background-color:#F1F1F1;
}

.intro2
{
	font-family: "bebas_neue";
	position: relative;
	bottom:15px;
	font-size: 30px;
	letter-spacing:4px;
	color: Black;
}

.maj_icon
{
	width:60px;
	height:55px;
	position: relative;
	left: 160px;
	top: 50px;
}

.text_maj_icon
{
	position: relative;
	left: -290px;
	top:-20px;
	font-size: 20px;
	font-family: Arial;
}

.title_maj_icon
{
	position: relative;
	left: 250px;
	top:-25px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.avatar_icon
{
	width:75px;
	height:70px;
	position: relative;
	left: 790px;
	top: -215px;
}

.title_avatar_icon
{
	position: relative;
	left: 880px;
	top:-290px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.text_avatar_icon
{
	position: relative;
	left: 290px;
	top:-290px;
	font-size: 20px;
	font-family: Arial;
}
.ts_icon
{
	width:75px;
	height:70px;
	position: relative;
	left: 790px;
	top: -215px;
}

.title_ts_icon
{
	position: relative;
	left: 880px;
	top:-290px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.text_ts_icon
{
	position: relative;
	left: 290px;
	top:-275px;
	font-size: 20px;
	font-family: Arial;
}

.metier_icon
{
	width:75px;
	height:70px;
	position: relative;
	left: 150px;
	top: -461px;
}

.title_metier_icon
{
	position: relative;
	left: 260px;
	top:-536px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.text_metier_icon
{
	position: relative;
	left: -315px;
	top:-536px;
	font-size: 20px;
	font-family: Arial;
}
.metier_icon
{
	width:75px;
	height:70px;
	position: relative;
	left: 150px;
	top: -461px;
}

.title_metier_icon
{
	position: relative;
	left: 260px;
	top:-536px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.text_metier_icon
{
	position: relative;
	left: -315px;
	top:-536px;
	font-size: 20px;
	font-family: Arial;
}
.money_icon
{
	width:80px;
	height:80px;
	position: relative;
	left: 160px;
	top: -450px;
}

.title_money_icon
{
	position: relative;
	left: 260px;
	top:-536px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.text_money_icon
{
	position: relative;
	left: -315px;
	top:-536px;
	font-size: 20px;
	font-family: Arial;
}

.game_icon
{
	width:75px;
	height:70px;
	position: relative;
	left: 790px;
	top: -750px;
}

.title_game_icon
{
	position: relative;
	left: 890px;
	top:-828px;
	font-size: 50px;
	color: White;
	font-family: "police_noodle";
	word-spacing:5px;
	letter-spacing:2px;
	text-decoration: underline;
	border-style: solid;
	border-color: rgb(160,9,9);
	background-color: rgb(160,9,9);
	border-radius : 5px;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
	}
	
.text_game_icon
{
	position: relative;
	left: 300px;
	top:-828px;
	font-size: 20px;
	font-family: Arial;
}
.ligne1
{
	position: relative;
	top: 130px;
}
.ligne2
{
	position: relative;
	top: 365px;
}
.ligne3
{
	position: relative;
	top: 630px;
}
.ligne4
{
	position: relative;
	top: 950px;
}
.ligne5
{
	position: relative;
	top:-50px;
}
#body
{
	overflow:hidden;
}

Merci de m'aider Smiley biggrin
Modérateur
Bonjour,

Désolé de vous le dire mais il va y avoir du ménage à faire ! Smiley biggrin

Premièrement il va falloir nettoyer le HTML car il est très mal construit. Juste un exemple : la première balise que l'on trouve dans le body est un </p>. Commencer par la fermeture d'une balise ça ne laisse rien présager de bon.
A défaut de savoir par ou partir tu peux utiliser des petits outils. Par exemple ici j'ai juste collé le code dans un jsFiddle, il surligne en rouge toutes les erreurs de syntaxe du code : https://jsfiddle.net/07d1gL6j/
Il faut nettoyer tout ça avant d'aller plus loin.

Ensuite il faudra revoir le positionnement en CSS. La aussi il y a beaucoup de taff car tu positionne tout en décalant les bloc grâce à des "left: -315px; top: -536px;". C'est vraiment pas la bonne façon de faire et c'est ce qui crée ces gros espaces blancs. En gros tout les éléments se placent naturellement et toi tu les bouges après coup (mais l'espace qu'ils occupaient reste). Il faut reprendre tout ça et préférer au maximum le positionnement naturel des block.

Une fois le HTML propre et sans CSS, tes éléments se positionnent les un en dessous des autres naturellement. Il suffit de bien organiser ton HTML pour avoir le bon enchaînement d'éléments, puis d'utiliser le CSS pour faire des petits réglages de positionnement et surtout du style (aspect, couleur, effets etc).
Si tu as des soucis pour faire une truc en particulier reviens nous voir n'hésite pas mais la faut vraiment nettoyer d'abord Smiley cligne

Bonne journée et bon code
UPDATE : Désolé je n'avais pas vu qu'une autre réponse a était écrite pendant que je rédigais le miens.

Bonjour Smiley smile

Pour commencer c'est sympa ce que tu as fait.
Malheureusement il y a pas mal de soucis dans le code HTML (je n'ai pas encore regardé le CSS).

D'abord n'hésite pas à mettre le code dans un https://codepen.io/pen, si jamais c'est une page complète ou avec des html/css/js.

Ensuite on peut voir qu'il y a des gros soucis d'ouverture et de fermeture de balise. Tu commence comme ça dans ton site :
</p>
   <a class="Titre_haut_de_page" href="Site.html">
      ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Lunarya ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
   </a>
</p>


Tu peux voir par exemple que tu commence par fermer une balise "p" alors qu'elle devrait s'ouvrir.

Un petit peut plus loin :
<p>
   <center>
      <a class="intro">
         Découvrez un nouveau monde qui privilégie l'intéraction aux armes, une carte perfectionée,
         </br>
         de nouveaux métiers, une police beaucoup plus stricte et deux fois plus de fun. Créez votre
         </br>
         personnage en y ajoutant votre touche de personalité et partagez de bons moments avec la communauté.
      </center>
   </a>
</p>


Tu peux constater que tu ouvre et ferme bien tes balises. Mais tu tes trompé dans l'ordre de fermeture des balise, ce qui peux créer des gros soucis d'interprétation selon les navigateurs.

Ici également :
<p><center><a class="intro2">
			Un staff à l'écoute, un serveur performant et une communauté unique !
		</p></center></a>


Ici aussi et qui visiblement est copié plusieurs fois :
<p><a class="text_maj_icon"><center>
			Des développeurs qui travaillent pour</br>
			pouvoir perfectionner le serveur avec</br>
			de nombreuses mise à jours, pour vous</br>
			proposer du nouveau contenu régulièrement.
		</a></p></center>


On peut aussi souligner que la balise "center" n'est plus prise en compte par le standard HTML5. Il faut passer par les autres méthodes d'alignements, comme mettre un "margin:auto;" sur une "div" qui a une largeur moins grande que 100%.

Il y a aussi des soucis de positionnements à cause de float, de left, de position et de display qui n'ont pas les bonnes propriétés.

Je te redirige vers ce cours qui est vraiment très bien écris. Tu trouvera également toutes les solutions à tes questions :
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page
Modifié par Jconline (02 May 2017 - 12:09)
Merci pour les conseils Smiley lol , il est vrai que je débute et que c'est mon premier site que je code, mais c'est en ratant que l'on apprend de nos erreurs.
Je vais directement corriger toutes les erreurs de syntaxes et de placements.
Modérateur
MrToutSeul a écrit :
il est vrai que je débute et que c'est mon premier site que je code, mais c'est en ratant que l'on apprend de nos erreurs.

Tout à fait Smiley smile et on est tous passé par là ! Bon courage et n'hésite pas à venir poser des question si tu ne comprends pas certains trucs !
Sujet clos
Aller à