Bonjour,
je vous écris car j'ai un petit souçi de CSS avec mon code Jquery à cette adresse [supprimé]
En effet, sur la page d'accueil, quand je clique sur l'une des réalisations présentes sur la droite, j'ai tout mon contenu qui se décale sur la hauteur. Ce problème est inexistant si dans la rubrique suivante "Qui suis-je ?", ma class "portfolio_contenu" est absente. Je plante depuis quelques jours et je n'arrive toujours pas à comprendre le lien entre les deux.
A tout hasard, si quelqu'un a une idée, je laisse les bouts de code importants, en vous remerciant de votre aide.
JQUERY
HTML
CSS
Modifié par Stephanie_flyaway (24 Sep 2012 - 18:11)
je vous écris car j'ai un petit souçi de CSS avec mon code Jquery à cette adresse [supprimé]
En effet, sur la page d'accueil, quand je clique sur l'une des réalisations présentes sur la droite, j'ai tout mon contenu qui se décale sur la hauteur. Ce problème est inexistant si dans la rubrique suivante "Qui suis-je ?", ma class "portfolio_contenu" est absente. Je plante depuis quelques jours et je n'arrive toujours pas à comprendre le lien entre les deux.
A tout hasard, si quelqu'un a une idée, je laisse les bouts de code importants, en vous remerciant de votre aide.
JQUERY
$(document).ready(function(){//on attend que la page soit chargée
// *********************** SLIDE ***************************
//on donne l'id de la liste visée, et on lui donne ses paramètres
$("#ma_liste").wslide({
width: 900,
height: 600,
horiz: true
});
// *********** FONDU pour réalisation (edito) **************
$("a.fondu").click(function () { // On clique sur le lien qui a la classe fondu
var lien = $(this).attr("href")
$("div#projet div:visible").animate({
opacity: 0,
}, 800, function(){
$(lien).css('visibility', 'visible').css('opacity', '0').animate({
opacity: 1,
}, 400) });
});
// *********** FONDU pour PORTFOLIO **************
$("a.icone").click(function () { // On clique sur le lien qui a la classe fondu
var lien = $(this).attr("href");
$("div#portfolio div:visible").animate({
opacity: 0,
}, 800, function(){
$(lien).css('visibility', 'visible').css('opacity', '0').animate({
opacity: 1,
}, 400) });
});
HTML
<div id="container">
<div id="gauche">etc...etc...</div> <!-- menu de gauche -->
<div id="content">
<ul id="ma_liste"> [b]<!-- le slide se joue sur une liste -->[/b]
<li class="monLI">
<div id="accueil"> [b]<!-- encadré jaune --> [/b]
<div id="projet"> [b]<!-- le fondu se joue sur ce bloc | pas de style--> [/b]
[b]<!-- Les blocs ci-dessous correspondent aux réalisations apparaissant en fondu --> [/b]
<div class="edito_contenu" id="edito_txt">
Bonjour et bienvenue sur mon site professionnel, support choisi pour présenter mes travaux et projets.
ETC...
</div>
<div id="realisation-1" class="edito_contenu" style="visibility:hidden">En 20018888 ..... <BR /></div>
<div id="realisation-2" class="edito_contenu" style="visibility:hidden">Etant donné la petite taille de l'entreprise, etc....</div>
<div id="realisation-3" class="edito_contenu" style="visibility:hidden">En 2004 .....</div>
</div>
</div>
<div><img src="imgs/elts/titre_edito.jpg"></div>
[b]<!-- Affichage des 3 dernières réalisations sur la droite --> [/b]
<div id="realisation">
<div id="realisation1"> <a href="#realisation-1" class="fondu"><img src="imgs/realisations/dardelin.jpg" height="130"></a> </div>
<div id="realisation1"> <a href="#realisation-2" class="fondu"><img src="imgs/realisations/dardelin.jpg" height="130"></a> </div>
<div id="realisation1"> <a href="#realisation-3" class="fondu"><img src="imgs/realisations/dardelin.jpg" height="130"></a> </div>
<div id="backtoedito"><img src="imgs/elts/fleche.jpg"> <a href="#edito_txt" class="fondu">Retour Edito</a></div>
<div id="titre_derniere_real"> <img src="imgs/elts/dernieres_realisations.jpg"> </div>
</div>
</li>
<li>
[b]<!-- le fondu se joue sur ce bloc -->[/b]
<div id="portfolio">
[b]<!-- Les blocs ci-dessous correspondent aux réalisations apparaissant en fondu -->
<!-- c'est ici que se trouve la class "portfolio_contenu" qui semble engendrer un conflit --> [/b]
<div id="portfolio_txt" class="portfolio_contenu"><img src="imgs/elts/titre_portfolio.jpg"> INTRO : Si l'idée du blog de voyage était en moi depuis mon départ "downunder", il n'a vu le jour que bien longtemps après. ETC.</div>
<div id="portfolio-1" class="portfolio_contenu" style="visibility:hidden">
<span class="titre_portfolio">DARDELIN CONSEILS</span> <a href="http://www.dardelin.com">http://www.dardelin.com</a>
<br /><br /><br />
<img src="imgs/realisations/dardelin.jpg" width="486">
<br /><br /><br />
<span class="txt_portfolio">Si l'idée du blog de voyage était en moi depuis mon départ "downunder", ETC... </span>
</div>
<div id="portfolio-2" class="portfolio_contenu" style="visibility:hidden">Etant donné la petite taille de l'entreprise, j'ai assuré un rôle polyvalent en concevant les projets dans leur intégralité (infographie et développement). Tous les projets fonctionnaient avec un back-office développé spécialement pour les besoins du site.</div>
<div id="portfolio-3" class="portfolio_contenu" style="visibility:hidden">En 2004 .....</div>
</div>
<div id="barre"></div>
[b]<!-- Affichage des projets sur la droite --> [/b]
<div id="portfolio_menu">
<a href="#portfolio-1" class="icone"><img src="imgs/realisations/icone.jpg"></a>
<a href="#portfolio-2" class="icone"><img src="imgs/realisations/icone.jpg"></a>
<a href="#portfolio-3" class="icone"><img src="imgs/realisations/icone.jpg"></a>
</div>
</li>
</ul>
CSS
/* ACCUEIL */
#accueil
{
position: absolute;
top: 64px;
width: 400px;
height: 372px;
background-color: #932011;
border: solid 1px #FFCB00;
padding: 55px;
}
.edito_contenu
{
position: absolute;
top: 55px;
left: 55px;
width: 400px;
line-height: 19px;
}
#realisation
{
position: relative;
top: 64px;
left: 480px;
z-index:1;
}
#realisation1 img
{
border: solid 2px #FFCB00;
}
/* LE PORTFOLIO - PARTIE QUI SUIS JE ?*/
#portfolio
{
/* position: relative;*/
float: left;
top: 0px;
width: 475px;
height: 545px;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.portfolio_contenu
{
position: absolute;
top: 0px;
width: 475px;
height: 545px;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.portfolio_content /* titre image + txt d'intro */
{
position: absolute;
top: 0x;
width: 475px;
height: 545px;
}
#portfolio_menu
{
position: relative;
float: left;
top: 5px;
left: 52px;
width: 150px;
height: 545px;
}
#barre
{
position: relative;
float: left;
width: 2px;
height: 545px;
top: 5px;
left: 40px;
border-left: solid 1px #FFCB00;
}
Modifié par Stephanie_flyaway (24 Sep 2012 - 18:11)
