28172 sujets

CSS et mise en forme, CSS3

Désorde monstre

Bonsoir,
J'ai fait une page sur mon site web, qui s'affiche nickel sur Safari et sur le Coda 2, mais c'est un peu n'importe quoi sur Mozilla, alors j'imagine même pas sur IE...

Voilà ce que ça devrait donner :

upload/48220-Capturedec.png

Voilà le code HTML :

<html>
    <head>
	   	<meta charset="utf-8" />
       <link rel="stylesheet" href="style.css" />
       <title>Daniel Doutre Site Officiel</title>
    </head>
 
<body>
<p class="daniel">Daniel Doutre</p>
  <nav><!--Dédut Menu Principal-->
    <ul>
        <li><a href="../Accueil/Accueil.html">ACCUEIL</a></li>
        <li><a href="../Biographie/Biographie.html">BIOGRAPHIE</a></li>
        <li><a href="../Ateliers/Ateliers.html">ATELIERS</a></li>
        <li><a href="#" class="logo">LOGO</a></li>
        <li><a href="../Oeuvres/Oeuvres.html">OEUVRES</a></li>
        <li><a href="Expositions.html"> EXPOSITIONS</a></li>
        <li><a href="../Liens/liens.html">LIENS</a></li>
    </ul>
  </nav>
  				
  				<div class="cadre">
  				
  		<div class="centretop">
  <img class="top" src="IMG/museedonjon.png" alt="museedonjon"/>
  <img class="top1" src="IMG/donjon.jpg" alt="donjon" width="500" height="375" />
  		</div>
  
  			<div class="centre2">
  <a class="marge" href="IMG/titre%20pour%20%C3%A9cran%20donjon.jpg"><img src="IMG/1.jpg" alt="Présentation Exposition" title="Cliquez pour agrandir" /></a>
  <a class="marge" href="IMG/DSC04107.JPG"><img src="IMG/2.jpg" alt="Présentation Exposition" title="Cliquez pour agrandir" /></a>
  <a class="marge" href="IMG/daniel%20061.jpg"><img src="IMG/3.jpg" alt="Présentation Exposition" title="Cliquez pour agrandir" /></a>
  <a class="marge" href="IMG/100_0974.JPG"><img src="IMG/4.jpg" alt="Présentation Exposition" title="Cliquez pour agrandir" /></a>
  			</div>
  			
  				</div>
  			
</body>
</html>


CSS :

					/*Menu*/
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
            url('BebasNeue-webfont.woff') format('woff'),
            url('BebasNeue-webfont.ttf') format('truetype'),
            url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.daniel{
	font-size: 2.0em;
	color: white;
	text-align: center;
	text-shadow: 1.5px 1.5px 2px #5a5a5a;
}
html, ul, li, nav
 {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
nav{
  font-family: 'BebasNeueRegular', Arial;
  text-align:center;
  font-size:1.8em;
  width:900px;
  height:170px;
  background:url(IMG/banniere.png) center no-repeat;   
  margin:auto;
}
nav ul{
  padding-top:48px;
  padding-right:10px;
}
nav ul li{
display:inline-block;
}
nav ul li a {
  display:block;
  text-decoration: none;
  color:#302858;
  height:65px;
  line-height: 65px;
  padding:0 18px 0 15px;
}
nav ul li a.logo {
  width:165px;
  padding:0;
  color:transparent;
}
nav a{
color:#070044;
text-decoration:none;
}
 
nav a:hover{
color:#d8222c;
}
					/*Body*/
body{
	font-family: Arial;
	background-color:#c3c3c3;
}
					/* Contenu*/
.daniel {
	width: 700px; 
    margin: auto;
}
.top, .top1 {
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 40px;
}
.centretop{
	width: 869px;
	margin-left: auto;
	margin-right: auto;
}
.top1{
	box-shadow: 2px 2px 8px rgba(0,0,0,0.67)
}
.centre2{
	margin-top: 20px;
	width: 880px;
	margin-left: auto;
	margin-right: auto;
}
.marge{
	margin: 1px;
}
.cadre{
	  background:url(IMG/Cadre.png) center no-repeat ;
	  height: 640px;
}


Vous avez une idée pour que tout soit disposé correctement ?
Sujet clos
Aller à