mise en forme des mes liens impossible

Sujet résolu

22 juillet 2018 à 15:22:44

Bonjour,

Je n'arrive vraiment pas à mettre en forme mes liens sur ma page web espacesyoga...

Voici mon code HTML:

<!DOCTYPE html>
<html>
  
    <head>
        <meta charset="utf-8" />
	  	<meta name="viewport" content="width=device-width"/>
	  	<link rel="stylesheet" href="format.css" />
        <title>Espaces Yoga</title>
    </head>

    <body>
	  
	  <header>
		<div class="logo">
    		<img src=" logoEspacesYoga254pxLarge.png" alt="logo" />
		</div>
		<div class="citation"><p><em>"Vis comme si tu devais mourir demain. 
		  Apprend comme si tu devais vivre toujours."</em><br>Mahatma Gandhi</p></div>
	  </header>
		
	  <div class="bloc">
	  <nav>
			<ul>
				<li><a href="index.html">Accueil</a></li>
		   		<li><a href="yogaEnergie.html">Yoga de l'énergie</a></li>
		  		<li><a href="yogaMaternite.html">Yoga maternité</a></li>
		 		<li><a href="biographie.html">Biographie</a></li>
		  		<li><a href="contact.html">Contact</a></li>
			</ul>
	  </nav>
	  
	  <section>
		<h1>Accueil</h1>
		<p>Bonjour et bienvenue sur le tout nouveau sit web d'<strong>Espaces Yoga</strong> !<br>Il reste quelques petits détails à régler, mais <b>toute l'information est là!</b> :)<br>Bonne visite.<br><br><strong>Chantal Esseiva</strong></p>
	    
	  </section>
	  </div>
	  
    </body>
  
</html>

Et voici mon code CSS:

a:link, a:visited
{
  	text-decoration: bold;
  	color: rgb:(102,000,051); /*rouge foncé donné par NB*/
}


a:hover, a:active
{
  	text-decoration: bold, underline;
  	color: rgb:(210,000,105); /*rouge inventé*/
}

body
{
  	font-family: Verdana, sans-serif;
  	line-height: 200%;
}

header
{
 	display: flex;
  	flex-wrap: wrap;
  	margin-left: 10%;
  	margin-right: 10%;
	margin-bottom: 50px;
  	margin-top: -10px;
}

.logo
{
  	width: 20%;
  	margin-right: 2%;
  	min-width: 200px;
}

.citation
{
	display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
  	text-align: right;
  	font-family: time;
  	font-size: large;
  	color: rgb(102,102,102); /*gris donné par NB*/
  	line-height: 100%;
  	width: 67%;
  	min-width: 300px;
}

.bloc
{
  	display: flex;
  	flex-wrap: wrap;
  	margin-left: 10%;
  	margin-right: 10%;
  	margin-bottom: 50px;
}

.tab
{
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: flex-start;
}

.cours
{
  	margin-right: 100px;
}

nav
{
  	text-align: left;
  	width: 20%;
  	background-color: rgb(255,240,250); /*rose inventé*/
  	margin-right: 2%;
  	line-height: 300%;
  	border-radius: 10px;
  
  	min-width: 200px;
  	margin-bottom: 10px;
}

section
{
  	width: 67%;
  	color: rgb(102,102,102); /*gris donné par NB*/
  	padding-right: 5%;
  	padding-left: 5%;
  	padding-bottom: 1%;
  	border-radius: 10px;
  
  	min-width: 300px;
  	margin-bottom: 10px;
}

footer
{
  	color: rgb(102,102,102); /*gris donné par NB*/
  	text-align: center;
  	padding-right: 5%;
  	padding-left: 5%;
  	margin-left: 10%;
	margin-right: 10%;
  	margin-bottom: 100px;
  	font-family: times, sans-serif;
  	min-width: 300px;
}

h1, h2
{
  	color: rgb:(102,000,051); /*rouge foncé donné par NB*/
}

Help please...

Jeremy.

Lamecarlate

22 juillet 2018 à 15:48:51

Bonjour,

la coloration syntaxique aurait pu te donner un indice regarde ligne 4, ton erreur est là.

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

jeremyvenetz

22 juillet 2018 à 16:28:31

olala... quelle bêtise... je travaille directement dans le FTP-web, et la coloration syntaxique n'est pas tété, je ferais mieux de bosser avec sublim-text... Merci pour ton aide.

Sinon, je suis preneur de tous vos conseils d'ordre généraux!

ps: suis actuellement en train de suivre le tuto "Améliorez la visibilité de votre site grâce au référencement"

-
Edité par jeremyvenetz 22 juillet 2018 à 16:56:51

Lamecarlate

22 juillet 2018 à 20:03:15

Sublime Text, ou Atom, ou Brackets, ou n'importe quel éditeur tu as l’embarras du choix.

Quelques conseils :

pour une citation, utilise l'élément HTML dédié <blockquote>.
le "alt" d'une image n'est pas à remplir à la légère : il doit décrire l'image en quelques mots. Si c'est un logo, précise "logo d'Espace Yoga".
pas d'espace dans le "src" de l'image
n'utilise pas <br> pour faire de l'espace. Si tu démarres un nouveau paragraphe, utilise <p>
évite les marges négatives dans le CSS : plutôt qu'un margin-top: -10px sur header, mets margin: 0 sur body, car je suppose que c'était pour contrer cet effet.
évite de styler directement section, header ou nav : rien ne dit que tu n'en auras pas d'autres sur ton site. Use des classes

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