28172 sujets

CSS et mise en forme, CSS3

Pb mise en page css internet explorer et firefox/safari

bonjour,
je suis en train de refaire le design de mon site internet et une fois de plus je me retrouve avec des problemes de mises en page par rapport a firefox et safari.

sous ie j'ai bien mon menu qui s'affiche au bon endroit et aux bonnes dimessions (largeur 700px) alors que sous firefox ou safari mon menu se retrouve tout en bas de ma page et a pour dimenssion une largeur + importante (avec background le texte est bien cardé dans les 700px).

pourriez vous m'aider a résoudre se probleme ?
merci

mon css :

@charset "utf-8";
/* CSS Document */
body {
	margin:0;
	padding:0;
	font-family:Arial, Verdana, Geneva, sans-serif;
	font-size:12px;
}

h1 {
	background:url(../images/h1-puce.png) no-repeat;
	font-size:14px;
	color:#333;
	font-weight:bold;
	padding-left: 25px;
	margin:5px 0 5px 0;
	display: block;
	height:25px;
	line-height:25px;

}

.clear {
	clear:both;
}



/*/////////////////////////////////////
		    Le Header La Banniere
/////////////////////////////////////*/
#top {
	position:relative;
	background-image:url(../images/haut.png);
	width:875px;
	margin: 0 auto;
	height:179px;
}


/*/////////////////////////////////////
		    Le conteneur
/////////////////////////////////////*/
#conteneur {
	width:875px;
	margin: 0 auto;
}

#infogauche {
	background-image:url(../images/fd-info-gauche.png);
	background-repeat: no-repeat;
	width:135px;
	height:711px;
	float:left;
	padding:20px;

}
/*/////////////////////////////////////
		    Le menu
/////////////////////////////////////*/
ul#menu {
	background-image:url(../images/fd-menu.png);
	background-repeat:repeat-x;
	margin:0 auto;
	list-style-type:none;
	width:700px;
	position:relative;
	display:block;
	height:50px;
	font-size:12px;
	float:right;
}


ul#menu li {
	display:block;
	float:left;
	margin:0;
	padding:0;
}
ul#menu li a {
	display:block;
	float:left;
	color:#FFFFFF;

	text-decoration:none;
	padding:8px 8px 0 7px;
}
ul#menu li a:hover {
	color:#99CC00;
}
ul#menu li a:active{
	height:22px;
	float:left;
	margin:0;
}

/*/////////////////////////////////////
		    Le contenu
/////////////////////////////////////*/
#contenu {
	margin:5px;
	width:690px;
	height:662px;
	float:right;
}

/*/////////////////////////////////////
		    Le footer Le Bas
/////////////////////////////////////*/
#bas {
background-image:url(../images/fd-bas.png);
background-repeat:repeat-x;
	width:875px;
	height:69px;
	margin: 0 auto;
}


#contenuaccueil {
	background-image:url(../images/fd-accueil.png);
	background-position:top;
	background-repeat:no-repeat;	
	width:670px;
	padding: 10px;
	
} 

#bienvenu {
	width:670px;
	height:250px;
} 

.photodumois{
	width:245px;
	float:left;
	padding:0 10px;

}
.txtbienvenu{
	width:400px;
	float:right;
}

.cadregris {
	background-image:url(../images/cadre-gris.png);
	background-position: top;
	background-repeat:no-repeat;
	width:183px;
	height:283px;
	padding:15px 10px;
	float: left;
	position:relative;
}
.cadregris + .cadregris {
	position:relative;
	margin-left: 30px;

}

.bandeverte {
	background-image:url(../images/bande-verte.png);
	background-position: top;
	background-repeat:no-repeat;
	width:190px;
	height:400px;
	padding:15px 10px;
	float: left;
	position:relative;
	margin-left: 30px;

}



et ma page html :


<body>
<div id="top">Photos Vosges , regardez, respriez aimez les Vosges. Un site pour les amoureux de la nature


</div>
    
    
<div id="conteneur">

	<div id="infogauche">
		<h1>Photo aléatoire</h1>
		<?php 
		include('http://www.photos-vosges.fr/galerie/albums/imgalea.php');  // j'appel l'entete du site
		?>
        <p>La galerie »</p>
        
        <h1> News du site </h1>
        
        <?PHP
		$db = mysql_connect(xxxxx, xxxxx, xxxxx); 
		mysql_select_db(xxxxx,$db);
		
		$sql = "SELECT *, DATE_FORMAT(date,'%d/%m/%Y') as date FROM photosvnews ORDER BY id DESC LIMIT 1"; 
		$req = mysql_query($sql) or die('Erreur SQL !'.$sql.''.mysql_error()); 
		while($data = mysql_fetch_array($req)) 
		{ ?>
        <?PHP echo $data['nom']. '<br/>'; ?>
		<?PHP echo 'le ' .$data['date']. '<br/>'; ?>
		
		<?PHP echo  substr($data['news'], 0, 100). '... '; ?>
		<?php echo '<a href="http://www.photos-vosges.fr/pages/news-vosges.php">Lire la suite ?</a><br>';?>
        <?PHP
		} 
		?>
	</div>

	<ul id='menu'>
			<li><a href='http://www.photos-vosges.fr' title="Retour à l'accueil" >La Galerie</a></li>
			<li><a href='http://www.photos-vosges.fr'>Panoramiques</a></li>
			<li><a href='http://www.photos-vosges.fr'>PPS Vosges</a></li>
			<li><a href='http://www.photos-vosges.fr'>Forum</a></li>			
    		<li><a href='http://www.photos-vosges.fr'>Partenaires</a></li>
			<li><a href='http://www.photos-vosges.fr'>Livre d'or</a></li>
            <li><a href='http://www.photos-vosges.fr'>Infos +</a></li>
			<li><a href='http://www.photos-vosges.fr'>Contact</a></li>
	</ul> 
    
    
    
    
	<div id="contenu">
	  <div id="contenuaccueil">	  
		<div id="bienvenu">
       	  
		  <div class="photodumois">
            <h1>La photo du mois</h1>
            <img src="images/photo-du-moi.gif" alt="LA photos du moi" />
            Photo extraite de la galerie merelle
            </div>
            
            
            <div class="txtbienvenu">
            <h1> Bienvenue sur photos Vosges </h1>
			Nous sommes très heureux de vous présenter ce site consacré aux Vosges et ses paysages. Le but de ce site est de vous faire partager notre passion pour les paysages Vosgiens à travers différentes rubriques. Vous trouverez ainsi, une galerie photos où vous pourrez commenter chacune des photos, des panoramiques animés, un forum de discussions pour participer et bien d'autres pages accessibles par les menus que vous trouverez à gauche et à droite de chaque page. En espérant vous voir de plus en plus nombreux... Fabrice et Laetitia   
            <h1> Les dérnières photos ajoutées</h1>
            <?php 
			include('http://www.photos-vosges.fr/galerie/newrssmini.php');
			?>
            </div>
            <div class="clear"></div>
			</div>
            
       
			<div class="cadregris cadregris-first">
			<h1> Trombine Internautes</h1>
            <?php  
				$db = mysql_connect(xxxxx);				
				$nb = 3;               // Nombre d'affichages souhait&eacute;s sur une ligne
				// requ&ecirc;te SQL 
				$sql = "SELECT * FROM `photosnap` ORDER BY id DESC LIMIT 1";
				// envoie de la requ&ecirc;te
				$req = mysql_query($sql) or die('<u>Probleme SQL</u> : '.$sql.'-->'.mysql_error
				());  
				while($resultat = mysql_fetch_array($req)) {
				echo'' , $resultat['prenom'] , '</br>
				<img src="../pages/snap/' , $resultat['photo'] , '" alt="Capture Webcam"/> 
				</br>
				
				' , $resultat['date'] , '';}
				?>
			</div>

			
		<div class="cadregris">
	  	  <h1> Partenaire aléatoire</h1>
			<?php 
			include('http://www.photos-vosges.fr/pages/paralea.php'); // Nous appelons le partenaire aleatoire
			?>

		</div>
            
			<div class="bandeverte">
			<h1>Sur le Forum</h1>
			</div>            
	  </div>
        
    <div class="clear"></div>
	</div>
</div>
</body>

Modifié par fabrice88 (26 Feb 2009 - 17:43)
j'avance doucement dans mon nouveau design mais firefox me pose de vrai probleme de mise en page. heureusement que + de 80 % des gens utilisent IE.
Bref... j'ai toujours des decalage sous firefox et safari.

Si quelqu'un pouvait maidé.
Sujet clos
Aller à