18041 sujets

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

Quelle unités choisir pour une compatibilité maximale

Bonjour a tous,
Après un premier essai de création de site il y a une semaine, j'ai tout repris a zéro pour pouvoir etre en comformité avec les tutoriaux!!!
J'ai donc réussi a ce que ma page soie visible sur Mozilla et IE7, insérer un menu déroulant et insertion d'une page dans une autre... Smiley smile
Le soucis c'est que le rendu n'est pas le meme sur tous les écrans; par exemple: les 2 bandes roses qui entoures le menu sont fines sur mon pc et enormes sur tous les autres?????
voici le lien de la page : http://c.benhour.free.fr/asei5/index.php
et le code :

<!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>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape - Etape n&deg;4&nbsp;: Le titre et le menu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />

		<style type="text/css">
		body
		{
					
			margin:3%;
			
			padding: 0 ;
			text-align: center ;
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: #FFFFFF ;
			z-index: 5;
		}
		
		div#conteneur
		{
			HEIGHT: 30EM
			width: 94% ;
			margin: 0 auto;
			text-align: center ;
			border: 2px solid #000000 ;
			background: BLUE ;
			z-index: 6;
		}
		
		h1#header
		{
			
			height: 3EM;
			margin:0% ;
			background: #FFFFFF;
		}
		div#LIGNE1
		{   
			 
 			MARGIN: 0% ;
			height: 1PX ;			
			background: #F0037F;
			text-align: right;
			}			
			div#lignemenu
			{
			MARGIN:  ;
			height: 4EM ;			
			background: white;
			text-align: center;
			z-index:1;
			}
			div#menu
			{

top: 20%;
left: 1%;
z-index:100;
width: 100%;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 12%;
margin: 3PX;
block-align: center;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #Ffffff;
border: 0px solid #F0037F;
}
#menu dd {
border: 2px solid #F0037F;
position:absolute;
align: center;
}
#menu li {
text-align: CENTER;
background: #FFFFFF;
}
#menu li a, #menu dt a {
color: BLACK;
text-decoration: none;
display: block;
height: 100%;
border: 0px solid black;
}
#menu li a:hover, #menu dt a:hover {
background: #F0037F;
COLOR : #FFFFFF;
}
a {text-decoration: none;
color: black;
color: #222;
}	

		div#LIGNE2
		{
			height: 1PX ;			
			background: #F0037F;
			text-align: right;
			z-index:1;
			}				

		 div#frame
		 {
		 display:block;
		 height: 30EM ;
		 background: white;
		 overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
		 font-size: 14px;
		 z-index:1;
		 }	   
	    		
		div#footer
		{
			 MARGIN: 0% ;
			padding-right: 0px ;
			line-height: 2EM ;
			text-align: left ;
			color: red;
			background: #C4DB06;
		}
		</style>
		
	
			

		
		
	</head>
	
	<body>
	<div id="conteneur">		
    <h1 id="header" align="left">&nbsp;</h1>
	<div id="LIGNE1">l</div>
	<div id="lignemenu">
	<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"><i><u><span style="word-spacing:6px; letter-spacing:2px;">Accueil</span></u></i></a><i><u><span style="word-spacing:6px; letter-spacing:2px;"></span></u></i></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('Smenu1');"><span style="word-spacing:6px; letter-spacing:2px;">La soci&eacute;t&eacute;</span></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="index.php?page=historique">Historique</a></li>
					<li><a href="index.php?page=fin">fin</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('Smenu2');"><u><span style="word-spacing:4px; letter-spacing:2px;">Standard &agrave;&nbsp;Distance</span></u></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="fin.php">Sous-Menu 2.1</a></li>
					<li><a href="index.php?page=formulaire">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="index.php?page=formulaire">Demande d'Information</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Domiciliation Commerciale</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Secr&eacute;tariat</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">Location Salle de R&eacute;union</dt>
			<dd id="smenu5">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu6');">Autres services</dt>
			<dd id="smenu6">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu7');">Service en Ligne</dt>
			<dd id="smenu7">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	</div>
	</div>
		
	<div id="LIGNE2"></div>
	<div id="frame">
<?php 
$pages=array(
   'accueil'=>'accueil',
   'historique'=>'historique',
   'suite'=>'suite',
   'fin'=>'fin',
   'envoi'=>'envoi',
   'formulaire'=>'formulaire'
   
   
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
   include $pages[$_GET['page']].'.php';
else
   include 'accueil.php';
?>
</div>
		
		<div id="footer">R&eacute;alisation des codes xhtml &amp; css, du tutoriel et du design par Olivier Patry</div>
		</div>
<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>	

	
	</body>
</html>



Je ne pense que ce soit grand chose mais j'avoue a force de surfer sur le web je suis un peut perdu Smiley confus
Merci.
A bientot et bon Week end Smiley biggrin
Modifié par benhour (07 Jan 2007 - 14:51)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à