28172 sujets

CSS et mise en forme, CSS3

Problème div probablement Z-index

Bonjour à Tous,

Voila, j'avance bien sur mon premier site web, mais je suis confronté à des drôles de choses, certainement du au bricolage de mon css lol.
Voila je vous expose cela :
- sur la page suivante : http://www.nsink.fr/design/design_stag.html je n'arrive plus à cliquer sur le menu . Je pense que la superposition pose problème, j'ai essayé les z-index mais ca marche pas.
- sur cette même page et sur toutes les pages : nikel tout fonctionne sur Mozilla mais sur Internet le menu est décalé : comprend pas du tout pourquoi
- et sur la page du mooflow : www.nsink.fr/design.html Mozilla c nikel, sur internet explorer ca fait pourri, image degeulasse. (peut être la résolution des images qui n'est pas adapté), allez voir sur chrome c du n'importe quoi aussi !!

Voila mais pourquoi il y a des divergences entre les navigateurs Smiley bawling

Je sais que ca fait beaucoup de question, mais pour moi ca fait beaucoup de mystère, je débute et j'apprends grâce au forum ! merci a vous
Modifié par dreadstock (17 Apr 2009 - 15:33)
Salut,

J'ai arrangé le code avec HTML Tidy, mais rien n'a changé.
Ma page à toujours les problèmes cités ci-dessus.

Smiley decu


Voici le code html de la page :

<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see  www.w3.org"  />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arch-FS Architecte Marseille</title>
<link href="css/bases.css" rel="stylesheet" type="text/css" />
<link href="css/stag.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
pre { display:none }
/*]]>*/
</style>
<title>Arch-fs Chaise/Chair design Stag</title>

<script type="text/javascript" src="js/jquery/jquery-1.2.6.js">
</script>
<script type="text/javascript" src="js/jquery/jquery.cycle.all5924.js">
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    // run the code in the markup!
    $('table pre code').not('#skip,#skip2').each(function() {
        eval($(this).text());
    });  
        });

//]]>
</script>
</head>
<body>
<div id="container">
<div id="conteneur_haut">
<div id="logo">
<div id="main_left"></div>
</div>
<div id="main_right">
<div id="arrow_left"><a id="prev2" href="#" name="prev2"><img src="images/left.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div>
<div id="arrow_right"><a id="next2" href="#" name="next2"><img src="images/right.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div>
</div>
<table cellspacing="20">
<tr>
<td>
<div id="cycle">
<div id="s2"><img src="images/stag1.png" width="430" height="250" alt="** PLEASE DESCRIBE THIS IMAGE **" /> <img src="images/stag2.jpg" width="430" height="250" alt="** PLEASE DESCRIBE THIS IMAGE **" /> <img src="images/stag3.jpg" width="430" height="250" alt="** PLEASE DESCRIBE THIS IMAGE **" /></div>
<pre>
<code class="mix">
    $('#s2').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    next:   '#next2',
    prev:   '#prev2'
});</code>
</pre></div>
</td>
</tr>
</table>
</div>
<ul id="menu">
<li><a href="index.html" class="">AGENCE</a></li>
<li><a href="projets.html" class="">PROJETS</a></li>
<li><a href="design.html" class="">DESIGN</a></li>
<li><a href="contact.html" class="">CONTACT</a></li>
</ul>
<div id="copyright">Copyright@2009 NSink Prod</div>
</div>
</body>
</html>


et voici le code CSS de la page Html :

@charset "utf-8";
/* CSS Document */

#conteneur_haut {
	height:450px;
	width:1003px;
}
#logo {
	position:absolute;
	background-image:url(../images/logo.png);
	background-repeat:no-repeat;
	height:400px;
	width:318px;
	float:left;
	margin:40px 0px 0px 100px;
	z-index:0;
}
	
#main_left{
	margin:150px 0px 0px 0px;
	height:inherit;
	width:290px;
}

#main_right {
	position:relative;
	height:300px;
	width:800px;
	left:300px;
	top:150px;
	margin:0px 20px 0px 0px;
	z-index:10;
}
img {
	border:0;
}
#copyright {
	width:300px;
	float:right;
}
#arrow_left {
	position:relative;
	left:100px;
	top:100px;
	z-index:7;
}
#arrow_right {
	position:absolute;
	top:100px;
	left:600px;
	z-index:7;
}
#cycle {
	position:absolute;
	overflow:hidden;
	width:202;
	height:202;
	margin:-170px 0px 0px 435px;
	
}


Et le code de base pour toutes les pages du site :


@charset "utf-8";
/* CSS Document */

body {
	background-color:#000;
	margin: 0 0 10px 0;
	background-position:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}

#container {
	margin: 0px auto 0 auto;
	background-image:url(../images/homepage.png);
	background-repeat:no-repeat;
	height:610px;
	width:1003px;
}


#menu {
	height: 100px;
	margin:20px 0px 0px 55px;
	z-index:6;
}
ul#menu li{
	list-style-type: none ;
}
ul#menu li a{
	color:#666;
	text-decoration: none ;
	font-weight:400;
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	line-height: 30px;
	
}
ul#menu a:hover{
	color:#333;
}

.h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#FFF;	
}



Merki à vous
Modifié par dreadstock (17 Apr 2009 - 20:03)
#main-left recouvre complètement ton menu, cherche de ce côté là Smiley cligne

Ta façon de faire mériterait de nombreux changement (par exemple éviter les tableaux et les liens sur les images) mais c'est un bon début pour un premier site web. Continue sur cette voie !


Je te conseille aussi un "a { outline: none; }" pour qu'aucune bordure ne soit appliquée en surbrillance des flèches cliquées.

PS : AUCUN CARACTÈRE AVANT LE DOCTYPE (ni prologue xml, espace ou saut à la ligne) ! ça fait sauter le modèle de boîtes sous IE6.
Sujet clos
Aller à