18041 sujets

Questions générales et questions de débutants

Centrer les elements de la nav et du footer

bonsoir a toute et a tous,

je viens vers vous car je galère à centrer les éléments de ma nav et de mon footer.

je voulais savoir si qqn pouvais m'aider svp.

<!DOCTYPE html>
<html>
	<head>
		<title>profil</title>
		<meta charset="utf-8" />

		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />

	</head>

	<body>
		<header>
			<section class="center clearfix">
				<h1>
					<a href="profil.html">
						<img src="images/logos.png" alt="Portfolio, Adrien Mareau" />
					</a>
				</h1>	
			</section>
		</header>

		<nav>
			<ul class="center" id="nav">
				<li><a class="active" href="profil.html" id="profil">Profil</a></li>
				<li><a href="travaux.html" id="travaux">Travaux</a></li>
				<li><a href="contact.html" id="contact">Contact</a></li>
			</ul>
		</nav>
		
		<main class="center">
			<section id="moi" class="clearfix">
				<figure>
					<img src="images/photo.jpg"alt="photo, Adrien Mareau" />
				</figure>

				<article class="texte">
					<p>Bonjour,</p>
					<p>Je m'appelle Adrien, j'ai actuellement 22 ans et je suis étudiant en première année d'un bachelor Chef de projet multimédia a l'IESA.</p>
					<p>Pour connaitre mon parcours plus en détail je vous invite à regarder mon <a href="Cv-Adrien-Mareau.pdf" target="_blank"><span>CV</span></a>.</p>
				</article>	
			</section>
		</main>

		<footer>
			<section class="center clearfix" id="footer">
				<p>© 2015 Portfolio by Adrien. Tous droits réservés.</p>
			</section>
		</footer>
	</body>
</html>


en vous en remerciant par avance.
@font-face{
	font-family: 'Adamina';
	src: url(Adamina-Regular.ttf);
}
@font-face{
	font-family: 'Lobster';
	src: url(Lobster-Regular.ttf);
}
/*********************/
/* STYLES GENERIQUES */
/*********************/
html{
	background-size: cover;
	font-family: Arial, Helvetica, sans-serif;
}
.center{
	width: 980px;
	margin: auto;
}
.clearfix:after{
	content:'';
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}
footer
nav{
display: inline-block;
text-align: center;
width: 100%
}
a{
	color: #bc1f1f;
	text-decoration: none;
}
/*********************/
/*   HEADER et NAV   */
/*********************/
header,
footer{
	background-color: #c0c0c0;
	color: #000;

}


header h1{
	float: left;
	margin: 10px 375px;
}

nav{
	background: url(../images/menu-row-tail.gif) repeat-x ;
	margin-bottom: 20px;
	font-family: 'Adamina', serif;
}
nav ul{
	background: url(../images/menu-spacer.gif) no-repeat left 0;
}
nav li{
	display: inline-block;
	background: url(../images/menu-spacer.gif) no-repeat right 0;
}
nav a{
	display: inline-block;
	padding: 18px 33px;
	font-size: 22px;
	color: #000;
	text-align: center;
}
nav a.active,
nav a:hover{
	color: #bc1f1f;
}

/***************************/
/*  PARTIE CENTRALE index  */
/***************************/

main.center{
	background-color:rgba(255, 255, 255, 0.8);
	margin-bottom: 20px;
}
main section{
	padding: 20px;
}


#photos figure{
	margin-left: 3px;
	margin-bottom: -9px;
	position: relative;
	float: left;

}

#photos figure img + img{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#photos figure:hover img + img {
	opacity: 1;
}
.carte{
	background: url(../images/contact.jpg) no-repeat 0 0;
	padding: 20px 500px 20px 20px;
	color: #fff;
	text-align: center;
}
.carte p{
	font-size: 20px;
	line-height: 30px
}

.linkedin{
	display: inline-block;
	width: 60px;
	height: 77px;
	background: url(../images/linkedin.jpg) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	margin-bottom: 40px;
	
}



/*************************/
/* PARTIE CENTRALE index */
/*************************/





#moi{
	margin-top: 50px;
	margin-bottom: 90px;
}

#moi figure{
	
	float: left;
	margin-right: 150px;
	position: relative;
}

#moi .texte{
	width: 400px;
	float: left;
	margin-top: 30px;
	font-size: 20px;
	line-height: 36px;
}


/**************************/
/*         FOOTER         */
/**************************/
footer{
	padding: 20px 0;
	
	
}


et la le code css (j'ai en tout 3 pages)
pour centrer le contenu de la <nav> et du id="footer"
le cs : 

nav {text-align : center}
#footer {text-align: center;}


Cela répond-t-il a ta demande ?
Enjoy
Modifié par Cr2a (23 Mar 2015 - 09:30)
Le problème est ici :
footer
nav{
display: inline-block;
text-align: center;
width: 100%
}
Il manque une virgule après le mot "footer".
Sujet clos
Aller à