Bonjour à tous,
Voila j'entre dans le vif du sujet, je réalise un site web pour le mariage de mon frère.
Débutant, je suis parti d'un template que j'essaie de modifier.
 
Tout allait pour le mieux avant que je ne visualise mon site en sceenshot sur les différents navigateurs . Et là ...grosse désillusion, rien n'est bien positionné.
Pourtant sur IE 6 et Mozilla 3 tout allait bien. Mais j'ai tester différentes choses et aujourd'hui il n'y à plus que sur Mozilla 3 que l'affichage est correct.
J'ai epluché les forums ... sans succès et malheureusement mes connaissances en css - très limités -  ne me permettent plus d'avancer, et les futurs mariés ont besoin de leur site...
 
Bon promis, la prochaine fois je pèse le "oui" avant de me lancer dans un truc comme ça, mais là j'ai vraiment besoin de votre aide ...
 
adresse du site: http://s.metrop.free.fr/celinetejulien/www
 
CSS:
 
html
{
  overflow: hidden;
  height: 99%;
}
                         
body
{
  background: rgb(0, 71, 171);
  height: 99%;
  margin: 0;
  padding: 0;
  line-height: 150%;
  text-align: center;
}
 
*
{
  font-size: 1Opt;  
  font-family: Lucida Blackletter;  
  color: #000000;
  text-align: left;
}
 
.list
{
  margin: 5px;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
 
 
 
 
/* === Containers === */
 
 
 
#first_container
{
  margin: 0 auto 0 auto;  
  display: table;  
  height: 100%;  
  position: relative;  
  overflow: hidden;  
  width: 906px;
}
 
#second_container
{
  position: absolute;  
  top: 50%;
  vertical-align: middle;
  width: 100%;  
}
 
 
#third_container
{
  position: relative;  
  top: -460px;  
  width: 906px;
}
 
/* === Header === */
 
#header {
        margin: 5px auto 0 auto;  
  display: block;  
  height: 100%;  
  position: relative;  
   
  width: 906px;
  background-image:url('images/header.jpg');  
  background-repeat: no-repeat;    
}
 
   
 
 
/* === Menu === */
 
 
 
#menu
{
  height: 31px;
  padding-right: 0px;
  margin: 0px;
  list-style: none;    
}
 
#menu li
{
  float: right;
  display: block;
  width: 95px;  height: 35px;  
}
 
#menu a
{
  display: block;
  width: 90px;  height: 35px;  
  background-color: inherit;
  text-decoration: none;
  line-height: 31px;
  text-align: center;
}
 
#menu a:link, #menu a:visited
{
  color: #FFE1AC;  
  background-color: rgb(0, 71, 171);
}
 
#menu a:hover, #menu a:active
{
  background-image: url('images/taba2.jpg');
  color: #8B6330;  
}
 
#menuselected
{
  display: block;
  width: 90px;  height: 35px;  
  background-image: url('images/taba.jpg');    
  text-decoration: none;
  line-height: 31px;
  color: #ffffff;  
  text-align: center;
}
 
 
 
/* === Language menu === */
 
 
 
#submenu
{
  float: left;
  height: 31px;
  width: 300px;
  padding-left: 10px;
  margin-left:235px;
  list-style: none;    
 
}
 
#submenu li
{
  float: left;
  display: block;
  width: 95px;  height: 35px;  
}
 
#submenu a
{
  display: block;
  width: 90px;  height: 35px;  
  background-color: inherit;
  text-decoration: none;
  line-height: 25px;
  text-align: center;
}
 
#submenu a:link, #submenu a:visited
{
  color: #FFE1AC;  
  background-color: rgb(0, 71, 171);
}
 
#submenu a:hover, #submenu a:active
{
  background-image: url('images/tabb2.jpg');
  color: #8B6330;  
}
 
#submenuselected
{
  display: block;
  width: 90px;  height: 35px;  
  background-image: url('images/tabb.jpg');    
  text-decoration: none;
  line-height: 25px;
  color: #ffffff;
  text-align: center;
}
 
 
 
/* === Other Divs === */
 
 
 
 
.border
{
  background-color: #7FAFF3;
  padding: 0px 0px 0px 0px;
  height: 500px;
  background-image: url('images/back.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  text-align: right;
}
 
.title
{
  position: absolute;
  margin-left: 270px;
  margin-top: 90px;  
  width: 120px;
  height: 120px;
  text-align: left;
  color: #ffffff;
  font-size: 10pt;
   
}
 
 
.content
{ width: 460px;
  height: 350px;
  overflow: auto;
  padding: 55px 420px;
 
}
 
.designinfo
{
  margin-top: 5px;
  text-align: right;
  color: #8B6330;
  background-color: inherit;
  font-size: 8pt;
}
 
 
 
/* === Inline Text Styles === */
 
 
 
h1
{
  margin: 10px 0 -40px -2px;
  padding: 0 10px 40px 9px;
  font-size: 16px;
  color: #ffffff;
  background-color: inherit;
  border-left: 5px solid #ffffff;
 
}
 
.details
{
  display: none;
  font-size: 9px;
  color: rgb(0, 71, 171);
}
 
.text
{
  display: block;
  margin: 5px 5px 20px 12px;
}
 
.text a
{
  color: #666F53;
  text-decoration: none;
  font-weight: bold;
}
 
.text a:hover, .text a:active
{
  color: #000000;
}
 
blockquote
{
  margin: 3px 0 3px 0;
  padding: 5px 10px 5px 10px;
}
 
.note
{
   display: block;
 margin: 10px 15px 10px 15px;
 color: #555555;
}
 
.bold
{
  font-weight: bold;
}
 
 
 
Merci beaucoup.

Désolé, il y a une erreur dans le lien
 
http://s.metrop.free.fr/celineetjulien/www

La solution est simple, sur les faire-parts tu précise que ceux qui n'utilise pas Firefox ne sont pas invités
 

Catégorie du forum : Programmation => HTML/CSS
C'est le Graphisme ici...
Il y a des balise pour le code CSS sinon [*code=css]....[/*code] (sans le "*" bien sure !)
Il faudrait en plus ton code HTML