Menu "glissant" PA Bouton_activeMenu "glissant" PA Bouton_hoverMenu "glissant" PA Fb-hoverMenu "glissant" PA Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Menu "glissant" PA EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Menu "glissant" PA EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Menu "glissant" PA EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Menu "glissant" PA EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Menu "glissant" PA EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Menu "glissant" PA EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Menu "glissant" PA EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Menu "glissant" PA EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -38%
Ecran PC gaming 23,8″ – ACER KG241Y P3bip ...
Voir le deal
99.99 €

Partagez
 

Menu "glissant" PA

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.lovely-emily.com
£ly
£ly
{ Membre }
{ Membre }

Féminin Messages : 32



Menu "glissant" PA Empty
Hey ^^

Pour ma PA je voulais pas quelque chose de "commun", je suis sûre qu'après avoir posté ceci, ba je ne serais plus la seule à voir y faire mais bon tant pis. donc j'ai trouvé un code pour faire un menu "glissant". tout va bien, Seul problème, il se mets au milieu et ne fait pas toute la taille de la PA, comment régler cela ?
J'ai essayé avec des height, des width mais rien à faire. Quoi enlever ou rajouter ?
Une capture :
Spoiler:


Code html
Code:

<div class="curved">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
  <div class="boxcontent">
  <ul id="menu">
    <li>
    <a class="m5 five" href="#nogo">
      <b class="h2">Paul Cézanne</b>

      <b class="h3">(1839-1906)</b>
      <span>
      <img src="../img/cezanne.jpg" alt="painting"
      title="painting" />
      The French painter who exhibited little in his
      lifetime and pursued his interests increasingly
      in artistic isolation, is regarded today as one
      of the great forerunners of modern painting.
      </span>
    </a>
    </li>
    <li>
    <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Henri Matisse</b>

      <b class="h3">(1869-1954)</b>
      <span>
      <img src="../img/matisse.jpg" alt="painting"
      title="painting" />
      Initially planned a career as a lawyer. However,
      he began to paint after an acute attack of
      appendicitis and then proceeded to become
      a leader in many art circles.
      </span>
    </a>
    </li>
    <li>
    <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">William Turner</b>

      <b class="h3">(1775-1851)</b>
      <span>
      <img src="../img/turner.jpg" alt="painting"
      title="painting" />
      This English painter was one of the greatest
      romantic interpreters of nature in the history
      of Western art and is still unrivaled in
      the virtuosity of his painting of light.
      </span>
    </a>
    </li>
    <li>
    <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">John Constable</b>

      <b class="h3">(1776-1837)</b>
      <span>
      <img src="../img/constable.jpg" alt="painting"
      title="painting" />
      Tried to capture informally the effects of changing
      light and the patterns of clouds moving across the
      country sky. He loved the countryside, and his best
      work was of outdoor scenes in his native Suffolk.
      </span>
    </a>
    </li>
    <li>
    <a class="one" href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Claude Monet</b>

      <b class="h3">(1840-1926)</b>
      <span>
      <img src="../img/monet.jpg" alt="painting"
      title="painting" />
      Monet's concern was to reflect the influence of
      light on a subject. He never abandoned his Impressionist
      painting style until his death in 1926 when Fauvism and
      Cubism were en vogue and when abstract painting came
      into existence.
      </span>
    </a>
    </li>
  </ul>
  </div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
</div>


Code css
Code:


#menu {
  margin:0;
  padding:0;
  height:32.5em;
  overflow:hidden;
  background:#f0f0f0;
  }
#menu li {
  list-style-type:none;
  float:left;
  display:block;
  width:100%;
  }
#menu li a {
  display:block;
  text-decoration:none;
  color:#00b;
  margin:0;
  width:100%;
  }
#menu li a span {
  display:none;
  color:#000;
  }
#menu li a.one span {
  display:block;
  height:15em;
  margin:0 10px;
  }
#menu li a:hover {
  background:#f1f1f1;
  }
#menu li a:hover span {
  display:block;
  height:15em;
  margin:0 10px;
  cursor:pointer;
  }
#menu .h2 {
  margin:0 5px;
  padding:0;
  color:#808;
  font-variant:small-caps;
  font-size:1.5em;
  border:0;
  }
#menu .h3 {
  margin:0 5px;
  padding:0;
  font-size:1.1em;
  color:#00b;
  }
#menu img {
  margin:5px 5px 5px 0;
  border:1px solid #000;
  float:left;
  }
.curved {
  width:21em;
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  font-size:1px;
  display:block;
  background:#88c;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.curved .b1, .curved .b2, .curved .b3 {
  height:1px;
  }
.curved .b2, .curved .b3, .curved .b4 {
  background:#f0f0f0;
  border-left:1px solid #88c;
  border-right:1px solid #88c;
  }
.curved .b1 {
  margin:0 4px;
  background:#88c;
  }
.curved .b2 {
  margin:0 2px;
  border-width:0 2px;
  }
.curved .b3 {
  margin:0 1px;
  }
.curved .b4 {
  height:2px;
  margin:0;
  }
.curved .c1 {
  margin:0 5px;
  background:#88c;
  }
.curved .c2 {
  margin:0 3px;
  border-width:0 2px;
  }
.curved .c3 {
  margin:0 2px;
  }
.curved .c4 {
  height:2px;
  margin: 0 1px;
  }
.curved .boxcontent {
  display:block;
  background:transparent;
  border-left:1px solid #88c;
  border-right:1px solid #88c;
  font-size:0.9em;
  text-align:justify;
  }

MessageSujet: Menu "glissant" PA   Menu "glissant" PA EmptyMar 11 Mai 2010, 14:18
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Menu "glissant" PA Empty
Bonsoir.

D'après le code je ne vois pas de raison d'un tel décalage à première vu.
Serai il possible d'avoir un lien, pour le voir dans son environnement ?
MessageSujet: Re: Menu "glissant" PA   Menu "glissant" PA EmptyJeu 13 Mai 2010, 21:10
Revenir en haut Aller en bas
Invité
Invité




Menu "glissant" PA Empty
Bonjour,

Le problème est-il toujours d'actualité ?

À bientôt sur CSSActif Very Happy
MessageSujet: Re: Menu "glissant" PA   Menu "glissant" PA EmptyVen 21 Mai 2010, 10:21
Revenir en haut Aller en bas
http://www.lovely-emily.com
£ly
£ly
{ Membre }
{ Membre }

Féminin Messages : 32



Menu "glissant" PA Empty
Désolée de cette absence dû à quelques problèmes personnels ^^

Voilà l'adresse, en attendant, je l'avais enlevé et essayé autre chose donc, je l'ai remis, mais me souviens plus ce que j'avais rajouté pour que ça décale comme ça. je voudrais que ça fasse toute la largeur de la PA en fait.

> http://eternal-breath.1fr1.net/index.htm

Faites pas attention au design, je dois le changer Very Happy
MessageSujet: Re: Menu "glissant" PA   Menu "glissant" PA EmptyLun 31 Mai 2010, 09:30
Revenir en haut Aller en bas
Contenu sponsorisé




Menu "glissant" PA Empty
MessageSujet: Re: Menu "glissant" PA   Menu "glissant" PA Empty
Revenir en haut Aller en bas
 

Menu "glissant" PA

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Bug de menu rapide sur pa :'( !
» Avatar en volet glissant [Résolu]
» [résolu]Intégrer un menu à onglet dans un menu à onglet
» Bordures du menu
» probleme sur un menu...

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit | Informatique et Internet | Internet