ok, alors voici ce le code de ma page:
<!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>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design.css" />
<title>Kit ggraphique à télécharger gratuitement : par Kulko et Krek</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="Zwatla.com : Kits ggraphiques à télécharger gratuitement : par Kulko et Krek" />
<meta name="keywords" content="kit graphique, kits graphiques gratuits" />
<script type="text/javascript">
<!--
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">
.gauche {float : left; width : 265px ; height : 450px; background-image : url(images/001.jpg) }
.droite {float : left ; width : 600px ; height : 450px; overflow : auto; margin-left : 20px }
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/couple-1.jpg','images/mariage-2.jpg','images/couple-3.jpg')">
<div class="conteneur">
<div class="gauche">
<ul class="menu">
<li><a href="#">accueil</a></li>
<li><a href="#">contact</a></li>
<li class="menuexept"><a href="#" >liens</a></li>
</ul>
</div>
<div class="droite">
<h1>Reportage Mariage</h1>
<div class="hr"><hr /></div>
<p>Un mariage est avant tout un reportage dont le défi est de retranscrire de façon la plus fidèle cette journée unique.
</p>
<p>Notre travail est d'être présent toute la journée en sachant se faire oublier. </p>
<p>Nous vous proposons plusieurs formules afin de répondre au mieux à vos attentes.<p>
<p>Vous trouverez ci dessous les différetns moments de la journée. Nous laissons parler notre expérience qui peut vous être utile.
N'hésitez pas d'ailleurs à demander conseils
auprès de vos différents prestataires pour vous aider à préparer cette journée. Sachez que si vous êtes bien entourés par de vrai professionnel
(DJ, Traiteur, salle, filmeur, photogrpahe...) Vous pouvez avoir la certitude que
votre mariage est déjà réussi à 90% <p>
<a href="#" class="class2" onclick="window.open('photo1.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_03.jpg" class="expo" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo2.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_02.jpg" class="expo2" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo3.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_01.jpg" class="expo2" alt=""/></a>
<div class="spacer"></div>
<h2>Les préparatifs</h2>
<div class="hr"><hr /></div>
<p>Le reportage débute au domicile où se prépare la future mariée. L'accent est mis sur les détails de la robe, de la coiffure ainsi que du maquillage.
On en profite aussi pour photographier les invités présents.<p>
<a href="#" class="class2" onclick="window.open('photo1.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_03.jpg" class="expo" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo2.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_02.jpg" class="expo2" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo3.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_01.jpg" class="expo2" alt=""/></a>
<div class="spacer"></div>
<h2>Le mariage: la mairie et l'église</h2>
<div class="hr"><hr /></div>
<p>Nous suivons le déroulement de la journée. Les photos de la mairie et de l'église sont faites sans déranger la cérémonie en respectant les
discours et les prières<p>
<a href="#" class="class2" onclick="window.open('photo1.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_03.jpg" class="expo" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo2.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_02.jpg" class="expo2" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo3.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_01.jpg" class="expo2" alt=""/></a>
<div class="spacer"></div>
<h2>Les photos de couples</h2>
<div class="hr"><hr /></div>
<p>Avant le jour du mariage, nous décidons ensemble des lieux et des heures pour le déroulement de la journée. Les photos de couples peuvent être faites
dans la nature, un jardin ou bien sur le lieu de la réception.La saison peut nous aider à choisir un lieu ainsi que le meilleurs moment pour la lumière.<p>
<a href="#" class="class2" onclick="window.open('photo1.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_03.jpg" class="expo" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo2.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_02.jpg" class="expo2" alt=""/></a>
<a href="#" class="class2" onclick="window.open('photo3.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_01.jpg" class="expo2" alt=""/></a>
<div class="spacer"></div>
<h2>Les photos des invités</h2>
<div class="hr"><hr /></div>
<p>Nous choisissons ensemble le moment le plus importun pour photographier vos invités. Afin que ce moment se passe le mieux possible, il faut prévoir un endroit facile
d'accès pour les personnes agés et à mobilité réduite ainsi que des rafraichissements
sur le lieu de la prise de vue. L'idéal est de faire les photos à la salle (s'il y a un extérieur)
au moment des rafraichissements (juste avant l'apéritif, des boissons non alcoolisées sont en en général servies).
<p> <a href="#" target="_blank" class="class2" onclick="window.open('photo1.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');" onmouseover="MM_swapImage('milieu','','images/couple-3.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/fall_03.jpg" class="expo" alt=""/></a>
<a href="#" target="_blank" class="class2" onclick="window.open('photo2.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_02.jpg" class="expo2" alt=""/></a>
<a href="#" target="_blank" class="class2" onclick="window.open('photo3.html', '_blank', 'width=256,height=450,left=182,top=230,scrollbars=no');"><img src="images/fall_01.jpg" class="expo2" alt=""/></a>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
<div class="signature">
<p class="notop">Copyright 2005 | designed by <font color="#000000"><a href="http://www.sgfx.info">Kulko</a></font>
& <a href="http://www.zwatla.com"><font color="#000000">Krek</font></a>
<br>
Photos Copyright Quirici & Rostang <br>Tous droits réservés</p>
</div>
<div id="pop1"></div>
<div id="pop2"></div>
</div>
<div id="Layer1" style="position:absolute; width:301px; height:30px; z-index:101; left: 183px; top: 23px;"><font size="4" face="Verdana, Arial, Helvetica, sans-serif">ZOOMING.<font size="3">fr</font>
Studio photo</font></div>
<div id="pop2"></div></div>
<div id="Layer2" style="position:absolute; width:200px; height:30px; z-index:102; left: 173px; top: 105px;"></div>
<div id="en-tete">
<div id="navigation">
<dl>
<dt onmouseover="javascript:montre();">Portfolio</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Particulier</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="../site%20f/bienvenue.html">Portrait</a></li>
<li><a href="#">Mariage</a></li>
<li><a href="#">évènement familial</a></li>
<li><a href="#">Restauration vieilles photos</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Entreprise</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Plaquette publicitaire</a></li>
<li><a href="#">Reportage</a></li>
<li><a href="#">Pack shot</a></li>
<li><a href="#">Création publicitaire</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">En ligne:</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#"></a></li>
<li><a href="#">Visionner un reportage et achetez vos photos </a></li>
<li><a href="#">Boutique</a></li>
<li><a href="#">Tirage de vos photos</a></li>
<li><a href="#">Catalogue imprimeur</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();">Portfolio</dt>
</dl>
</div>
</div>
</body>
</html>
Et mon fichier CSS:
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin-top: 30px;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation {
position: absolute;
top: 47px;
left: 183px;
z-index:100;
width: 100%; /* précision pour Opera */
}
#navigation dl {
float: left;
width: 12em;
}
#navigation dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #e8efb9;
border: 1px solid gray;
margin: 1px;
}
#navigation dd {
display: none;
border: 1px solid gray;
}
#navigation li {
text-align: center;
background: #fff;
}
#navigation li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#navigation li a:hover, #menu dt a:hover {
background: #e8efb9;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 70px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
</style>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 0.8em;
background-color: white;
overflow : hidden;
color : black;
scrollbar-base-color : #333;
scrollbar-arrow-color : #ccc
}
.conteneur {
background-color: transparent;
margin-top: -210px;
margin-left: -450px;
position:absolute;
left: 50%;
top: 50%;
width: 900px;
height: 12px;
text-align : left;}
.gauche {float : left; width : 265px ; height : 450px; background-image : }
.droite {float : left ; width : 600px ; height : 450px; overflow : auto; margin-left : 20px }
p {margin : 0 ; padding : 0 50px 0 0}
h1 {margin : 0 0 5px 0 ; padding : 0; font-size : 19px}
h2 {margin : 10px 0 5px 0 ; padding : 0; font-size : 15px}
.expo {float : right; margin-right : 40px; border: 0}
.expo2 {float : right; margin-right : 0; border: 0}
div.hr {float : left;
height: 5px;
background: #eee scroll center;
margin : 5px 0 15px 0 ;
padding : 0;
background : #fff url(images/hr.jpg) left top no-repeat;
width : 530px;
}
div.hr hr {
display: none; padding :0;
}
p {margin: 0 0 10px 0;}
.notop {margin: 0 0 0 0;}
a {color : #fff ; text-decoration : underline}
a:hover {color : #fff ; text-decoration : underline}
.spacer {clear : both ; height : 13px; }
ul, li {
margin :0;
padding : 0 ;
list-style : none ;}
.menu {margin :20px 0 0 18px ; text-transform : uppercase ; font-size : 12px ; font-weight : bold}
.menu li {float : left }
.menu li a {color : #fff ; text-decoration : none ; background : url(images/boot.jpg) right bottom no-repeat; padding-right : 5px ; padding-left : 5px ;}
.menu li a:hover {color : #CCFF00 ; text-decoration : none }
li.menuexept a {color : #fff ; text-decoration : none ; background : url(images/no.jpg) right bottom no-repeat; padding-right : 5px ; padding-left : 5px ;}
li.menuexept a:hover {color : #CCFF00 ; text-decoration : none }
.copy {border : none}
.signature {
text-align : center ;
width : 300px;
font-size: 10px;
margin-left : 5px ;
margin-top : 0}
color : black
Comme vous pouvez le constater, j'adapte un kit graphique entièrement en CSS que j'ai téléchargé. Dans un premier temps je souhaite intégrer un menu deroulant horizontal (provenance tuto alsacreations) Mon soucis donc c'est que ce menu n'est pas centré et lorsqu'on réduit la fenetre de son navigateur il se met n'importe comment dans la page!
D'avance merci pour votre aide!
[/i][/i][/i][/i][/i][/i]
