18041 sujets

Questions générales et questions de débutants

[Résolu] Apparence différente selon les navigateurs

JennyParis a écrit :
Bonjour,
Je reviens vers vous car malgré mes recherches je ne trouve pas quel est le problème de mon site qui s'affiche différemment selon les navigateurs utilisés et les plateformes Mac ou PC… Smiley sweatdrop
J'avais posté cette question dans la catégorie css car je pensais que mon pproblème se situait à ce niveau, mais n'ayant pas eu de réponse j'en conclu que j'avais posté au mauvais endroit et je m'en excuse…

L'adresse du site est la suivante : http://www.maschinenhaus-essen.de/

Tout fonctionne sur Safari (mac), les images n'apparaissent pas mais le diaporama fonctionne sur Firefox (mac)

sur PC autre problème sur Firefox et Explorer le diaporama apparait devant le logo alors qu'il devrait être derrière…

voici le code source :
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="Maschinenhaus, Maschinenhaus Essen, Produktionsort der Künste, Kunstverein, Kulturverein, Kunstverein Essen, Kunst, experimentelle Kunst, experimentelle Künste, Künstlerresidenz, Künstleratelier, Tanz, Theater, Tanztheater, Performance, Musik, Konzert, Jazz, bildende Kunst, zeitgenössische Kunst, Carl Stipendium, Carl Stipendium e.V., Zeche Carl, zechecarl, Schacht carl, Ruhrtriennale, Folkwang, Physical Theatre, Kunststipendium, Stipendium"> 
	<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="styles/modele03.css" media="screen" />
    <link rel="shortcut icon" href="/images/favicon.ico">
</head>

<body>

<div id="global">
<div id="right">
        <div id="logo"><img src="/images/logo.png" alt="" width="255" height="193" /></div>
    <div class="content">
        <h1>PRODUKTIONSORT<br>
        DER KÜNSTE</h1>
        <br />
<p><bold>Rückblick</bold><br>
<h2>FOLKWANG PHYSICAL<br />
THEATRE FESTIVAL</h2><br />
<font face="Georgia, Times New Roman, Times, serif" font-color="#ffffff">
<a href="http://www.ptfestival.de" target="_blank">www.ptfestival.de</a></font>
<br />  <br /><br />
Ausblick<br />
<h2>RURHRTRIENNALE<br />
  KONZERTE IM<br /> 
MASCHINENHAUS</h2>
	
<font face="Georgia, Times New Roman, Times, serif" font-color="#ffffff"><br/>Jeden Montag ab 20. August 2012
<a href="http://www.ruhrtriennale.de/de/programm/spielstaetten/machinenhaus/" target="_blank">www.ruhrtriennale.de</a></font></p>
<br>
    </div> 
  </div>
  <!-- #entete -->
<div id="entete">
<ul>
	<li><a href="http://www.facebook.com/MaschinenHausEssen" target="_blank"><img src="http://www.maschinenhaus-essen.de/images/facebook.png" alt="" width="16" height="16" /></a></li>
	<li><a href="http://twitter.com/maschinenhaus" target="_blank"><img src="http://www.maschinenhaus-essen.de/images/tweeter.png" alt="" width="16" height="16" /></a></li>
</ul>
<br />
<br />
<p><font face="Arial, Helvetica, sans-serif"><font color="#000000">Diese Seite befindet sich im Aufbau. <a href="http://www.maschinenhaus-essen.de/mhe-alt" text-decoration="underline" title="former website" target="_blank"> Zur bisherigen Webseite » </a></font></font><p>
                             <div id="entete img"><object type="application/x-shockwave-flash" 
							data="http://www.maschinenhaus-essen.de/media/dewslider.swf?xml=http://www.maschinenhaus-essen.de/media/dewslider.xml" 
							width="700" height="467">
							<param name="movie" value="http://www.maschinenhaus-essen.de/media/dewslider.swf?xml=http://www.maschinenhaus-essen.de/media/dewslider.xml"/>
					</object></div> 
</div>
	<div id="contenu">
			<p><br />
<h1>Das Maschinenhaus Essen</h1></p>
			<p><font face="Arial, Helvetica, sans-serif"><br/>Das Maschinenhaus Essen bietet Raum für künstlerische Experimente und <br />
            Grenzgänge.<br />
	Es ist ein Ort, an dem sich Schaffende und Interessierte im Erleben von Kunst<br />
unmittelbar begegnen und vernetzen können. <br /><br />Der atmosphärisch einzigartige
Backsteinbau wird den Künstlern als Labor auf Zeit <br />zur Verfügung gestellt, um sich
darin entfalten und ihn neu inszenieren zu können. <br />Dabei spielt die Zuordnung zu 
einer bestimmten Kunstsparte keine Rolle, vielmehr <br />interessiert die Schaffung neuer 
Eindrücke durch die Querung der Künste.<br /><br />

Besonderer Wert wird darauf gelegt, dass der Entstehungsprozess einer Arbeit <br />
gleichrangig ist mit dem fertigen Werk und daher auch in der Entwicklungsphase<br />dem 
Publikum zugänglich gemacht wird. <br /><br />Kuratiert wird das Programm vom Kunstverein 
Carl Stipendium e.V.</font></p>
<br />
<br />
<br />
<br />
		<h2>Kontakt</h2>
<p><font face="Arial, Helvetica, sans-serif">Carl Stipendium e.V.<br />
Wilhelm-Nieswandt-Allee 100 <br />
45326 Essen<br />
<br />
Telefon 0201-8378424<br />
<a href="mailto:info@maschinenhaus-essen.de">info@maschinenhaus-essen.de</a></font></p>
	</div><!-- #contenu -->

	<div id="pied">    
	  <hr />	
		<p id="copyright">
			<font face="Georgia, Times New Roman, Times, serif">Drucken    Empfehlen                                                 <a href="/html/kontakt.html" target="_new" text-decoration="none";>kontakt / impressum</a></font>
		</p>
  </div><!-- #pied -->

</div><!-- #global -->

</body>
</html>


et le css :
/* --- COUoRS --- */

body {
	color: #FFF;
	background-image:url(../images/bg.png);
}

a {
	color: #FFFFFF;
}

a:hover, a:focus {
	color: #FF0066;
}

strong {
	color: #000;
}

/* Page */
#global {
	background: #FFF;
}

/* Navigation */
#navigation {
	background-image: #181A12;
}

#navigation a {
	color: #000;
}

#navigation a:hover, #navigation a:focus {
	background: #000000;
}

/* Contenu principal */
#contenu {
	color: #000;
	background: #FFF;
}

#contenu a {
	color: #000;
}

#contenu a:hover, #contenu a:focus {
	color: #000;
}

#contenu strong {
	color: #000;
}

/* Pied de page */
#pied {
	color: #000;
}


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}

body {
	padding: 0;
}

#global {
	min-height: 100%; /* -> 1 */
	width: 700px;
	overflow: hiden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

div#right {
	position: absolute;
	width: 255px;
	height: 100%;
	margin-left: 550px;  
  	top: 0;	
}

div#right div#logo {
	width: 100%;
	height: 193px;
	background-image: url(../images/logo_ok.png) 0 0 no-repeat ;
  	top: 0;
}

div#right div.content {
	background-color:#000 ;
	width: 90%;
	margin-top: 152px;
	padding: 15px;
}

div#right div.content h1 {
	font-size: 13pt;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}

div#right div.content h2 {
	font-size: 9pt;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFF;
	text-decoration: none;
}

div#right a {
	font-color:#ffffff ;
	text-decoration: underline;
	}

/* En-tête */
#entete {
	padding: 0 ;
}

#entete h1 {
	margin: 0;
}

#entete img {
	overflow: hidden;
	margin: 0 20px 10px 0;
}

#entete ul {
display: inline;
text-decoration: none;
color: #000;
}

#entete li {
	display: inline;
	list-style-type: none;
	padding-right: 20 px;
}

#entete a {
text-decoration: none;
color: #000;
}

#entete .sous-titre {
	margin: 0 15px 0;
}

/* Menu de navigation */
#navigation {
	padding: 12px 15px;
}

#navigation ul {
	margin: 0;
	list-style: none;
	text-align: center;
}

#navigation li {
	display: inline;
}
#navigation a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	padding: 20px 25px;
}

#contenu > :first-child {
	margin-top: 10px;
}

#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	padding: 15px 20px;
	font-size: .85em;
}

#pied p {
	margin: .5em 0;
}

#copyright {
	text-align: left;
	font-size: 1em;
}


merci d'avance pour votre aide généreuse !
Smiley confused
J'ai trouvé !
comme il s'agissait d'une animation Flash, il suffit de rajouter :
<param name="wmode" value="opaque">

qui permet de convertir l'objet Flash en un objet "normal" et de ne plus se mettre automatique ment au premier plan !

merci de votre aide.
Sujet clos
Aller à