£ly
{ Membre }
Messages : 32
| 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; }
| | |
|
VPeybernes
{ Membre actif }
Messages : 563
| 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 ? | | |
|
Invité Invité
| Bonjour,
Le problème est-il toujours d'actualité ?
À bientôt sur CSSActif | | |
|
£ly
{ Membre }
Messages : 32
| 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 | | |
|