28172 sujets

CSS et mise en forme, CSS3

Bonsoir a tous,

Voila je suis en train d'écrir la feuille de style du futur site de mon asso et lorsque je fais un test sur Firefox mon contenu n'apparait pas alors sur IE oui.

Pour vous aider voici mes codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<meta http-equiv="Content-Language" content="fr" />
	</head>
	
	<body>
		<div id="conteneur">
<!-- MENU DE NAVIGATION GENERALE ------>
			<ul id="menu">
				<li><a href="index.html" title="Pages d'accueil">Accueil</a></li>
				<li><a href="forum.html" title="Rejoignez nous sur le forum">Forum</a></li>
				<li><a href="plandusite.html" title="plant du site">Plan du site</a></li>
				<li><a href="contact.html" title="Contactez nous">Contact</a></li>
			</ul>
<!-- ENTETE --------------------------->
		<h1 id="header"><a href="http://www.planetlibre.org" title="c'est facile"><span>Planetlibre</span></a></h1>

<!--NAVIGATION ------------------------>
		<div id="navigation">
			<ul id="navigation">
				<li id="active"><a href="#" id="current">Acceuil</a></li>
				<li><a href="#">Protection de la nature</a></li>
				<li><a href="#">Les conseilles écolo</a></li>
				<li><a href="#">OGM</a></li>
				<li><a href="#">Evennements</a></li>
				<li><a href="#">Médias</a></li>
				<li><a href="#">Nos actions</a></li>
				<li><a href="#">Les membres</a></li>
				<li><a href="#">Ma traces écologique</a></li>
			</ul>
		</div>
<!-- CONTENU DU SITE ------------------>
		<div id="contenu">
			<h2>Planet libre  [lol]</h2>
		  	<p>Fondée en septembre 2008 et régie par la Loi de 1901, ".........." est une association à but environnemental visent à l'entretien des espaces naturels, à la sensibilisation à l'environnement aupres de public scolarisé mais aussi de famille et de favoriser l'émergence d'éco-citoyens aux gestes du quotiens. <a href="Référencement.html">Référencement</a></p></p>
		</div>
<!-- PIED DE PAGE --------------------->
		<p id="piedpage">Copyright © - Planetlibre-Sep2008 <a href="plan">Plan du site</a><a href="contact">Contact</a><a href="Partenaire.html">Partenaires</a><a href="Référencement.html">Référencement</a></p>
	</div>
	</body>
</html>



body{
margin: 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #5f3232 ;
}

div#conteneur{
width: 80% ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}

h1#header{
	height: 150px ;
}

div#contenu{
padding: 0 30px 0 100px ;
background: url(bg_page.gif) no-repeat 15px 15px ;
}

div#contenu h2{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}

div#contenu h3{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}

div#contenu p{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}

div#contenu a{
color: #8a0 ;
}

div#contenu a:hover{
color: #9b2;
}

p#piedpage{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}

ul#menu{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}

ul#menu li{
	float: right ;
	text-align: left ;
}
ul#menu li a{
	width: 130px ;
	word-spacing: 2px;
	margin-right: 8px;
	line-height: 25px ;
	font-size: 0.8em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #ab4 ;
	text-decoration: none ;}
ul#menu li a:hover
{
	background: url(bg_menu.gif) repeat-x 0 0 ;
}






Pourtant je ne comprend pas je me suis inspiré de votre tuturiel crér un site en 5 etapes et ça ne fonctionne pas Smiley confus

Autres question:
Pourquoi lrosque je met la fonction float: right mon menu se trouve complètement inverssé ? Ex Accueil , Plan du site, forum deviens forum, plan du site, accueil. La seul solution minable que j'ai trouver c'est d'inversser mon menu sur ma page html pour obtenir le menu comme je le souhaite sur ma page une fois ma page en test...

Merci a tous pour votre aide
Modifié par worms30 (20 Sep 2008 - 01:39)
Bonjour,

Pour le premier problème impossible de te répondre : trop peu d'information ... le code n'est pas suffisant il va nous falloir une page en ligne pour constater et essayer de résoudre le problème. Smiley cligne

En ce qui concerne ton deuxième problème, ce qui se fait généralement est de mettre le parent des éléments en "float: right;" puis les dits éléments en "float: left;" (sans oublier d'appliquer le contexte de formatage sur leur parent). Smiley smile

worms30 a écrit :
Pourquoi lorsque je met la propriété float à right mon menu se trouve complètement inversé ?


Le premier élément va à droite, le deuxième suit la manœuvre en allant à droite en restant à la gauche du premier et ainsi de suite ... c'est le fonctionnement normal ... si cela te semble obscur n'hésite pas à consulter les différentes ressources sur les positionnements en CSS. Smiley cligne

Bonne continuation.
Romain
Modifié par yodaswii (20 Sep 2008 - 01:17)
Voila yodaswii, j'ai mi complètement se que tu m'a demander en esperent que ça puisse vous être utile...

Merci a pour ton aide
worms30 a écrit :
... lorsque je fais un test sur Firefox mon contenu n'apparait pas


Le problème provient de tes commentaires que Firefox considère comme mal fermés (à juste titre d'ailleurs) du fait de la ribambelle de "-" avant la fermeture de commentaire. Smiley cligne

Pour rappel les commentaires : <!-- ... -->.

N'oublie pas de mettre un petit [Résolu] dans le titre de ton sujet. Smiley smile
Modifié par yodaswii (20 Sep 2008 - 01:37)
C'était bien ça, merci encore. Mais pourtant cette fonction est autoriser en balisage HTML pourquoi elle fais déconner l'affichage ? Y a t'il des endroi strtégique pour placer cela ?
a écrit :
C'était bien ça, merci encore. Mais pourtant cette fonction est autoriser en balisage HTML pourquoi elle fais déconner l'affichage ? Y a t'il des endroi strtégique pour placer cela ?


Le problème n'est pas lié à l'emplacement de tes commentaires mais à leurs fermetures ... ainsi dans ton code ces commentaires ne sont jamais fermés (le navigateur ne trouve pas le "-->" indiquant la fermeture de commentaire). Smiley ravi