28221 sujets

CSS et mise en forme, CSS3

Hier, j'ai fait passer mon site en DIV, et sur Mozilla Firefox, tout marche nikel.
Par contre, chez MsIE, ça se complique un brin ! Je n'ai toujours pas trouvé la cause de ce problème.
img{
border:none;
display:block;
}

.float{
float:left;
}
.sommaire{
float:left;
width:30px;
height:40px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
.sommaire:hover{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}
#conteneur{
margin-left: auto;
margin-right: auto;
width:750px;
}
#menu1{
float:left;
}
#menu2{
float:left;
}
#menu3{
text-align:center;
padding-top:120px;
padding-left:23px;
padding-right:5px;
}
#centre{
float:left;
width:345px;
}
#droite{
background-image:url(images/design/droite.jpg);
background-position:center;
background-repeat:no-repeat;
width:139px;
height:516px;
float:right;
margin-top:-54px;
}


Une dernière question, avec le CSS, Internet Explorer ne prends oas en compte les hovers (.sommaire et .sommaire:hover)
Modifié par Sylvain (11 Feb 2013 - 11:40)
oui, j'en ai déjà vu des pires que Hachi-TML, mais remarqués qu'en parlant d'internet explorer, je ne me suis pas énervé
(ce qui est ma foi rare...)

Merci pour le sommaire à droite, enfin, il est joli.... sur mozilla lol !
Modifié le 29 Oct 2004 - 10:55
Avant tout autre chose, et avant de mettre en cause le navigateur, il est indispensable de vérifier la validité du code.

(Accessoirement, ce devrait être une règle de ce forum : avant de poster, vérifier la validité de votre code; corrigez-le, et ne postez que si vous ne parvenez pas à corriger ou si cela ne résoud pas votre problème de rendu.)

Avec un code corrigé (expéditivement avec Tidy), ta page http://www.chemindetraverse.net/?harrypotter=livres te permettra déjà d'obtenir un affichage correct du menu sommaire.
ooops !
c'est mon habitude, des que je change un petit truc, je passe par l'interface wysiwyg de dreamweaver, et , il me fout le bordel. Je changes ca tout de suite, je n'avbais validé que la page d'accueil.
Pour ramener ta div #centre à sa place, supprime le
#centre{
float:left;
width:345px;
}
ainsi que le align="right" dans le code HTML
et laisse faire le flux sans spécifier de largeur: le contenu suivant tes flottants s'écoulera entre tes deux menus.

Il reste des problèmes de marges liés à #titre (marges top et bottom à supprimer)
voilà, j'ai réponré les trois petites bétises qui me mettais dans l'illegalité du WC3, j'ai supprimé #centre.

Dans #titre, je n'ai rien spécifié, tu dois vouloir parler de #droite, ou j'ai mis un margin-top:-54px; , c'est car sinon, il est décalé, mon menu de droite...
je l'ai enlevé , mais maintenant, c'est décalé ET sur frfx, et sur ie. Il faut que je bouge mon DIV de place ?
Les marges par défaut des éléments <p>, variables selon les navigateurs, provoquent tes décalages.

Voici un point de départ pour reprendre ta CSS:

* {
margin: 0;
padding: 0;
}
body {
margin-top: 0px;
background-color: #000000;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(fond0000.jpg);
background-repeat: repeat-y;
background-position: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
}
a:link {
color: #C7D6D6;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #9EB9B9;
}
a:hover {
text-decoration: none;
color: #9EB9B9;
}
a:active {
text-decoration: none;
color: #9EB9B9;
}
strong{
color:#9DC0C6
}
img{
border:none;
display:block;
}

.float{
float:left;
}
.sommaire{
float:left;
width:30px;
height:40px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
.sommaire:hover{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}
#conteneur{
margin-left: auto;
margin-right: auto;
width:750px;
}
#menu1{
float:left;
}
#menu2{
float:left;
}
#menu3{
text-align:center;
padding-top:120px;
padding-left:23px;
padding-right:5px;
}
#centre{

}
#droite{
background-image:url(droite00.jpg);
background-position:center;
background-repeat:no-repeat;
width:139px;
height:516px;
float:right;
margin-top:-54px;
}


<!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>Les livres Harry Potter- Chemin de Traverse</title>
    <meta http-equiv="Content-Type"
    content="application/xml; charset=ISO-8859-1" />
    <meta name="description"
    content="Bienvenue sur Chemin de Traverse ! Vous d&#233;couvrirez ici des informations sur tout les tomes Harry Potter et livres d&#233;riv&#233;s : R&#233;sum&#233;s, Couvertures, Informations..." />
    <meta name="keywords"
    content="Harry, Potter, Chemin, Traverse, livres, prince, sang mele, resumes, couvertures, infos, informations, tome1, tome 2, tome3, tome 4, tome 5, tome 6, &#233;cole des sorciers, chambre des secrets, prisonnier d'Azkaban, coupe de feu, ordre du ph&#233;nix, prince de sang m&#233;l&#233;" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Author" content="Sylvain Durand" />
    <meta name="Reply-to"
    content="seamus@chemindetraverse.net" />
    <meta name="Copyright"
    content="(c) Chemindetraverse.net 2000-2004" />
    <meta name="Identifier-url"
    content="http://www.chemindetraverse.net" />
    <meta name="Robots" content="all" />
    <link href="styles00.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <style type="text/css">
    /*<![CDATA[*/
<!--
.Style1 {font-size: 18px}
.Style2 {font-size: 12px; }
-->
    /*]]>*/
    </style>
  </head>

  <body>
    <div id="conteneur">
      <div>
        <p style="margin: 0;"><img src="haut0000.jpg" alt="Haut du design"
        width="750" height="134" /></p>
      </div>

      <div id="titre">
        <p><a><img src="poudlard.jpg"
        alt="Poudlard Int&#233;ractif" width="266" height="54"
        class="float" /></a> <img width="345" height="54"
        src="livres00.jpg" alt="Les livres Harry Potter" /></p>
      </div>

      <div id="droite">
        <div id="menu3">
          <p><a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=tome1">
          <img src="tome1000.gif"
          alt="Harry Potter &#224; l'&#233;cole des sorciers"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=tome2">
          <img src="tome2000.gif"
          alt="Harry Potter et la chambre des secrets"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=tome3">
          <img src="tome3000.gif"
          alt="Harry Potter et le prisonnier d'Azkaban"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=tome4">
          <img src="tome4000.gif"
          alt="Harry Potter et la coupe de feu"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=tome5">
          <img src="tome5000.gif"
          alt="Harry Potter et l'ordre du ph&#233;nix"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=tome6">
          <img src="tome6000.gif"
          alt="Harry Potter et l'ordre du ph&#233;nix"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=quidditch">
          <img src="quidditc.gif"
          alt="Le Quidditch &#224; travers les &#226;ges"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=animaux">
          <img src="animaux0.gif"
          alt="Les animaux fantastiques et leurs habitats"
          class="sommaire" /></a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=rencontre">
          <img src="rowling0.gif"
          alt="Rencontre avec J.K.Rowling" class="sommaire" />
          </a> <a
          href="http://www.chemindetraverse.net/?harrypotter=livres&amp;potterharry=pote">
          <img src="pote0000.gif"
          alt="Rencontre avec J.K.Rowling" class="sommaire" />
          </a></p>
        </div>
      </div>

      <div id="menu1">
        <p><a><img src="chaudron.jpg" alt="Chaudron Baveur"
        width="118" height="81" /></a> <a
        href="http://www.chemindetraverse.net/troisbalais/"><img
        src="troisbal.jpg" alt="Aux trois balais" width="118"
        height="81" /></a> <img src="gauche20.jpg"
        alt="Version du site : 6.0" width="118"
        height="300" /></p>
      </div>

      <div id="menu2">
        <p><img src="hautgauc.jpg" alt="Haut Gauche" width="148"
        height="64" /> <a href=""><img src="livres01.jpg"
        alt="Les livres Harry Potter" width="148" height="56" />
        </a> <a
        href="http://www.chemindetraverse.net/?harrypotter=films">
        <img src="films000.jpg" alt="Les films Harry Potter"
        id="Films" width="148" height="56" /></a> <a
        href="http://www.chemindetraverse.net/?harrypotter=monde">
        <img src="monde000.jpg" alt="Le monde Harry Potter"
        width="148" height="56" /></a> <a><img src="magie000.jpg"
        alt="La magie Harry Potter" width="148" height="56" />
        </a> <a><img src="site0000.jpg" alt="Le site" width="148"
        height="56" /></a> <a><img src="livredor.jpg"
        alt="Livre d'or" width="148" height="118" /></a></p>
      </div>

      <div id="centre">
        <div>
          <p> </p>

          <p><img src="choissis.jpg" alt="Choisissez" width="222"
          height="51" /></p>

          <p align="center" class="Style1">Bienvenue dans la
          section Livres !</p>

          <p align="justify" class="Style2">Vous d&#233;couvrirez
          ici tout ce qui concernent les six premiers livres des
          aventures Harry Potter, mais aussi de quatre livres qui
          parlent de Harry Potter. Ce genre de livre &#233;tant
          extr&#232;mement nombreux, nous n'avons d&#233;cider de
          ne choisir que <em>Le Quidditch &#224; travers les
          &#226;ges</em> et <em>Les animaux fantastiques</em>
          ,les deux livres de J.K. Rowling, ainsi que
          <em>Rencontre avec J.K.Rowling</em>, le seul livre ou
          vous pourrez tout savoir sur J.K. Rowling.</p>

          <p align="justify" class="Style2">Enfin, nous avons
          d&#233;cider de pr&#233;senter le livre de l'un de nos
          confr&#232;res webmasters, Antoine Guillemain, qui est
          <em>Mon pote Harry Potter</em>. SI vous ne l'avez pas
          lu , je vous le conseille (sachant qu'une version 2004
          est sortie).</p>
        </div>
      </div>
      <!-- This document saved from  http://www.chemindetraverse.net/?harrypotter=livres  -->
    </div>
  </body>
</html>



(Attention : il reste des attributs "align" à supprimer)
Bonjour,
En lisant la réponse de Laurent Denis, je voit ce petit morceau au début des styles:

*{
margin:0;
padding:0;
}


Est-ce que je comprend bien que tous les éléments de la feuille seront par défaut à margin:0; et padding:0; ?
@Igor, exactement oui !

J'utilise aussi, en général je redefinis de tout facon les margin et padding des éléments qui en ont par défaut, parcequ'ils sont généralement différents selon les navigateurs. En faisant ça je sais que c'est partout pareil = 0 !
@Laurent

La feuille de Tantek Celik est à ce sujet radicale, comme un souhait de voir un navigateur n'avoir aucun style par défaut.
@Igor> je ne suis pas proprio des couleurs :D Sympa d'en faire part tout de même, même si je n'ai aucun droit sur les couleurs que j'utilise, par ailleurs, la "ressemblance" des couleurs est loin d'être évidente, ton vert pâle/olive n'étant pas présent sur mon blog :) La réalisation est d'ailleurs plutôt pas mal je trouve, mais j'aurais mis l'ombre de l'autre coté et en beaucoup moins opaque, mais bon c'est pas moi le designer web !