Bonjour, bonjour,
Des jours de recherches, de bidouilles html mais la je n'y arrive pas, donc un petit coup conseil eclairé s'il vous plait.
Donc voila, le but n'est pas de creer un site a proprement dit mais une page support de revision pour mes eleves, mais egalement pour moi-meme avec plein de point lien avec leur definition corerspondante.
L'idee est plutot de pouvoir le visualiser sur mon ipad et ipod sans vraiment creer une application, juste de l'html et css.
Je joins 2 images pour expliquer ce que j'aimerais faire:
une page principale avec les differents point lien place sur le corps et lorsque l'on clique sur un lien, une nouvelle page avec juste le point, la ref et la definition correpondante apparaissent. :siffle:
page principale:
http://synergology.jp/principale.jpg
et la page de lien exemple:
http://synergology.jp/lien.jpg
(on ne peut plus inserer d'image directement dans la discussion??)
Et voici un bout de mon codage laborieux de debutant
que j'ai fait pour placer mes points et faire les liens sur une nouvelle image; malheureusement ca ne marche pas car evidement fait comme ca, lorsque je fais disparaitre les points pour n'en garder qu'un tout se decale. ( m'en suis bien sur apercu une fois avoir tout placé)
html
{
margin: 0;
padding: 0;
}
body
{
width:950px;
height:1307px; /*ne pas oublier de rajouter 20px en top pour tous les points*/
margin: 0px auto;
background-color:white;
background-image:url(image/corps.jpg);
background-repeat:no-repeat;
background-position:center center;
}
#A_1_P0_D, #A_1_P1_D, #A_1_P2_D, #A_2_P0_D, #A_2_P1_D, #A_2_P2_D
{
display:block;
}
#A_1_P0_D
{
margin:264px 0 0 492px;
width:13px;
height:13px;
position:absolute;
}
#A_1_P1_D
{
margin:-25px 0 0 -31px;
width:13px;
height:13px;
position:absolute;
}
#A_1_P2_D
{
margin:-14px 0 0 49px;
width:13px;
height:13px;
position:absolute;
}
#A_2_P0_D
{
margin:30px 0 0 -3px;
width:13px;
height:13px;
position:absolute;
}
#A_2_P1_D
{
margin:-11px 0 0 -47px;
width:13px;
height:13px;
position:absolute;
}
#A_2_P2_D
{
margin:-10px 0 0 86px;
width:13px;
height:13px;
position:absolute;
}
.....
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="point_du_corps.css">
<title>Microdemangeaisons du corps</title>
</head>
<body>
<div id="A_1_P0_D"><a href="A_1_P0_D.html"><img src="image/point.png"/>
<div id="A_1_P1_D"><a href="A_1_P1_D.html"><img src="image/point.png"/>
<div id="A_1_P2_D"><a href="A_1_P2_D.html"><img src="image/point.png"/>
<div id="A_2_P0_D"><a href="A_2_P0_D.html"><img src="image/point.png"/>
<div id="A_2_P1_D"><a href="A_2_P1_D.html"><img src="image/point.png"/>
<div id="A_2_P2_D"><a href="A_2_P2_D.html"><img src="image/point.png"/>
<div id="A_2_P10_D"><a href="A_2_P10_D.html"><img src="image/point.png"/>
<div id="A_2_P3_D"><a href="A_2_P3_D.html"><img src="image/point.png"/>
<div id="A_2_P4_D"><a href="A_2_P4_D.html"><img src="image/point.png"/>
<div id="A_3_P0_D"><a href="A_3_P0_D.html"><img src="image/point.png"/>
<div id="A_3_P1_D"><a href="A_3_P1_D.html"><img src="image/point.png"/>
Ne rigolez pas s'il vous plait:rateau:
Une petite suggetion pour m'aider?
merci d'avance:love:
Des jours de recherches, de bidouilles html mais la je n'y arrive pas, donc un petit coup conseil eclairé s'il vous plait.
Donc voila, le but n'est pas de creer un site a proprement dit mais une page support de revision pour mes eleves, mais egalement pour moi-meme avec plein de point lien avec leur definition corerspondante.
L'idee est plutot de pouvoir le visualiser sur mon ipad et ipod sans vraiment creer une application, juste de l'html et css.
Je joins 2 images pour expliquer ce que j'aimerais faire:
une page principale avec les differents point lien place sur le corps et lorsque l'on clique sur un lien, une nouvelle page avec juste le point, la ref et la definition correpondante apparaissent. :siffle:
page principale:
http://synergology.jp/principale.jpg
et la page de lien exemple:
http://synergology.jp/lien.jpg
(on ne peut plus inserer d'image directement dans la discussion??)
Et voici un bout de mon codage laborieux de debutant
que j'ai fait pour placer mes points et faire les liens sur une nouvelle image; malheureusement ca ne marche pas car evidement fait comme ca, lorsque je fais disparaitre les points pour n'en garder qu'un tout se decale. ( m'en suis bien sur apercu une fois avoir tout placé)html
{
margin: 0;
padding: 0;
}
body
{
width:950px;
height:1307px; /*ne pas oublier de rajouter 20px en top pour tous les points*/
margin: 0px auto;
background-color:white;
background-image:url(image/corps.jpg);
background-repeat:no-repeat;
background-position:center center;
}
#A_1_P0_D, #A_1_P1_D, #A_1_P2_D, #A_2_P0_D, #A_2_P1_D, #A_2_P2_D
{
display:block;
}
#A_1_P0_D
{
margin:264px 0 0 492px;
width:13px;
height:13px;
position:absolute;
}
#A_1_P1_D
{
margin:-25px 0 0 -31px;
width:13px;
height:13px;
position:absolute;
}
#A_1_P2_D
{
margin:-14px 0 0 49px;
width:13px;
height:13px;
position:absolute;
}
#A_2_P0_D
{
margin:30px 0 0 -3px;
width:13px;
height:13px;
position:absolute;
}
#A_2_P1_D
{
margin:-11px 0 0 -47px;
width:13px;
height:13px;
position:absolute;
}
#A_2_P2_D
{
margin:-10px 0 0 86px;
width:13px;
height:13px;
position:absolute;
}
.....
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="point_du_corps.css">
<title>Microdemangeaisons du corps</title>
</head>
<body>
<div id="A_1_P0_D"><a href="A_1_P0_D.html"><img src="image/point.png"/>
<div id="A_1_P1_D"><a href="A_1_P1_D.html"><img src="image/point.png"/>
<div id="A_1_P2_D"><a href="A_1_P2_D.html"><img src="image/point.png"/>
<div id="A_2_P0_D"><a href="A_2_P0_D.html"><img src="image/point.png"/>
<div id="A_2_P1_D"><a href="A_2_P1_D.html"><img src="image/point.png"/>
<div id="A_2_P2_D"><a href="A_2_P2_D.html"><img src="image/point.png"/>
<div id="A_2_P10_D"><a href="A_2_P10_D.html"><img src="image/point.png"/>
<div id="A_2_P3_D"><a href="A_2_P3_D.html"><img src="image/point.png"/>
<div id="A_2_P4_D"><a href="A_2_P4_D.html"><img src="image/point.png"/>
<div id="A_3_P0_D"><a href="A_3_P0_D.html"><img src="image/point.png"/>
<div id="A_3_P1_D"><a href="A_3_P1_D.html"><img src="image/point.png"/>
Ne rigolez pas s'il vous plait:rateau:
Une petite suggetion pour m'aider?
merci d'avance:love:
