28172 sujets

CSS et mise en forme, CSS3

Eternel combat avec IE...

Bonjour à tous,

je suis débutant en CSS, à vrai dire je m'y suis réellement plongé qu'hier dans la journée et depuis... je passe des heures et des heures devant mon PC à travailler ce "langage" et en imaginant les possibilités qu'il m'apportera.

Mais pour le moment, j'ai un petit problème que je n'arrive pas à résoudre.
Quelqu'un pourrait-il me dire ce qui ne va pas dans ce code:
/* CSS Document */
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #a9bcda ;
}


/* CSS Conteneur */
div#conteneur
{
	width: 900px ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #3A4876 ;
	background:  #fff;
}


/* CSS Header */
div#header
{
	height: 110px ;
	width: 900px;	
}
#header h1
{
	position:absolute;
	text-indent:-9999px;
	background:url(images/logo.jpg);
	width:164px;
	height:160px;
	margin:0 auto 0 auto;
}
#header h2
{
	position:absolute;
	text-indent:-9999px;
	background:url(images/barre_sup.jpg);
	width:736px;
	height:38px;
	margin:0 0 0 164px;
}
#header ul
{
	position: absolute;
	width: 736px;
	height: 52px;
	list-style-type: none;
	margin:38px 140px;
}
#header li
{
	display:block;
	float:left;
}
#header li a.w4{display:block;width:142px;height:52px;background:url(images/menu_04.jpg);text-indent:-9999px;margin: 0 0;}
#header li a.w1{display:block;width:94px;height:52px;background:url(images/menu_01.jpg);text-indent:-9999px;margin: 0 0;}
#header li a.w2{display:block;width:151px;height:52px;background:url(images/menu_02.jpg);text-indent:-9999px;margin: 0 0;}
#header li a.w3{display:block;width:116px;height:52px;background:url(images/menu_03.jpg);text-indent:-9999px;margin: 0 0;}
#header li a.w4{display:block;width:142px;height:52px;background:url(images/menu_04.jpg);text-indent:-9999px;margin: 0 0;}
#header li a.w5{display:block;width:155px;height:52px;background:url(images/menu_05.jpg);text-indent:-9999px;margin: 0 0;}
#header li a.w6{display:block;width:23px;height:52px;background:url(images/menu_06.jpg);text-indent:-9999px;margin: 0 0;}


Le code HTML:

<!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>Websens: découvrez les possibilités du Web !</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link rel="STYLESHEET" type="text/css" href="style.css"/>

<!--[if IE]>
 <style type="text/css">
 html pre
{
	width: 636px ;
}
</style>
<![endif]-->
</head>
	
	<body>
	<div id="conteneur">
	
	  <div id="header">
	  <h1>WebSens</h1>
	  <h2>BarSup</h2>


		<ul>
			<li><a href="accueil.html" class="w0">Accueil</a></li>
			<li><a href="accueil.html" class="w1">Accueil</a></li>
			<li><a href="quisommesnous.html" class="w2">Qui sommes-nous ?</a></li>
			<li><a href="nosservices.html" class="w3">Nos services</a></li>
			<li><a href="nosrealisations.html" class="w4">Nos realisations</a></li>
			<li><a href="contact.html" class="w5">Contact</a></li>
			<li><a href="accueil.html" class="w6">Accueil</a></li>

		</ul>
	  	  </div>

	  
	  
	  <div id="contenu">
			<h2>Un titre</h2>
			<p>Un paragraphe</p>
	  </div>
		
		<p id="footer">	
		<ul id="menufooter">
			<li><a href="contact.html">Contact</a></li>
			<li><a href="plandusite.html">Plan du site</a></li>
			<li><a href="mentionslegales.html">Mentions Légales</a></li>
		</ul>
		</p>
	</div>
	</body>
</html>

Regardez par vous-mêmes les différences notoires entre Firefox et IE que ce code impose: http://www.websensitive.c.la/


Si quelqu'un pouvait m'expliquer quelles sont mes erreurs, même si j'imagine qu'il s'agit du "position:absolute" et, comment y remédier ?


Merci à tous Smiley cligne

A bientôt,
Furox
Modifié par Furox (30 Jul 2008 - 05:07)
Bonjour Furox et bienvenu à toi sur le Forum Smiley smile

Après avoir jeté un coup d'œil à ta page, je constate que celle-ci est structurée par le biais de frame...
Ce qui est totalement déconseillé. Smiley confus

De plus, la mise en page que tu souhaites obtenir ne nécessite pas l'utilise de tels moyens. Smiley cligne

Je te conseille d'aller faire un petit tour du côté de notre galerie de mise en page.
Il y a certainement un exemple qui correspond à ce que tu aimerais coder.

Bon courage pour la suite ! Smiley biggrin
Merci beaucoup d'avoir pris le temps de répondre Cygnus, je vais allé faire un tour sur le lien que tu m'as envoyé Smiley cligne
Je suis bien allé voir le lien proposé par Gygnus, et ma page est désormais correctement divisée.

Seulement, il me reste un problème concret:http://www.defiseduction.fr/prog/css_3/

Comment faire pour que le menu soit placé sous la "barre_sup.jpg" et qu'il s'emboite correctement sous Firefox et sous IE ?
J'ai essayé un position:absolute; mais cela ne donne pas le même résultat avec les deux navigateurs...


Merci pour vos précieux conseils,
Furox
Modifié par Furox (30 Jul 2008 - 18:46)
Bonjour,

Je crois que tu prends le problème à l'envers. Tu utilises un gabarit dont tu ne comprends pas bien (voire très peu) le code, et tu tentes de l'adapter en faisant des modifications. Il faudrait plutôt apprendre CSS, c'est à dire à tous le moins apprendre de manière méthodique les bases du langage et le positionnement CSS, puis ensuite t'attaquer à ton design en utilisant tes nouvelles connaissances. Smiley cligne

À lire notamment: Comment débuter avec XHTML et les CSS ? Que sont les standards web ?

Voir aussi le tutoriel sur le positionnement CSS, et la série de trois articles sur le positionnement CSS sur Openweb.
Sujet clos
Aller à