28173 sujets

CSS et mise en forme, CSS3

Figer un script

bonjour,
j'utilise un de vos script qui est un menu horizontal, mais le soucis, c'est que quand la page d'un explrateur est plus petite que sa taille, il s'adapte à lataille de la page, et moi jesouhaie qu'il reste figer .
Alors pourriez vous me dire comment faire ?
Merci d'avance
totophe

voici le script

<!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>CVS.FR Produits de qualité</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8859-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="description" content="S'est un site pour vendre des vetements, du multimedias, de la maroquinerie" />
<meta name="keywords" content="vente, vetements, informatique, image, son, maroquinerie" />
<meta name="author" content="Chrisnydo Ventes et Services" />

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:12px;
	top:12px;
	width:1030px;
	height:100px;
	z-index:1;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, Ã  modifier selon vos besoins */
top: 125px;
left: 11px;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 172px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 95%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
a {text-decoration: none;
color: black;
color: #222;
}

#Layer2 {
	position:absolute;
	left:235px;
	top:162px;
	width:524px;
	height:650px;
	z-index:3;
}
#Layer3 {
	position:absolute;
	left:792px;
	top:162px;
	width:251px;
	height:650px;
	z-index:4;
}
-->
</style>

</head>
<body>

<div id="Layer1">
<div align="center"><img src="Titre du site.bmp" alt="titre du site avec slogan"  width="1030" height="100" align="absmiddle" position="absolute"/></div>
</div>

<div id="Layer2">
<br/>
<strong>Accueil</strong>
</div>

<div id="Layer3">
<br/>
Et demain aussi !!!
</div>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="index.html" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Vêtements</dt>
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="vetements-homme.html">Homme</a></li>
				<li><a href="vetements-femme.html">Femme</a></li>
				<li><a href="vetements-bebe-enfant.html">Bébé / Enfant</a></li>
		  </ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Informatique</dt>
		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="pc-de-bureau.html">Pc de bureau</a></li>
				<li><a href="pc-portable.html">Pc portable</a></li>
				<li><a href="accessoires.html">Accéssoires</a></li>
				<li><a href="peripheriques.html">Périphériques</a></li>
				<li><a href="applications-logiciels.html">Applications / Logiciels</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Image & Son</dt>
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="tv-ecran.html">TV / Ecrans</a></li>
				<li><a href="lecteurs-en-tous-genres.html">Lecteurs en tous genres</a></li>
				<li><a href="home-cinema.html">Home Cinéma</a></li>
				<li><a href="hifi.html">Hifi</a></li>
				<li><a href="photo-video.html">Photo / Vidéo</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Maroquinerie</dt>
		<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="ceintures.html">Ceintures</a></li>
				<li><a href="porte-feuille.html">Porte feuille</a></li>
				<li><a href="porte-monnaie.html">Porte monnaie</a></li>
				<li><a href="sacs-sac-a-main.html">Sacs / Sac à main</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">A propos de nous</dt>
		<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="qui-sommes-nous.html">Qui sommes nous</a></li>
				<li><a href="les-mentions-legales.html">Les mentions légales</a></li>
				<li><a href="nos-partenaires.html">Nos partenaires</a></li>
				<li><a href="nos-sites.html">Nos sites</a></li>
			</ul>
	  </dd>
	</dl>

</body>
</html>
Sujet clos
Aller à