5568 sujets

Sémantique web et HTML

Impossible de modifier les titres(h1) de footer

Salut, j'etais en train de realiser un site WEB quand tout un coup les titres de niveau 1 (h1) du footer ont refusé de repondre quand j'essaie de les modifier.

Je vous presente le code HTML du site en construction:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css"/>
		<title>Zozor - Carnets de voyage</title>
	</head>
	
	<body>
		<div id="bloc_page">
			<!--En-tête de la page-->
		<header>
			<div id="logo">
				<img src="images/zozor_logo.png" alt="Logo"/>
				<h2>Zozor</h2>
				<h3>Carnets de voyage</h3>
			</div>
			<nav>
				<ul>
					<li><a href="">ACCUEIL</a></li>
					<li><a href="">BLOG</a></li>
					<li><a href="">CV</a></li>
					<li><a href="">CONTACT</a></li>
				</ul>
			</nav>
		</header>
			<!--bannière de la page-->
		<div id="banniere">
				<p id="info_banniere">Retour sur mes vacances aux États-Unis... </p>
				<a href="#" id="bouton_rouge">Voir l'article<img src="images/flecheblanchedroite.png" alt="fleche"/></a>
		</div>
			<!--section de la page-->
		<section>
			<article>
				<img src="images/ico_epingle.png" alt=""/>
				<h1>JE SUIS UN GRAND VOYAGEUR</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu 
					lorem, et semper purus. Cum sociis natoque penatibus et 
					magnis dis parturient montes, nascetur ridiculus mus. 
					Duis vel enim mi, in lobortis sem. Vestibulum luctus elit
					eu libero ultrices id fermentum sem sagittis. Nulla 
					imperdiet mauris sed sapien dignissim id aliquam est aliquam.
					Maecenas non odio ipsum, a elementum nisi. Mauris non erat 
					eu erat placerat convallis. Mauris in pretium urna. Cras 
					laoreet molestie odio, consequat consequat velit commodo eu. 
					Integer vitae lectus ac nunc posuere pellentesque non at eros. 
					Suspendisse non lectus lorem.
				</p>
				
				<p>
					Vivamus sed libero nec mauris pulvinar facilisis ut non sem. 
					Quisque mollis ullamcorper diam vel faucibus. Vestibulum 
					sollicitudin facilisis feugiat. Nulla euismod sodales 
					hendrerit. Donec quis orci arcu. Vivamus fermentum magna a 
					erat ullamcorper dignissim pretium nunc aliquam. Aenean 
					pulvinar condimentum enim a dignissim. Vivamus sit amet 
					lectus at ante adipiscing adipiscing eget vitae felis. In at 
					fringilla est. Cras id velit ut magna rutrum commodo. Etiam 
					ut scelerisque purus. Duis risus elit, venenatis vel rutrum 
					in, imperdiet in quam. Sed vestibulum, libero ut bibendum 
					consectetur, eros ipsum ultrices nisl, in rutrum diam augue 
					non tortor. Fusce nec massa et risus dapibus aliquam vitae 
					nec diam.
				</p>
				
				<p>
					Phasellus ligula massa, congue ac vulputate non, dignissim at
					augue. Sed auctor fringilla quam quis porttitor. Praesent 
					vitae dignissim magna. Pellentesque quis sem purus, vel 
					elementum mi. Pellentesque habitant morbi tristique senectus 
					et netus et malesuada fames ac turpis egestas. Maecenas 
					consectetur euismod urna. In hac habitasse platea dictumst.
					Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at
					molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem
					risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet,
					egestas at sem.
				</p>
			</article>
			
			<aside>
				<h1>À PROPOS DE L'AUTEUR</h1>
				<figure>
					<img src="images/bulle.png" alt="" id="bulle"/>
					<img src="images/zozor_classe.png" alt="Zozor" id="zozor"/>
				</figure>
				<p>
					Laisse-moi le temps de me présenter : je m'appelle Zozor, 
					je suis né un 23 novembre 2005.
				</p>
				
				<p>
					Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, 
					j'ai décidé d'écrire ma biographie (ou zBiographie, comme 
					vous voulez !) afin que les zéros sachent qui je suis 
					réellement.
				</p>
				<figure id="reseaux_sociaux">
					<img src="images/facebook.png" alt="facebook"/>
					<img src="images/twitter.png" alt="twitter"/>
					<img src="images/vimeo.png" alt="vimeo"/>
					<img src="images/flickr.png" alt="flickr"/>
					<img src="images/rss.png" alt="rss"/>
				</figure>
			</aside>
		</section>
			<!--pied de page du site-->
		<footer>
			<div id="tweet">
				<h1>MON DERNIER TWEET</h1>
				<p>Hii haaaaaan !</p>
				<p>le 12 mai à 23h12</p>
			</div>
			
			<div id="photos">
				<h1>MES PHOTOS</h1>
				<figure>
					<img src="images/photo1.jpg" alt="photo1"/>
					<img src="images/photo2.jpg" alt="photo2"/>
					<img src="images/photo3.jpg" alt="photo3"/>
					<img src="images/photo4.jpg" alt="photo4"/>
				</figure>
			</div>
			
			<div id="amis">
				<h1>MES AMIS</h1>
				<ul>
					<li><a>Pupi le lapin</a></li>
					<li><a>Mr Baobab</a></li>
					<li><a>Kaiwaii</a></li>
					<li><a>Perceval.eu</a></li>
				</ul>
				
				<ul>
					<li><a>Belette</a></li>
					<li><a>Le concombre masqué</a></li>
					<li><a>Ptit prince</a></li>
					<li><a>Mr Fan</a></li>
				</ul>
			</div>
		</footer>
		</div>
	</body>
</html>


Voici aussi le code CSS de la page:

@font-face
{
	font-family:"ballpark";
	src: url("polices/ballpark.eot") format("eot"),
		 url("polices/ballpark.svg") format("svg"),
		 url("polices/ballpark.ttf") format("truetype"),
		 url("polices/ballpark.woff") format("woff");
}

@font-face
{
	font-family:"dayrom";
	src: url("polices/dayrom.eot") format("eot"),
		 url("polices/dayrom.svg") format("svg"),
		 url("polices/dayrom.ttf") format("truetype"),
		 url("polices/dayrom.woff") format("woff");
}

body
{
	background-image: url("images/fond_jaune.png");
	font-family: "Trebuchet MS", Arial, serif;
	font-size: 14px;
}
#bloc_page
{
	width: 950px;
	margin: auto;
}
/*Header de la page*/
header
{
	background: url("images/separateur.png") repeat-x bottom;
	padding-bottom:5px;
}
#logo h2
{
	display: inline;
	font-family:"ballpark";
	font-size: 35px;
}
#logo h3
{
	margin-top: -5px;
	font-family:"dayrom";
	font-weight: normal
}
nav li
{
	display: inline-block;
	text-decoration: none;
	margin-right: 10px;
}
a
{
	text-decoration: none;
}
nav a:hover
{
	color: maroon;
	border-bottom: 3px maroon solid;
}
nav a
{
	color: black;
}
nav
{
	margin-left: 560px;
	margin-top:  -40px;
	font-family: "dayrom";
	font-size: 20px;
}

/*Bannière de la page*/
#banniere
{
background: url("images/sanfrancisco.jpg");
height: 220px;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 5px;
}
#info_banniere
{
	display: inline-block;
	margin-top: 180px;
	margin-left: 15px;
}
#bouton_rouge
{
	display: inline-block;
	margin-left: 555px;
	background-color: #973c3d;
	padding: 6px;
	border-radius: 5px;
	color: white;
	display: inline-block;
	margin-top: 180px;
}
#bouton_rouge img
{
	display: inline-block;
	margin-left: 3px;
}

/*Section de la page*/
section
{
	background: url("images/separateur.png") repeat-x bottom;
	margin-top: 30px;
}
h1
{
	font-family: dayrom;
	font-weight: normal;
}
article
{
	width: 600px;
	display: inline-block;
	margin-left: 20px;
}
article h1
{	
	margin-top: -40px;
	margin-left: 50px;
}
aside
{
	width: 270px;
	display: inline-block;
	vertical-align: top;
	background-color: #706b64;
	border-radius: 15px;
	text-align: center;
}
#bulle
{	
	display: inline-block;
	margin-bottom: 50px;
	margin-left: -68px
}
#zozor
{
	display: inline-block;
	margin-left: 70px;
}
#reseaux_sociaux
{
	margin-left: 10px;
}


NB: A part les titres h1 du pied de page , les autres marchent correctement.

Merci d'avance pour votre aide.
Salut,
Dis moi sur quelle ligne dans ton code CSS se trouve le bloc de déclaration des h1 du footer stp...
Nulle part ^^ !
J'arrive à modifier quoi que ce soit moi avec ton code, si tes titres du footer sont différent des autres c'est parce que le font-size n'est pas le même et est généré par le navigateur à sa sauce, donc spécifi une taille sinon tu risque d'avoir des surprise entre chaque navigateur qui mettrons la taille qu'ils veulent.
Sujet clos
Aller à