Partage

titre h1 heaver pas aligné avec titre h1 articles

8 août 2018 à 16:35:13

Bonjour,j'essaye pour débuter et apprendre en même temps de créer un page d'un site web(pour de faux).

Je m'aide de ce site https://www.pierre-giraud.com/html-css/cours-complet/creation-structure-site-html-css.php et j'essaye de comprendre chaque chose qu'il utilise

Il y a plusieurs points qui ne vont pas

-le titre "qui suis-je" n'est pas à la bonne place

-la photo n'apparait pas

body{

background: url("image/imagejpg/lavende.jpg") fixed;

font-family: Times New Roman,Impact,Arial;

font-size: 13px;

margin: 0px;

padding: 0px;

}

header{

height:100px;

 }

 footer{

 text-align: center;

 }

nav ul{

margin:0px;

padding:0px;

}

nav li{

list-style-type: none;

float:left;

margin-left:50px;

}

nav a{

display:block;

width:200px;

font-size:2em;

text-align:center;

background: url(image/imagepng/fleurs.png);

border:2px solid;

text-decoration: none;

}

nav a:hover {

background-color: rgb(255,193,214);

border-color:pink;

}

section{

width: 100%;

min-height:300px;

padding-bottom:10px;

margin-bottom: 10px;

}

.sec{

margin: 0px 10%;

}

.left{

float:left;

width:30%;

}

.right{

float:right;

width: 70% ;

}

h1{

font-weight: : bold;

color: red;

text-align: center;

text-decoration: underline;

font-size: 2.5em;

 }

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<meta="wiewport" content="width-device-width, initial-scale=1.0">
		<meta name="description" content="Bienvenue sur mon site">	
		<link rel="stylesheet" href="famille.css" />
		<tittle></tittle>

	</head>

	<body>

		<header>
			<h1>Ma famille</h1>
		</header> 

		<nav>
			<div class="table">
				<ul>
					<li class="menuamelie">
						<a href="blogAmelie.html">Blog d'Amélie</a>
					</li>
					<li class="menucorentin">
						<a href="blogCorentin.html">Blog de Corentin</a>
					</li>
					<li class="menuviedefamille">
						<a href="Viedefamille.html">Vie de famille</a>
					</li>
					<li class="contact">
						<a href="contact.html">Contact</a>	
					</li>
				</ul>

	 	</nav>

	 	<article>
	 		<section id="presentation">
	 			<h1>Qui suis-je</h1>
	 			<div class="sec">
	 				<div class="right">
	 					<img src="image/imagepng/mariage.png" alt="photo du mariage" width=300>
	 		  		</div>
	 				<div class="left">
	 					<p>Je m'appelle Elisa  j'ai 28 ans et je vis à BORDEAUX</p>
	 					<p>Je suis maman de deux magnifiques enfants</p>
	 					<p>Je me suis mariée en 2016</p>
	 					<p>N'hésitez pas à parcourir mon site</p>
	 				</div>
	 			</div>
	 		</section>
	 	</article>




	


	 

	</body>


</html>

Désolée merci beaucoup pour vos explications Abc

-
Edité par elisarobert 8 août 2018 à 21:57:31

AbcAbc6

8 août 2018 à 16:37:04

Bonjour,

Merci d'utiliser la mise en forme de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Bonjour besoin d'aide débutante)

elisarobert

8 août 2018 à 21:48:36

...

-
Edité par elisarobert 8 août 2018 à 21:51:59

AbcAbc6

8 août 2018 à 22:27:25

Bonsoir, merci d'avoir édité votre message.

L6 (de l'HTML) vous voyez une différence de coloration syntaxique, c'est meta name="viewport" ....

L9 la balise <tittle> n'existe pas, c'est <title> et cette balise ne peut être vide;

Vous ouvrez <div class="table"> mais vous ne le fermer pas.

Vous pouvez voir vos erreurs grâce au validateur https://validator.w3.org/

L5 de la CSS si vous avez un nom de police composé de plusieurs mots, ceux ci doivent être entouré de quotte simple ou double.

L107 vous avez écrit deux fois les deux point. Cette erreur vous est indiquée par le validateur CSS http://jigsaw.w3.org/css-validator

Pour le problème du centrage du deuxième titre <h1>, il en résulte des effets du flottant plus haut, vous n'annulez pas l'effet du flottant; Pour ce faire deux solutions :

Soit appliquer un style clear: both; à l'élément suivant le flottant
Soit un overflow: hidden sur le parent du flottant.

Pour le problème de l'image, c'est surement un chemin erroné. Pouvez vous nous transmettre une capture écran de votre hiérarchie de fichier?

Édit : pas de width: 100%; pour un block lire => https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

-
Edité par AbcAbc6 8 août 2018 à 22:50:01

exen

8 août 2018 à 23:22:31

Bonsoir,

déjà tu as une div qui n'est pas fermée à l’intérieur de <nav>

Au début pour comprendre ce qui se passe il peut être bon aussi de coller des background-color: sur tes éléments ca te permet de mieux comprendre leurs comportement au rétrécissement de la fenêtre.

La ton problème viens de la hauteur de nav, par exemple si tu colle dans ton css

.table{
 width: 100vh;
 
min-height:100px;
 
padding-bottom:10px;
 
margin-bottom: 10px;
 }

tu verras que tu résous ton problème de centrage, mais bon c'est juste un exemple. Il vaut mieux préférer comme le dit AbcAbc6 :

section{
clear: both;
 
width: 100vh; /*corrigé en édition lire les post suivant pour comprendre*/
 
min-height:300px;
 
padding-bottom:10px;
 
margin-bottom: 10px;
 
}

Pour ta photo regarde si c'est le bon chemin, en plus si tu regarde ton width le 300 n'a pas de guillemets, et au lieu d'écrire sur le html donne lui plutôt une class.

<img class="mar" src="image/imagepng/mariage.png" alt="photo du mariage" >

css

img.mar{
  display: block;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
 }

Edit entre temps AbcAbc6 en à dit pas mal.

-
Edité par exen 9 août 2018 à 16:10:27

Compos sui.

Frogweb

9 août 2018 à 15:59:21

exen, je ne pense pas que AbcAbc6 préconise de mettre un width:100% sur section.
Bien au contraire puisqu'il mets le fameux lien qui explique pourquoi il ne faut pas le faire.

PS : le .table peut être trompeur

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

exen

9 août 2018 à 16:08:53

@Frogweb bien vu hier soir il m'est passé sous le nez, c'est le code d'origine au quel j'avais juste appliqué un

clear: both

Je vais le corriger de suite.

Perso j'ai joué un peut avec le .table, et le fait que tu en parle me pousse à te demander ce que tu entend par trompeur ?

Compos sui.

Frogweb

9 août 2018 à 16:16:29

C'est trompeur parce que sur une table il faut effectivement utiliser width:100%

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

exen

9 août 2018 à 16:26:03

Ha ok,

Mais la c'est un nom bateau utilisé (quand il est fermé) comme conteneur.

Je me demande si ca vaut le coup d'aller voir se fameux cours.

Puis en ce moment je me dépatouille avec les catégories de contenu.

Compos sui.

elisarobert

10 août 2018 à 21:46:27

Désolée de pas avoir eu répondre avant j'étais très occupée,je vous remercie beaucoup pour toute vos réponses ,je vais les examiner sans doute après mes vacances(je pars demain) et je me remettrai à essayer de m'entraîner .

Enorme merci.car vous savez pas combien de temps j'ai mis à essayer de comprendre à regarder de la documentation et je comprenais pas je commençais à désespérée...alors merci beaucoup!Je reposterai

-
Edité par elisarobert 10 août 2018 à 21:51:25