Bonjour,
Voilà, je m'essaye à jQuery dans l'optique de réaliser le site de poésie d'une amie.
Pour l'instant j'attends de l'hébergeur les codes et adresses de connexion ainsi que le nom de domaine.
Je meuble en testant des petits trucs sympas, dont vous pouvez voir le résultat provisoire à cette adresse : Les poèmes de Blandine
Comme vous le voyez les deux zones <article> mitoyennes se retrouvent décalées en hauteur l'une par rapport à l'autre.
Voici le code de la page maquette :
et la feuille de style :
Dans le site final le positionnement des <article> sera aléatoirement alterné, le texte à droite ou à gauche et leur mode d'animation au chargement sera lui aussi choisi aléatoirement (j'ai d'autres astuces en tête).
Mais, pour l'instant j'aimerais comprendre pourquoi l'<article> “tooglé” (l'image) se retrouve décalé plus haut que l'<article> du texte.
J'ai essayé en inversant droite/gauche ça donne le même rendu décalé.
La version de jQuery est :
Et là je vous abandonne car je dois aller rendre visite à “belle-maman”
Mais j'attends impatiemment vos remarques et observations.
Merci.
Voilà, je m'essaye à jQuery dans l'optique de réaliser le site de poésie d'une amie.
Pour l'instant j'attends de l'hébergeur les codes et adresses de connexion ainsi que le nom de domaine.
Je meuble en testant des petits trucs sympas, dont vous pouvez voir le résultat provisoire à cette adresse : Les poèmes de Blandine
Comme vous le voyez les deux zones <article> mitoyennes se retrouvent décalées en hauteur l'une par rapport à l'autre.
Voici le code de la page maquette :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="pn.css" />
<title>Les poèmes de Blandine</title>
<script src="jquery.js"></script>
<script>
jQuery(document).ready(function(){
$(window).load(function(){
$("#illustration").hide() .toggle("slow") ,
$("#poeme").fadeTo(1750,1.0)});
});
</script>
</head>
<body>
<div id="bando"></div>
<article id="illustration"></article>
<article id="poeme">
<h3>Mentez mon bel ami - 9 janv 2017</h3>
<p>Ohhh ! mentez<br />et mentez encore<br />mon bel ami.<br />Dîtes que ce fourreau<br />me fait taille de guêpe<br />et grâce de libellule.<br />Que comme à mes vingt ans<br />j'ai le ciel dans les iris,<br />que mes yeux sont l'encens<br />d'un Orient lointain.<br />Que vos doigts élégants<br />glissent dans mes cheveux bruns !<br />C'est l'éternité d'une heure,<br />gagnons là sans peur.</p><p class="auteur">Blandine DEUMIE</p>
</article>
<div id="navig">
<p id="prev"></p>
<p id="next"></p>
</div>
</body>
</html>et la feuille de style :
body {width:1084px;
margin:auto;}
#bando {min-height:140px;
max-height:140px;
width:1084px;
background-image:url(bandeau.jpg);
background-size:cover
}
#bando:hover {background-position:0 -140px;}
#poeme{background-color:gray;
color:white;
font-weight:bold;
line-height:1.5;
padding-left:15px;
padding-right:15px;
opacity:0;
}
#illustration {background-image:url("plumesmauves.jpg");
background-repeat:no-repeat;
background-size:cover;}
article {display: inline-block;
height:456px;
width:520px;
border:2px dotted;
}
#navig {width:100%;
border:2px dotted;
}
#prev, #next
{
min-height:39px;
max-height:39px;
width:116px;
display: inline-block;
}
#next {background-image:url(next-pen.jpg);position: relative; left:810px;}
#prev {background-image:url(previous-pen.jpg)}
#prev:hover,#next:hover {background-position:0 -39px; }
.auteur {font-style:italic;
font-weight:bolder;
text-align: right;
}Dans le site final le positionnement des <article> sera aléatoirement alterné, le texte à droite ou à gauche et leur mode d'animation au chargement sera lui aussi choisi aléatoirement (j'ai d'autres astuces en tête).
Mais, pour l'instant j'aimerais comprendre pourquoi l'<article> “tooglé” (l'image) se retrouve décalé plus haut que l'<article> du texte.
J'ai essayé en inversant droite/gauche ça donne le même rendu décalé.
La version de jQuery est :
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/Et là je vous abandonne car je dois aller rendre visite à “belle-maman”
Mais j'attends impatiemment vos remarques et observations.
Merci.
