28220 sujets

CSS et mise en forme, CSS3

Hi tous Smiley cligne
Qqun pourait-il me donner son avis mon site créer sous linux avec FF 1.03, ma mise en page est très correcte sous FF, mais je n'ai pas accès à IE,donc j'aimerai savoir si c'est la catastrophe sur ce browser,voir un autre si vous en avez d'autres .......et puis si il y à des corrections spécifiques à apportés.
Merçi de votre aide .
Code CSS et HTML dans la même page pour l'instant :
<!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">
<head>
  <meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>nvu1</title>
  <style type="text/css">
body { margin: 0px;
padding: 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.8em;
background-image: url(file:///home/chris/Firefox_wallpaper.png);
}
#contenu { position: absolute;
width: 100%;
background-color: transparent;
background-image: url(file:///home/chris/Firefox_wallpaper.png);
}
#header { font-family: Dingbats;
text-align: center;
font-weight: bold;
font-style: normal;
color: rgb(102, 0, 204);
font-size: xx-large;
height: 50px;
background-color: transparent;
}
.liens_haut { position: absolute;
width: 80%;
margin-top: 15px;
margin-left: 17em;
height: 40px;
}
.liens_haut a { border: 1px solid gray;
margin: 4px 50px 0pt;
background: transparent none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 100px;
display: block;
text-align: center;
text-decoration: none;
color: rgb(0, 0, 0);
position: relative;
height: 30px;
}
.liens_haut a:hover { border: 1px solid gray;
background: rgb(204, 204, 204) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
color: rgb(255, 255, 255);
}
.liens_haut a:active { border: 1px solid gray;
background: gray none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
color: rgb(255, 255, 255);
}
.liens_haut ul { list-style-type: none;
width: 100%;
}
.liens_haut li { float: left;
}
.cadre_menu { border: 1px solid rgb(204, 204, 204);
position: absolute;
margin-left: 3em;
background-color: transparent;
margin-top: 5em;
width: 10.6em;
}
.cadre_menu2 { border-style: none;
position: absolute;
margin-top: 25em;
background-color: transparent;
margin-left: 3em;
text-align: center;
width: 10.6em;
}
.cadre_menu a:hover { border-right: 5px double white;
background: rgb(170, 170, 170) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
color: rgb(68, 17, 17);
}
.cadre_menu2 a:hover { border-style: none;
background-color: transparent;
}
#centrale { border-style: solid;
border-width: 0.1px;
background-repeat: no-repeat;
background-position: center;
position: relative;
opacity: 1;
margin-top: 5em;
width: 80%;
background-color: transparent;
margin-left: 17em;
height: 700px;
}
#pied { border-color: rgb(192, 192, 192);
border-width: 0.2px;
height: 50px;
background-color: transparent;
}
#pied a { font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: rgb(51, 204, 0);
text-decoration: blink;
}
#pied p { font-style: italic;
font-weight: normal;
}
.p1 { margin: 0pt 0pt 20px;
font-weight: bold;
text-decoration: none;
line-height: normal;
font-size: large;
}
ul, li { margin: 0pt;
padding: 0pt;
list-style-type: none;
line-height: 30px;
text-align: center;
}
a:link { text-decoration: none;
color: rgb(0, 0, 0);
}
a:visited { text-decoration: none;
color: rgb(153, 153, 153);
}
a:hover { text-decoration: none;
cursor: crosshair;
background-color: rgb(255, 255, 255);
color: rgb(102, 51, 102);
}
a:active { color: #cc0000} /* lien activé */
a img { border: 0pt none ;
}
  </style>
</head>
<body>
<div id="contenu">
<div id="header">&nbsp;</div>
<div class="liens_haut">
<ul>
  <li><a
 href="news.htm">M&egrave;le</a></li>
  <li><a
 href="generique.htm">G&eacute;n&eacute;rique</a></li>
  <li><a
 href="acteurs.htm">Les Acteurs</a></li>
</ul>
</div>
<div class="cadre_menu">
<ul>
  <li><a
 href="news.htm">News!</a></li>
  <li><a
 href="generique.htm">G&eacute;n&eacute;rique</a></li>
  <li><a
 href="acteurs.htm">Les Acteurs</a></li>
  <li><a
 href="ldo.htm">ldo</a></li>
  <li><a
 href="lieux.htm">Les Lieux</a></li>
  <li><a
 href="coulisses.htm">Les Coulisses</a></li>
  <li><a
 href="famille.htm">La Famille</a></li>
  <li><a
 href="dossiers.htm">Dossiers</a></li>
</ul>
</div>
<div class="cadre_menu2">
<a href="http://www.nvu.com/"><img
 alt="Document fait avec Nvu"
 src="http://www.nvu.com/fait_avec_Nvu.png" /></a></div>
<div id="centrale">
</div>
<div id="pied">
<p>Ce site est
valide <a
 href="http://validator.w3.org/check?uri=referer">
XHTML.1</a> | Copyright de nous |
<br />
</p>
</div>
</div>
</body>
</html>
bonsoir,

si ça peut t'aider, voila ce que ça donne sous I.E.
c'est a peu pres pareil mais en plus etroit et il n'y a pas la bordure en haut et a gauche

en gros sur mon ecran l'affichage fait la taille d'un 15'' donc il y a du blanc à droite et a gauche

copie ecran faite sur un ecran 17'

bon ben j'arrive pas a mettre l'image sur le forum.. desolé
Modifié par Philippe (13 May 2005 - 21:55)