28172 sujets

CSS et mise en forme, CSS3

Affichage en horizontal au lieu de vertical...

Bonjour,

J'ai un probleme avec les images survolées.

Jai utilisé les CSS pour faire ce survol...

J'ai fait:

<style type="text/css">
        #icone a.bouton {
          display: block;
          border:0;
          height: 26px; width: 103px;
          background: url("images/desc.jpg")
          }
        #icone a:hover.bouton {
          background: url("images/desc1.jpg")
         }
        #icone2 a.bouton1 {
          display: block;
          border:0;
          height: 26px; width: 103px;
          background: url("images/jeux.jpg")
          }
        #icone2 a:hover.bouton1 {
          background: url("images/jeux1.jpg")
         }
        #icone4 a.bouton2 {
          display: block;
          border:0;
          height: 26px; width: 103px;
          background: url("images/astuce.jpg") 
          }
        #icone4 a:hover.bouton2 {
          background: url("images/astuce1.jpg")
         }
 </style>


Puis j'ai mis :


<span id="icone"><a class="bouton" href="lien1.html"></a></span> <span id="icone2"><a class="bouton1" href="lien2.html"></a></span> <span id="icone4"><a class="bouton2" href="lien3.html"></a></span>


Le survol fonctionne: http://www.voilou.fr/TEST.htmlhttp://www.voilou.fr Smiley url

Par contre j'aimerai que les images soient aligné en vertical et non horizontal..comment faire?

Je pensais mettre display: inline; au lieu de display: block; mais dans ce cas cela n affiche plus rien du tout...

Merci Smiley smile
Re',

tu as un padding déclaré pour ul li qui est pris en compte par la cascade (voir cet article qui explique le phénomène).

Il faut donc préciser
#nav li { padding: 0; }

Au passage ton DOCTYPE est tronqué et va faire basculer IE6 en mode quirks.
Merci pour ton aide, cela fonctionne Smiley smile

J'ai encore beaucoup de choses à apprendre sur les CSS...mais je trouve que cela est beaucoup plus pratique, que ce soit pour les formulaires, ou les menus...et cela fait surtout plus propre!

Une dernière requête: http://voilou.fr/astuces-jeux-en-ligne-prizee.html

Comment faire pour centrer le tout?

Dans le code j'ai mis:

<div align="center">
	  <ul id="nav">
			<li><a href="test.php" title="aller à la section 1">Description</a></li>
			<li><a href="test2.php" title="aller à la section 2">Les Jeux</a></li>
			<li><a href="'.$cont.'" title="Astuces des jeux">Astuces</a></li>
      </ul>
</div>


Les balises <div> ne sont pas pris en compte apparemment...

Je sais que c'est #nav li { float:left; } qui se charge de l'alignement. Par contre j'ai vu que les attributs ne peuvent que être inherit, left, right et none. Je ne peux donc pas utiliser center ou middle...

Merci
align="center" est obsolète depuis... plusieurs années Smiley lol !

L'idéal étant de séparer le contenu (code html) et la présentation (code css).

Le mieux serait peut-être de reprendre du début. Un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

Tu y trouveras entre autre les solutions concernant le centrage des éléments.

Bonne continuation Smiley smile .
Bonsoir,

J'ai lu les tutos et c'est dur de tout assimiler ...

J'ai ajouter dans le css:


    ul#nav{
    width: 315px;
    margin: auto;
    }


Sous Mozilla Firefox, le menu est bien centré...par contre sous Internet Explorer il complètement décalé vers la droite...

J'ai pensé modifier le Doctype...

Page avec ancien doctype: http://www.voilou.fr/liste-astuces-jeux-en-ligne.php
Nouveau doctype: http://www.voilou.fr/liste-astuces-jeux-en-ligne2.php

En changeant le doctype, le menu est bien aligné sur les 2 sites, par contre tout le reste du texte est décalé...

Svp, aidez moi Smiley ohwell
Modifié par joboy84 (18 Sep 2008 - 22:36)
Hem... vu ton code ce n'est effectivement pas une bonne idée de passer directement en XHTML 1.0 Strict Smiley langue !

Par contre tu pourrais écrire le tien de manière complète :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
et voir ensuite s'il reste des erreurs à corriger en utilisant le validateur du W3C.

Pour ce qui est d'avoir du mal à tout assimiler je ne connais personne qui ait fait ça en quelques heures seulement ! Smiley ravi
Modifié par Heyoan (19 Sep 2008 - 00:02)
Ben pour bien faire il faudrait tout corriger en gardant un bon DOCTYPE... mais c'est vrai qu'il y a du boulot. Smiley ohwell

Au pire tu peux mettre #nav en position:relative (seulement pour IE) et lui affecter un left:-25px (à peaufiner)...

Mais c'est vilain et c'est juste en attendant que tu apprennes les CSS! Smiley biggol
Sujet clos
Aller à