28172 sujets

CSS et mise en forme, CSS3

Probleme de mise en page

Voici une ébauche de site pour un club de ma région, que j'aimerais présenter au Président dans quelque temps.
J’aimerais votre aide pour éclaircir quelque point sur lequel je bute.

Voici le code de la page HTML:



<!DOCTYPE html>
	<html lang="fr">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<link rel="icon" type="image/png" href="favicon.png" />
			<meta name="robots" content="noindex">
			<meta name="description" content="" />
			<!-- Pour Portable -->
				<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"/>
			<!-- Fin Pour Portable -->
			<title>test new1</title>
				<style type="text/css">
/* CSS */
		
	/* ---------------------------------------------------- */


	/* Format de la page web */
	
		body {	max-width: 900px;
min-width: 320px;

margin:10px auto; /*marge exterieur*/
				width:90%; /*Largeur de La zone contenant les DIVs*/
				background-color:#F7E1AF; /*Couleur du fond*/
				background-image:url("bkg.jpg");
			}


				
		* {	-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			}
				
	/* ---------------------------------------------------- */
	
	/* L'en-tête */
	
		#header {	background-color:transparent;
					}
					
		#header img {	border:3px solid #E6CD95; /*Forme et largeur de la bordure*/
						border-radius:40px; /*propriété CSS3 */
						}				
					
	/* ---------------------------------------------------- */
	
		/* La navigation */
		
		#nav {	width:90%;
				background-color:transparent; 
				margin:0 0 10px 0; /*marge exterieur*/
				padding:20px 0 0 0; /*marge interieur*/
				position:fixed;
				z-index:1;
				display: flex;
				justify-content: center;
				}
			
	/* ---------------------------------------------------- */	
					
	/* Acceuil */
	
	.acceuil {  width: 50px; height:100px; background-color:transparent;}
		.maison {  float:right; width:50px; height:70px; background-color:transparent; margin:40px 0 0 0; z-index:10;}
		.triangle { position:relative;	width:0; height:0; border-color:transparent transparent #808080 transparent; border-style:solid; border-width:23px; background-color:transparent; margin:0 0 0 1px; }
		.rectangle { position:absolute; width:44px; height:35px; border-color:black; border-style:solid; border-width:1px; background-color:#808080; margin:0 0 0 2px; }
		.porte { position:relative; width:10px; height:20px; border-color:black; border-style:solid; border-width:1px; background-color:#3c3c3c; margin:14px 0 0 25px; }
		.fenetre { position:relative; width:10px; height:10px; border-color:black; border-style:solid; border-width:1px; background-color: #3c3c3c; margin:-25px 0 0 8px; }
		.cheminee { position:relative; width:10px; height:20px; border-color:blue grey yellow red; border-style:solid; border-width:0; background-color:#808080; margin:-40px 0 0 30px;}			
				
	/* ---------------------------------------------------- */
	
	/* Fleche retour haut de page */
	
	.hautpage {  width:50px; height:100px; background-color:transparent;}	
		.retour { float:left; width:60px; height:70px; background-color:transparent; margin:20px 0 0 0; z-index:10; }
		.flechehaut { position:absolute; display:inline-block; width:0; height:0; border-color:transparent transparent #808080 transparent; border-style:solid; border-width:30px; background-color:transparent; margin:0 0 0 0; }
		.corpfleche { position:relative; display:inline-block; width:30px; height:40px; border-color:black; border-style:solid; border-width:0; background-color:#808080; margin:60px 0 0 15px ; }
		
	/* ---------------------------------------------------- */	

	/* Menu de Navigation */

	.menu { height:100px; background-color:transparent; margin:-20px 0 0 0; padding:10px 0 0 0;}

ul, li {font-size:14px; line-height:21px; text-align:left;}

#menu {
	list-style:none;
	width:640px; /*Joue sur la largeur de barre du menu*/
	height:43px;	
	margin:10px auto 0 auto;
	padding:0 70px; /* pour jouer sur espacement titre*/
	border-radius: 10px;
	background: #E6CD95;
	border: 1px solid #002232;
	box-shadow:inset 0 0 1px #edf9ff;	
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;border:none;
}

#menu li:hover {border: 1px solid #777777;padding: 4px 9px 4px 9px;	background: #F4F4F4; border-radius: 5px 5px 0 0; }

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; 
	color: #1A1A1A;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;/*Donne un effet sur le texte*/
}

#menu li:hover a {color:#161616;text-shadow: 1px 1px 1px #ffffff;}

	/* ---------------------------------------------------- */

.col_1 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #002232;
	border-top:none;
	background:#F4EDDB;
	border-radius: 0 5px 5px 5px;
}

.col_1 {width: 580px;} /*Joue sur la largeur du sous menu*/
.col_10 {width:480px;}
.col_100 {width:150px;}
.col_100 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}
#menu li:hover .col_1 {left:-80px;top:auto;} /*Joue sur le decalage du sous Menu*/

	/* ---------------------------------------------------- */

.col_2 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #002232;
	border-top:none;
	background:#F4EDDB;
	border-radius: 5px 5px 5px 5px;
}
	
.col_2 {width: 480px;}	
.col_20 {width:480px;}
.col_200 {width:150px;}
.col_200 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}
#menu li:hover .col_2 {left:-80px;top:auto;}


	/* ---------------------------------------------------- */
		
.col_3 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #002232;
	border-top:none;
	background:#F4EDDB;
	border-radius: 5px 5px 5px 5px;
}
	
.col_3 {width: 480px;}	
.col_30 {width:480px;}
.col_300 {width:150px;}
.col_300 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}
#menu li:hover .col_3 {left:-270px;top:auto;}
		
	/* ---------------------------------------------------- */

.col_4 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #002232;
	border-top:none;
	background:#F4EDDB;
	border-radius: 5px 5px 5px 5px;
}
	
.col_4 {width: 680px;}	
.col_40 {width:680px;}
.col_400 {width:150px;}
.col_400 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}
#menu li:hover .col_4 {left:-455px;top:auto;}
	/* ---------------------------------------------------- */

#menu li:hover .align_right {left:auto; top:auto;}
#menu h2 {font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px;border-bottom:1px solid #666666;}
#menu h3 {font-size:14px; margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888888;}
#menu li:hover div a {font-size:12px; color:#0000FF;}
#menu li:hover div a:hover { color:#FF0000;}

	/* ---------------------------------------------------- */

#menu li ul li {font-size:12px;	line-height:24px;position:relative;	text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0 0 0 -40px; float:none; text-align:left;width:150px;}
#menu li ul li:hover {background:none;border:none;padding:0;margin:0 0 0 -40px;}

	/* ---------------------------------------------------- */				
					
	/* ---------------------------------------------------- */
	

	/* Le corps de page */
		#corps {	width:100%;
					position:relative;					
					}
					
	/* ---------------------------------------------------- */

	/* Le corps de texte */
		#contenu {	width: 100%; /*Taille de la DIV contenant le texte*/
					background-color:transparent; /*Couleur du fond*/
					border:3px solid #E6CD95; /*Forme et largeur de la bordure*/
					border-radius:50px; /*Forme des Angles de la DIV*/					
					margin:165px 0 0 0; /*marge exterieur*/
					padding:0 0 0 20px; /*marge interieur*/
					background-image:url("FormatFactoryFeuillePC.png");
					background-size:100% auto;
					}
					
					#hrtitre hr { color:grey; height:3px; width:55%; margin:0 auto; box-shadow:8px 6px 9px #7F7F7F;}
					#h1titre { text-shadow:0 0 9px #000; color:#1A1A1A; width:390px; margin:0 auto; 
					}
					
					hr { color:grey; height:3px; width:85%; margin:0 auto; box-shadow:8px 6px 9px #7F7F7F; 
					}
					
					a img {	border: none; }
					
					img.fullwidth { width:100%; }

					h1 { margin-left:30px; line-height:30px; } 					
					p {	padding-left:40px; font-size:20px ; line-height:30px; }
					
	/* ---------------------------------------------------- */
	
	/* Pied de page */
	
	#footer {	width:100%;/*Largeur de la DIV*/
				height:250px;/*Hauteur de la DIV*/
				background-color:transparent;/*Couleur du fond*/	
				display: flex;
				justify-content: center;			
				}
				
				.footer {	width:450px;/*Largeur de la DIV*/
							background-color:transparent;/*Couleur du fond*/
							text-shadow:0 0 9px #000; color:#1A1A1A; 
							}
				
	/* ---------------------------------------------------- */
	
	/* ecusson validation CSS */
	
	#validator1 {	width:150px;/*Largeur de la DIV*/
					height:250px;/*Hauteur de la DIV*/
					background-color:transparent;/*Couleur du fond*/				
					margin:auto 0; /*marge exterieur*/
					padding:105px 0 0 0; /*marge interieur*/
					}
					
	#validator1 img.adaptwidth { width:120%; }					
					
	/* ---------------------------------------------------- */
	
	#validator2 {	width:150px;/*Largeur de la DIV*/
					height:250px;/*Hauteur de la DIV*/
					background-color:transparent;/*Couleur du fond*/
					margin:auto 0; /*marge exterieur*/
					padding:85px 0 0 0; /*marge interieur*/
					}
					
	#validator2 img.adaptwidth { width:100%; }					

	/* ---------------------------------------------------- */



	/* ---------------------------------------------------- */

/* fIN CSS */						
				</style>
		</head>
	<body id="hautpage">	

<!-- Mon Header-->
<div id="header">
	<span>
		<img class="fullwidth" src="homme.png" alt="Evolution%20de%20l'homme" title="Evolution%20de%20l'homme"/> 
	</span>
</div>
<!-- Fin de Mon Header-->

<!-- Ma Nav -->
<div id="nav">	

<!-- acceuil-->
<div class="acceuil">
<a href="#acceuil" class="">
	<div class="maison">
		<div class="triangle"></div>
		<div class="rectangle"></div>
		<div class="porte"></div>
		<div class="fenetre"></div>
		<div class="cheminee"></div>
	</div>
</a>
</div>
<!-- Fin acceuil-->

<!-- Mon MENU -->
<div class="menu">
	<div id="hrtitre">
		<hr />
		<br />
		<h1 id="h1titre">Titre Principale de mon Site</h1>
		<br />		
		<hr />
	</div>
	
	<ul id="menu">
		<li><a href="#" class="drop">Mon Titre 1</a><!-- 1 colonnes -->
			<div class="col_1"><!-- 1 col -->
				<div class="col_10">
					<h2>Mon Titre1.1</h2>
				</div>
				<div class="col_100">
					<h3>sous titre 1</h3>
						<ul>
							<li> <a href="#">liens1.1</a> </li>
							<li> <a href="#">liens1.2</a> </li>
							<li> <a href="#">liens1.3</a> </li>
						</ul>
				</div>
				<div class="col_100">
					<h3>sous titre 2</h3>
						<ul>
							<li> <a href="#">lien2.1</a> </li>
							<li> <a href="#">lien2.2</a> </li>
							<li> <a href="#">lien2.3</a> </li>
						</ul>
				</div>
				<div class="col_100">
					<h3>sous titre 3</h3>
						<ul>
							<li> <a href="#">liens3.1</a> </li>
							<li> <a href="#">liens3.2</a> </li>
						</ul>
				</div>
			</div><!-- fin  1 colonnes -->
		</li><!-- fin 1 col -->

		<li><a href="#" class="drop">Mon Titre 2</a><!-- 2 colonnes -->
			<div class="col_2"><!-- 2 col -->
				<div class="col_20">
					<h2>Titre 2.1</h2>
				</div>
				<div class="col_200">
					<h3>sous titre 4</h3>
						<ul>
							<li> <a href="#">lien4.1</a> </li>
							<li> <a href="#">lien4.2</a> </li>
							<li> <a href="#">lien4.3</a> </li>
							<li> <a href="#">lien4.4</a> </li>
						</ul>
				</div>
				<div class="col_200">
					<h3>sous titre 5</h3>
						<ul>
							<li> <a href="#">lien5.1</a> </li>
							<li> <a href="#">lien5.2</a> </li>
							<li> <a href="#">lien5.3</a> </li>
							<li> <a href="#">lien5.4</a> </li>						
						</ul>
				</div>
				<div class="col_200">
					<h3>sous titre 6</h3>
						<ul>
							<li> <a href="#">lien6</a> </li>
						</ul>
				</div>
			</div><!-- fin  2 colonnes -->
		</li><!-- fin 2 col -->	
	
		<li><a href="#" class="drop">Mon Titre 3</a><!-- 3 colonnes -->
			<div class="col_3"><!-- 3 col -->
				<div class="col_30">
					<h2>Titre 3.1</h2>
				</div>
				<div class="col_300">
					<h3>sous titre 7</h3>
						<ul>
							<li> <a href="#">lien7.1</a> </li>
							<li> <a href="#">lien7.2</a> </li>
							<li> <a href="#">lien7.3</a> </li>
							<li> <a href="#">lien7.4</a> </li>
						</ul>
				</div>
				<div class="col_300">
					<h3>sous titre 8</h3>
						<ul>
							<li> <a href="#">lien8.1</a> </li>
							<li> <a href="#">lien8.2</a> </li>
							<li> <a href="#">lien8.3</a> </li>
							<li> <a href="#">lien8.4</a> </li>
							<li> <a href="#">lien8.5</a> </li>
							<li> <a href="#">lien8.6</a> </li>
						</ul>
				</div>			
			</div><!-- fin  3 colonnes -->
		</li><!-- fin 3 col -->

		<li><a href="#" class="drop">Mon Titre 4</a><!-- 4 colonnes -->
			<div class="col_4"><!-- 4 col -->
				<div class="col_40">
					<h2>Titre 4.1</h2>
				</div>
				<div class="col_400">
					<h3>sous titre 9</h3>
						<ul>
							<li> <a href="#">lien9.1</a> </li>
							<li> <a href="#">lien9.2</a> </li>
							<li> <a href="#">lien9.3</a> </li>
						</ul>
				</div>
				<div class="col_400">
					<h3>sous titre 10</h3>
						<ul>
							<li> <a href="#">lien10.1</a> </li>
							<li> <a href="#">lien10.2</a> </li>
							<li> <a href="#">lien10.3</a> </li>
						</ul>
				</div>
				<div class="col_400">
					<h3>sous titre 11</h3>
						<ul>
							<li> <a href="#">lien11.1</a> </li>
							<li> <a href="#">lien11.2</a> </li>
							<li> <a href="#">lien11.3</a> </li>
							<li> <a href="#">lien11.4</a> </li>
							<li> <a href="#"></a> </li>					
						</ul>
				</div>
			</div><!-- fin  4 colonnes -->
		</li><!-- fin 4 col -->	
	</ul>
</div>
<!-- Fin MENU -->

<!-- Mon hautpage-->
<div class="hautpage">
<a href="#hautpage" class="">
	<span class="retour">
		<span class="flechehaut"></span>
		<span class="corpfleche"></span>
	</span>
</a>
</div>
<!-- Fin Mon hautpage-->
	
</div>
<!-- Fin de Ma Nav -->

<!-- Mon Corps de page-->
<div id="corps">

<!-- Mon Contenu-->
<div id="contenu">

<h1>Demande de Conseils pour Futur Site</h1>
   <hr />
<p>
– Comment faire pour centrer mon titre sans jouer sur la largeur de #h1titre.<br />
<br />
– Je souhaiterais que le bouton accueil reste à un espace identique du coté gauche de la barre des Menus suivants n’importe qu’elle largeur de page.<br />
<br />
– Je souhaiterais que le bouton Retour haut reste à un espace identique du coté droit de la barre des Menus suivants n’importe qu’elle largeur de page.<br />
<br />
– Je voudrais avoir un menu qui s’adapte seul à un certain seuil de rétrécissement, afin qu’il s’adapte au portable. Principe de fonctionnement idem à celui du site de openclassrooms<br />
<br />
– Lorsque l’on fait défiler la page, je souhaiterais que le titre du site disparaisse, et que la barre de Menu se colle en haut.<br />
<br />
– Enfin pour finir, je voudrais que les écussons du W3C reste à un espace identique du Copyright ou autre par la suite suivants n’importe qu’elle largeur de page.<br />
<br />
– Étant débutant, si vous avez de meilleures idées pour améliorer cette page, je suis preneur.<br />
<br />
– De même, j’aimerais que les explications soient expliquées dans un langage simple, afin de comprendre où je bloque.<br />
<br />
Merci pour votre aide.<br />
<br />
</p>

<br />

</div>
<!-- Fin de Mon Contenu-->

</div>
<!-- Fin de Mon Corps de page-->

<!-- Mon Footer-->
<div id="footer">

<!-- Mon validator1-->
<div id="validator1">
	<p>
		<a href="http://www.w3.org/html/logo/">
			<img class="adaptwidth" src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" 
				alt="HTML5 Powered with CSS3 / Styling" 
				title="HTML5 Powered with CSS3 / Styling">
		</a>
	</p>
</div>
<!-- Fin De Mon validator1-->

<div class="footer">

<br>
<hr>
<br>
	
	<h1>© Copyright ® - By Bruno.H</h1>
	
		<hr style="width:300px; color:firebrick; background-color:firebrick; height:3px; margin:0 auto "> 
	<br>
		<p style="width:350px; color:firebrick; margin:0 auto "><strong><em>
			Mis à jour le 10 Septembre 2016.</em></strong></p><br>
		
		<hr style="width:300px; color:firebrick; background-color:firebrick; height:3px; margin:0 auto "> 	

<br>
<br>
<hr>
<br>
</div>	

<!-- Mon validator2-->
<div id="validator2">
	<p>
		<a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
			<img class="adaptwidth" src="http://monubuntu.com/html/mon_site/frame/css3.0.png" alt="Validation CSS 3.0">
		</a>
		<a href="http://validator.w3.org/" onclick="window.open(this.href);return false">
			<img class="adaptwidth" src="http://monubuntu.com/html/mon_site/frame/html5.0.png" alt="Validation HTML 5.0">
		</a>
	</p>
</div>
<!-- Fin De Mon validator2-->	
</div>
<!-- Fin de Mon Footer-->
	
	</body>
</html>


– Comment faire pour centrer mon titre sans jouer sur la largeur de #h1titre.

– Je souhaiterais que le bouton accueil reste à un espace identique du coté gauche de la barre des Menus suivants n’importe qu’elle largeur de page.

– Je souhaiterais que le bouton Retour haut reste à un espace identique du coté droit de la barre des Menus suivants n’importe qu’elle largeur de page.

– Je voudrais avoir un menu qui s’adapte seul à un certain seuil de rétrécissement, afin qu’il s’adapte au portable. Principe de fonctionnement idem à celui du site de openclassrooms

– Lorsque l’on fait défiler la page, je souhaiterais que le titre du site disparaisse, et que la barre de Menu se colle en haut.

– Enfin pour finir, je voudrais que les écussons du W3C reste à un espace identique du Copyright ou autre par la suite suivants n’importe qu’elle largeur de page.

– Étant débutant, si vous avez de meilleures idées pour améliorer cette page, je suis preneur.

– De même, j’aimerais que les explications soient expliquées dans un langage simple, afin de comprendre où je bloque.

Merci pour votre aide
Modifié par brunoh88 (11 Sep 2016 - 13:53)
Bonjour Brunoh88,

On peut dire que t'as bossé et je dois avouer que pour une première, tu semble ne pas te débrouiller si mal.

Ce pavé (dans la mare?) me rebute un peu et j'ai bien du mal de m'y plonger c'est pourquoi je vais éviter de répondre à tes questions (dans un premier temps).

En fait, si je réponds à ton sujet c'est surtout afin de te transmettre quelques conseils que je t'expose ci-dessous en vrac (à prendre pour ce qu'ils sont: des conseils, ok ?).

Les ID
Pour la personnalisation (css) il faille mieux éviter l'utilisation d'identifiant et préférer au lieu de ça l'utilisation de classe. Afin de me justifier, je t'invite à te renseigner sur le poids des sélecteurs.
Un identifiant ne devrait être nécessaire que lorsque celui-ci est cible d'un lien (une ancre) mais sont utilisation doit être évitée en css.

Propriétés css concaténées
Préciser : margin: 0 0 0 0;
Revient à la même chose que : margin: 0;
Plus simple et plus économique, ne crois-tu pas ?
Même chose avec des valeurs : border-radius: 40px 40px 40px 40px;
Revient au même que mettre : border-radius: 40px;

0 + 0 = la tête à t0t0 (oui, j'avoue je manque d'inspiration pour ce titre)
Retiens juste que 0px = 0 rem = 0vw = 0carotte = 0. Nul besoin de préciser l'unité car en mathématique (comme ailleurs) 0 = 0. (<= il me semble que c'est tout aussi vrai dans le domaine de la finance)

Hauteur adaptative
Par défaut un élément possède la propriété intrinsèque height: auto;
Inutile de le préciser sauf si un ordre contraire (une hauteur figée) a été donné en amont.

Flottant + position absolue
Ceci me semble contradictoire surtout si tu précises un left à -999px (=mise sur orbite).

Unités relatives versus unités absolue
Un autre sujet d'étude pour toi, ça t'aidera quand tu souhaiteras entamer le chapitre sur le graphisme adaptatif... (en clair remplacer les px par des rem/em par exemple)

top: auto ???? Kézako ?
N'as-tu pas confondus avec initial ? Et encore, je ne suis même pas certain qu'il faille le réinitialiser. [se renseigner sur notion de flux et hors-flux]

width: 100% pour un bloc
Un élément de type bloc a systématiquement une largeur de 100% de son conteneur (sauf ordre contraire).

Nettoyer derrière les flottants
Tu semble affectionner les flottant mais as-tu apprivoisé la propriété clear ? Tu risque d'obtenir des espacements indésirables.

Des bordures qui ont du style, ou pas
Je ne saisi pas le but de border:0px solid orange;
Si la taille est nulle rien à fichtre de la couleur. A moins que tu ne précise une taille lors d'un évènement (hover, focus...) ; quoique pourquoi ne pas préciser ces caractéristiques lors de l'évènement plutôt qu'à l'état neutre ?
border: none; me semble plus approprié.

Attention avec inline-block
Un article d'Alsa en parle. Cette propriété, si elle est mal utilisée, amène à des espaces indésirables. Encore de la lecture pour toi Smiley cligne

de l'utilisation des balises sémantiques
Tu définis un doctype html5 ; pense donc à utiliser les balises sémantiques (nav, article, section etc) en lieu et place des div lorsque cela est possible. Ces balises transmettent une information (déf de sémantique) ; div et span sont des éléments neutres.

de l'utilisation des titres
Pour la faire courte, pour placer un H3 il faut obligatoirement qu'un conteneur parent possède un H2. Pour placer un H2, il faut obligatoirement qu'un conteneur parent possède un H1.
Par contre il ne faut en aucun cas utiliser ces balises (elles sont 6) pour faire un effet de style. D'ailleurs le validateur a dû te le signaler !

z-index
Attention terrain glissant. A n'utiliser qu'en cas d'extrême nécessité ! Préférer le remaniement du code.

Conclusion
Pour un début je trouve tout ceci très bien mais comme tu peux le voir tu peut encore optimiser ton css et donner plus de sens à ton html. Tu commente ton code et c'est un bon réflexe.
J'espère que ces quelques conseils te permettront d'atteindre des sommets.


Comment faire pour centrer mon titre sans jouer sur la largeur de #h1titre ?
Je ne comprends pas cette question, il me semble qu'il est centré.
Le conteneur se centre tout simplement par des marges latérales automatiques (j'ai vus que tu avais fixé sa taille).
Le texte se centre par un tout simple h1{text-align:center;}

Je souhaiterais que le bouton accueil reste à un espace identique du coté gauche de la barre des Menus suivants n’importe qu’elle largeur de page et Je souhaiterais que le bouton Retour haut reste à un espace identique du coté droit de la barre des Menus suivants n’importe qu’elle largeur de page
Si tu place ces éléments absolument, n'oublie pas qu'il sont positionnés par rapport au premier ancêtre dont sa position relative est explicitement énoncée.
Sinon il existe aussi la position fixe qui figera l'élément par rapport à la zone d'affichage.

Je voudrais avoir un menu qui s’adapte seul à un certain seuil de rétrécissement, afin qu’il s’adapte au portable. Principe de fonctionnement idem à celui du site de openclassrooms
Les media-queries t'apporteront le salut.

Lorsque l’on fait défiler la page, je souhaiterais que le titre du site disparaisse, et que la barre de Menu se colle en haut
A mon humble avis, tes balises html ne sont pas dans le bon ordre. Ensuite en jouant avec le positionnement fixe et relatif l'effet est faisable en css (header en fixe puis le reste dans un conteneur positionné juste sous le header).
On voit aussi très souvent le menu qui change de forme au scroll et vient se fixer au sommet de la page ; il s'agit d'un script en Javascript (ou Jquery).

Enfin pour finir, je voudrais que les écussons du W3C reste à un espace identique du Copyright ou autre par la suite suivants n’importe qu’elle largeur de page
A y'a moa pas yavoir compris Smiley confused
- Vous pouvez répéter la question ? Stéphanie de Monaco !

Étant débutant, si vous avez de meilleures idées pour améliorer cette page, je suis preneur
Je joue mon joker.

De même, j’aimerais que les explications soient expliquées dans un langage simple, afin de comprendre où je bloque
Très abstraite comme demande ; à toi de juger Smiley smile
De mon côté j'ai fais du mieux que je pouvais.


@ tantôt.


PS : n'oublie pas les lectures recommandées Smiley cligne
Modifié par Greg_Lumiere (11 Sep 2016 - 11:38)
Greg_Lumiere a écrit :
Bonjour Brunoh88,
Les ID
… je t'invite à te renseigner sur le poids des sélecteurs.
…


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Propriétés css concaténées
Préciser : margin: 0 0 0 0;
Revient à la même chose que : margin: 0;
… avec des valeurs : border-radius: 40px 40px 40px 40px;
Revient au même que mettre : border-radius: 40px;


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
…Retiens juste que 0px = 0 rem = 0vw = 0carotte = 0. …


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Hauteur adaptative ...


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Flottant + position absolue
Ceci me semble contradictoire surtout si tu précises un left à -999px (=mise sur orbite).


Ca je verrais vers la fin car là …

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Unités relatives versus unités absolue …


Ca je verrais vers la fin car là …

Greg_Lumiere a écrit :
Bonjour Brunoh88,
top: auto ???? Kézako ? …


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
width: 100% pour un bloc
Un élément de type bloc a systématiquement une largeur de 100% de son conteneur (sauf ordre contraire).

Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Nettoyer derrière les flottants...


Ca me permet, à mon niveau de me sortir de certain soucis, mais je vais faire attention à cela.

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Des bordures qui ont du style, ou pas …


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Attention avec inline-block …


Je vais voir le pourquoi du comment.

Greg_Lumiere a écrit :
Bonjour Brunoh88,
de l'utilisation des balises sémantiques


Il faut que je mis mette, tu as raison !!!

Greg_Lumiere a écrit :
Bonjour Brunoh88,
de l'utilisation des titres
Pour la faire courte, pour placer un H3 …


Je pense que c’est dans le menu, mais je remplace par quoi ???

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Comment faire pour centrer mon titre sans jouer sur la largeur de #h1titre ?


Résolu

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Je souhaiterais que le bouton accueil reste à un espace identique du coté gauche de la barre des Menus suivants n’importe qu’elle largeur de page et Je souhaiterais que le bouton Retour haut reste à un espace identique du coté droit de la barre des Menus suivants n’importe qu’elle largeur de page


Résolu grâce à la propriété 
display: flex; et justify-content: center;




Greg_Lumiere a écrit :
Bonjour Brunoh88,
Enfin pour finir, je voudrais que les écussons du W3C reste à un espace identique du Copyright ou autre par la suite suivants n’importe qu’elle largeur de page


Résolu grâce à la propriété 
display: flex; et justify-content: center;



En ce qui concerne :

Greg_Lumiere a écrit :
Bonjour Brunoh88,
Lorsque l’on fait défiler la page, je souhaiterais que le titre du site disparaisse, et que la barre de Menu se colle en haut


Greg_Lumiere a écrit :
Bonjour Brunoh88,
Je voudrais avoir un menu qui s’adapte seul à un certain seuil de rétrécissement, afin qu’il s’adapte au portable. Principe de fonctionnement idem à celui du site de openclassrooms


Là j’aurais besoin d’aide.

Merci pour tout ces conseils, et je règle les points indiqué dés que possible.
Modifié par brunoh88 (11 Sep 2016 - 14:58)
Sujet clos
Aller à