28173 sujets

CSS et mise en forme, CSS3

[Résolu avec la FAQ !!!!]Optimisation de mise en forme : pb avec float

Bonjour

je suis en reprendre un vieux css travaillant avec ie5 (pour mac), et surtout safari et firefox.
Ce matin je teste avec ie6 sur un PC et catastrophe ... c'est horrible ... tout ce que j'ai mis en float n'est pas du tout où cela est attendu ...

Je savais qu'ie n'était pas très respectueux des normes ... mais à ce point la c'est fou. A tel point que jeme demande si ce n'est pas mon code qui déconne.

En tout état de cause, il faut que j'avance ... comment faire pour avoir le plus de compatibilité avec tous les navigateurs ?
Faire des choses plus simples ?
Oublier les float et ne travailler qu'en absolu ?
Modifié par rspir (28 Aug 2006 - 22:00)
Voila le css : 

body { 
font-family: arial; 
background: #FFFFFF ;
margin:0;
padding:0;
font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
}

p						{ font-size: 13px; }
a						{ text-decoration:none; color: #336699;}
a:hover					{ text-decoration:underline;}

/*menu gauche : H1 à définir pour un titre*/
#menu					{ position:relative; height:576px; width:170px;  background: url(../images/menu.jpg) top left no-repeat; }
#menu ul				{ position:absolute; top:140px; width:135px; padding-left:10px;list-style:none; }

#menu h2				{ color:#45555F; font-weight:bold; font-style:italic; font-size:14px;margin-top:10px; padding-left:5px;}

#menu li a				{ font-size:13px; padding-left:7px;}


/*header*/
#header					{ position:absolute; top:0px; left:170px; width:840px; height:120px; background: white url(../images/bando_bleu.gif) top left no-repeat;}

#header h1				{ font-family:arial; color:white; font-weight:normal; font-size: 23px; margin-top:16px; letter-spacing:1px; text-align:center; width:350px;}

#copyright 	 			{ float:right; padding-right : 5px;}
#copyright p 			{ font-size: 11px; text-align:right; height:5px;}	

#bandeau				{ float:left; margin-top: 26px; width:600px;  font-size: 13px;font-family:arial;}
#bandeau	p			{ margin:0px; }

#mnuho					{ position:absolute; top:44px; left:-40px;}
#mnuho ul 				{ list-style-type:none; font-family:arial; font-size:11px; font-weight:bold;}
#mnuho li				{ display:inline;text-decoration: none; margin-right:22px; margin-left:22px;}
#mnuho a 				{ color: #5399C8; font-family:arial; font-size:11px; font-weight:bold; }
#mnuho a:hover			{ color: #8E8E8E; text-decoration:none;}


/*Corps*/
#content 				{ position:absolute; top:110px; left:168px; background: pink; width: 840px; }


et voila l'htm

<!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" lang="fr" xml:lang="fr">

<head>
<title>Ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link href="css/flash.css" rel="stylesheet" type="text/css">
</head>

<body>
	

<div id="menu" >
	<ul>
		<li><a href='#'>Menu 1</a></li>
		<h2>Catégorie</h2>

		<li><a href='#'>Menu 2</a></li>
		<li><a href='#'>Menu 3</a></li>		
		<li><a href='#'>Menu 4</a></li>		
		
	</ul>
</div>


<div id="header">
	<div id="copyright">
		<p>
		<?php
		setlocale (LC_TIME, 'fr_FR.ISO8859-1') ; 
		echo strftime("%A %d %B %Y"), " (Semaine ", date("W"),")" 
		?>
		</p>
		<p>Dernière mise à jour le 28/08/06</p>
	</div>
	
		<h1>Titre</h1>

		<ul id="mnuho">
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a></li>
			<li><a href="#">Menu 3</a></li>
			<li><a href="#">Menu 4</a></li>
		</ul>		
	<div id="bandeau">	
			
		<p><marquee onmouseover=this.stop() onmouseout=this.start() BEHAVIOR='scroll' scrollamount=3 scrollDelay=50 Truespeed direction=left>ce sera le bandeau</marquee></p>
			
	</div>
</div>
<div id="content">
Le contenu
</div>

</body>
</html>

Modifié par rspir (28 Aug 2006 - 21:59)
Tout est réglé avec pas mal d'astuces de la FAQ ...

Je vous la recommande !!!!!!!
Modifié par rspir (28 Aug 2006 - 21:57)
Sujet clos
Aller à