Bonjour, je reviens à la charge^^
je vais chipoter mais j'essaye de faire les choses bien pour mon site^^
J'explique mon soucis:
Sur ma page il y'a un menu déroulant sur le coté, en dessous une image puis encore en-dessous le footer.
quand mon menu se déplie, il le fait vers le bas, j'ai bidouiler pour qu'il arrive à passer sur mon image qui se trouve juste en dessous, mais le problème c'est que le footer "tremble" quand je le déplie et quand il se replie!
Zyber, j'avais appliqué le position:absolute à mon image et mon footer avec du z-index, mais je me suis rendu compte que je perdais les marges d'alignement, mes éléments n'étaient donc plus centré dans mon contenu...
voici mon code html:
<div id="contenu"></div>
<div class="wrag">
<ul class="menu" style="border-radius:4px">
<div class="Prestations">
<li>Prestations</li>
</div>
<li><a href="#">Téléphonie</a>
<ul>
<li><a href="#">Forfaits mobiles</a>
<li><a href="#">Accessoires</a>
<li><a href="#">Réparations</a>
<li><a href="#">Packs</a>
</ul>
</li>
<li><a href="#">Informatique</a>
<ul>
<li><a href="#">Vente d'ordinateurs</a>
<li><a href="#">Réparations</a>
<li><a href="#">Conseils</a>
<li><a href="#">Cours d'informatique</a>
</ul>
</li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Tarifs</a></li>
</ul>
</div>
<div class="photo"><img src="theme/haf.png"></div>
<div id="footer">
<div id="trait1"></div>
<div class="col">
<h3>Informations</h3>
<ul>
<li><a href="#">Qui sommes-nous?</a></li>
<li><a href="#">La société</a></li>
<li><a href="#">Mentions légales</a></li>
</ul>
</div>
<div class="col2">
<h3>Contact</h3>
<ul>
<li><a href="#">Mail</a></li>
<li><a href="#">Téléphone</a></li>
<li><a href="#">Courrier</a></li>
</ul>
</div>
<div class="col3">
<h3>Suivez-nous!</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div id="trait2"><div class="copyright">Copyright 2012 www.déclick.fr</div></div>
</div>
et mon code CSS:
contenu{background:url(theme/contenu.png) repeat-y;
}
.wrap{
margin:0 auto;
width:210px;
}
.menu{
padding:0;
margin-top:100px;
list-style:none;
width:210px;
font-size:18px;
background:#fefcfc;
border: 1px solid rgba(0,0,0,0.7);
-moz-box-shadow: 4px 4px 10px 0px #656565;
-webkit-box-shadow: 4px 4px 10px 0px #656565;
-o-box-shadow: 4px 4px 10px 0px #656565;
box-shadow: 4px 4px 10px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10);
float: left;
z-index: 3;
position:relative;
}
.Prestations{
padding:10px;
padding-left:55px;
color:#FFF;
background:url(theme/cadreh.png);
font-size:20px;
}
.menu li a{
display: block;
border-bottom: 1px solid rgba(0,0,0,0.2);
border-top: 1px solid rgba(255,255,255,0.2);
background:#202627;
text-decoration:none;
color:#FFF;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
filter: dropshadow(color=#000, offx=1, offy=0);
padding:10px;
padding-left:20px;
}
.menu li ul li a{
font-size:14px;
color:#202627;
text-shadow: 1px 0px 1px rgba(255,255,255,0.5);
filter: dropshadow(color=#000, offx=1, offy=0);
}
.menu a:hover{
background:#bb0617;
}
.menu ul{
margin:0;
padding:0;
list-style:none;
height:0;
overflow:hidden;
transition:0.7s;-moz-transition:0.7s;-webkit-transition:0.7s;
}
.menu li:hover ul{
height:152px;
}
.menu ul li a{
background:#fefcfc;
}
.menu ul li a:hover{
background: #c1c1c1;
}
.menu ul li a img{
margin-right:10px;
}
.photo{ width: 236px; height: 293px;display:block; margin-top: -120px;z-index: 2; position:relative; float: left; -moz-box-shadow: 4px 4px 10px 0px #656565;-webkit-box-shadow: 4px 4px 10px 0px #656565;-o-box-shadow: 4px 4px 10px 0px #656565;box-shadow: 4px 4px 10px 0px #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10); }
footer{width: 1200px;
float:right;
height:280px;
position:relative;
z-index: 1;
display:block;
}
background: url(theme/Footertrait.png);
width:1200px;
height:2px;
float:right;
position:relative;
margin-top: 50px;
}
footer h3{font-weight: normal;
}
.col{
float:left;
width: 200px;
height:auto;
position: relative;
margin-left:80px;
margin-top:10px;
}
.col ul{
list-style:none;
margin: 0 0 0 -40px;
}
.col li {
padding-top: 10px;
}
.col li a{
text-decoration:none;
color:#959393;
font-size:14px;
-webkit-transition:0.5s;transition:0.5s;-moz-transition:0.5s;
}
.col li a:hover{
padding-left: 5px;
color:#b51727;
-webkit-transition:0.5s;transition:0.5s;-moz-transition:0.5s;
}
.col2{
margin-left: 275px;
float:left;
height:auto;
margin-top:10px;
}
.col2 ul{
list-style:none;
margin: 0 0 0 -39px;
}
.col2 li {
padding-top: 10px;
}
.col2 li a{
text-decoration:none;
color:#959393;
font-size:14px;
-webkit-transition:0.5s;transition:0.5s;-moz-transition:0.5s;
}
.col2 li a:hover{
padding-left: 5px;
color:#b51727;
-webkit-transition:0.5s;transition:0.5s;-moz-transition:0.5s;
}
.col3{
float:right;
width: 200px;
height: auto;
position: relative;
margin-top:10px;
}
.col3 ul{
list-style:none;
margin: 0 0 0 -39px;
}
.col3 li {
padding-top: 10px;
}
.col3 li a{
text-decoration:none;
color:#959393;
font-size:14px;
-webkit-transition:0.5s;transition:0.5s;-moz-transition:0.5s;
}
.col3 li a:hover{
padding-left: 5px;
color:#b51727;
-webkit-transition:0.5s;transition:0.5s;-moz-transition:0.5s;
}
background: url(theme/Footertrait.png);
margin-top: 30px;
width:1200px;
height:2px;
float:right;
position:relative;
}
.copyright{
margin-top:25px;
margin-left:20px;
float:left;
position:relative;
}
12 réponses
il te faudrait quelque chose comme ça??
code html à mettre après le div contenu
<div id="solution">
<div class="wrap">
<ul class="menu" style="border-radius:4px">
<div class="Prestations">
<li>Prestations</li>
</div>
<li><a href="#">Téléphonie</a>
<ul>
<li><a href="#">Forfaits mobiles</a>
<li><a href="#">Accessoires</a>
<li><a href="#">Réparations</a>
<li><a href="#">Packs</a>
</ul>
</li>
<li><a href="#">Informatique</a>
<ul>
<li><a href="#">Vente d'ordinateurs</a>
<li><a href="#">Réparations</a>
<li><a href="#">Conseils</a>
<li><a href="#">Cours d'informatique</a>
</ul>
</li>
<li><a href="#">Qualité</a></li>
<li><a href="#">Tarifs</a></li>
</ul>
</div>
<div id="cadre">
<div id="texte"><h1>Espace professionnel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius vestibulum lectus nec pulvinar. Proin at turpis diam, rutrum porttitor nisl.<br>
Sed eleifend blandit tristique. Pellentesque dictum, metus id porttitor laoreet, dui odio eleifend mauris</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius vestibulum lectus nec pulvinar. Proin at turpis diam, rutrum porttitor nisl.<br>
Sed eleifend blandit tristique. Pellentesque dictum, metus id porttitor laoreet, dui odio eleifend mauris</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius vestibulum lectus nec pulvinar. Proin at turpis diam, rutrum porttitor nisl.<br>
Sed eleifend blandit tristique. Pellentesque dictum, metus id porttitor laoreet, dui odio eleifend mauris</p>
</div>
</div>
<div class="photo"></div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="trait1"></div>
<div class="col">
<h3>Informations</h3>
<ul>
<li><a href="#">Qui sommes-nous?</a></li>
<li><a href="#">La société</a></li>
<li><a href="#">Mentions légales</a></li>
</ul>
</div>
<div class="col2">
<h3>Contact</h3>
<ul>
<li><a href="#">Mail</a></li>
<li><a href="#">Téléphone</a></li>
<li><a href="#">Courrier</a></li>
</ul>
</div>
<div class="col3">
<h3>Suivez-nous!</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div id="trait2"><div class="copyright">Copyright 2012 www.déclick.fr</div></div>
</div>
<div class="clear"></div>
</div>avec en css à remplacer/rajouter:
.wrap{
position:absolute;
margin:0 auto;
width:210px;
}
.photo{
clear:left;
width: 236px;
height: 293px;
display:block;
margin-left:20px;
margin-top: 50px;
position:relative;
float: left;
-moz-box-shadow: 4px 4px 10px 0px #656565;-webkit-box-shadow: 4px 4px 10px 0px #656565;
-o-box-shadow: 4px 4px 10px 0px #656565;box-shadow: 4px 4px 10px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10); }
#cadre{
width: 900px;
height:300px;
background:url(theme/Contenu.png) repeat-y right ;
float: left;
margin-left:400px;
margin-top:100px;
display:block;
border-radius:10px;
-moz-box-shadow: 4px 4px 10px 0px #656565;-webkit-box-shadow: 4px 4px 10px 0px #656565;-o-box-shadow: 4px 4px 10px 0px #656565;box-shadow: 4px 4px 10px 0px #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10);
}
#footer{
width: 1200px;
height:280px;
position:relative;
margin:0 auto;
}
.copyright{
margin-top:25px;
margin-left:auto;
margin-right:auto;
position:relative;
text-align: center;
}
.clear{clear:both;}
#solution{
position:relative;
}fait bien une copie de ton code initial avant de changer quoi que ce soit.
Tu fais beaucoup de code pour rien des coups mais sinon tu te débrouilles bien!!
Bonsoir,
Je me suis permis de prendre le sujet en route.
Si tu peux essaye de mettre ton code dans les balise code prévues à cet effet elle sont avec le petit symbole <>
Ensuite je me suis permis de récupéré tout code pour le testé mais vu qu'il en manque un peu j'aurais voulu savoir quel rendu voudrait tu avoir ?
ah oui je n'ai pas mis tous mon code je ne voulais pas inonder le post de code non plus, du coup je ne sais pas si ça doit bien rendre, j'ai mis le code du menu accordéon en question, de la photo et de mon footer, et bien j'aimerais que quand le menu se déroule vers le bas, il se déroule sur ma photo qui est placé juste en dessous, et mon footer placé en dessous de ma photo, ne bouge pas. en gros que ni ma photo ni mon footer ne sois bougé par le slide du menu accordéon. Je précise que j'ai déjà essayer de mettre les propriétés position:relative et z-index à ma photo, mon menu accordéon et mon footer sans grand succés...
Aprés j'ai creer un cadre qui lui est à coté de mon menu je l'ai mis en float:right, peut-il rentrer en compte?
Ok!
Pourrais tu me mettre ton code entier pour que je le vois? parce que du coup mon rendu n'est pas du tout le même tu connais pastebin?
tu vas sur ce site : ICI
tu copie ton code le css et le html, tu met SUBMIT et tu met les liens en post s'il te plait.
ok, voici le code html: http://pastebin.com/49VANQ7c
le code CSS: http://pastebin.com/ffieUufh
il va te manquer les photos/background que j'ai mis non?
sinon quand tu tu va dérouler le menu, la photo en dessous va se décaler sur la droite, mais si tu change le height de la div #cadre de 300px à 400px, tu verra que la photo ne se décale plus sur la droite et reste en ligne, j'comprends pas très bien ça...
j'voudrais juste que peu importe le height de la div cadre, ma photo et mon footer ne bouge pas par le slide du menu accordéon que le menu se déplie sur ma photo.
T'inquiète pour les photo c'est juqste savoir ce que tu veux environ.
sinon tu veux mettre quoi dans ta div contenu? car elle s'ouvre et se ferme directement.
C'est volontaire?
ah non c'est une erreur de ma part, c'est pour que au fur et à mesure que je mette du contenu mon background "gris" s'abaisse mais je crois que ca fait doublon avec mon background:url(theme/fond.png); du body dans le CSS, je m'en occuperais, merci de me l'avoir fait remarquer^^
Merci de prendre de ton temps pour m'aider appart sur un forum c'est compliqué de trouver une réponse pour ma situation^^, je vais essayer ça bien calmement et jte dirais.
c'est vrai que je rajoute pas mal de propriétés pour rien desfois, comme je débute, je me rends pas trop compte mais ça commence à venir, petit à petit^^
j'essaye et je te dis, encore merci!
oui c'est bien l'effet que je recherchais merci! je vais essayer de comprendre mes erreurs en potassant ton code, et au passage tu saurais pourquoi le menu du haut se déplie automatiquement quand on actualise la page?
Encore merci^^
j'ai juste rajouter un position:relative et du z-index sur mon menu accordéon pour qu'il slide bien sur mon image en dessous, ca marche bien merci!
Bonjour et i n'y a pas de quoi !! Les forum sont fait pour ça ;)
Sinon pour ton menu carrousel il me faudrait ton .js qui correspond. Met le en pastebin aussi s'il te plait et je verrai ce qui cloche!
ok, je te donne le script de mon menu du header: http://pastebin.com/xQvpiqvB
et voici le code de mon script jquery.js; http://pastebin.com/hdLU1a7Z