Bonjour,
j'ai un arbre généalogique en HTML5 / CSS un peu trop codé à la porcasse que je voudrais adapter.
si dans le body, j'indique la largeur (width) en px, ça fonctionne. Par contre, si je veux rajouter un rang de généalogie ou en virer un, j'ai de l'espace en trop ou en moins.
si je dans le body, j'indique 'width: auto', ça occupe la largeur de l'écran (bien). Par contre, comme chaque personne a une largeur fixe, j'ai un sale retour de l'arbre généalogique à la ligne.
Si en plus, on suit les nouvelles directives de Google qui voudrait que ce soit mobile-compliant, ça se complique.
et si pour finir, on rajoute madame qui voudrait avec un petit +/- pour faire un collapse/expand, là ça dépasse mes compétences.
Merci,
Vincent
voici le code :
et l'HTML :
Modifié par nolme (04 May 2015 - 21:45)
j'ai un arbre généalogique en HTML5 / CSS un peu trop codé à la porcasse que je voudrais adapter.
si dans le body, j'indique la largeur (width) en px, ça fonctionne. Par contre, si je veux rajouter un rang de généalogie ou en virer un, j'ai de l'espace en trop ou en moins.
si je dans le body, j'indique 'width: auto', ça occupe la largeur de l'écran (bien). Par contre, comme chaque personne a une largeur fixe, j'ai un sale retour de l'arbre généalogique à la ligne.
Si en plus, on suit les nouvelles directives de Google qui voudrait que ce soit mobile-compliant, ça se complique.
et si pour finir, on rajoute madame qui voudrait avec un petit +/- pour faire un collapse/expand, là ça dépasse mes compétences.
Merci,
Vincent
voici le code :
/*Now the CSS*/
* {margin: 0; padding: 0;}
body {
/*font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;*/
background-color: #FFFFFF;
line-height: 1.4;
font-family: 'Cambria',Calibri,serif;
font-size: 0.9em;
color: #666666;
margin: 0;
padding: 0;
color: #000;
width: auto;
}
.container {
float:left;
background-color: #EEEEEE;
border: 1px solid #AAAAAA;
padding: 5px;
margin:5px;
height:auto!important;
-moz-border-radius: .5em; /* gecko */
-webkit-border-radius: .5em; /* webkit */
border-radius: .5em; /* w3 */
-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
}
.container h1 {
border-bottom: 1px solid #BBBBBB !important;
color: #222222;
font-size: 2.2em;
font-weight: bold;
margin: 5px 0px 10px 0px !important;
padding-bottom: 5px;
white-space:pre-line;
text-align:center;
}
header {
background-color: #e0edfc;
height:120px;
text-align: center;
background: url(../images/top-back.png) repeat-x scroll 0 0 #FFFFFF;
}
header img {
border: 1px solid #ccc;
padding: 0;
margin:0;
color: #000;
-moz-border-radius: .5em; /* gecko */
-webkit-border-radius: .5em; /* webkit */
border-radius: .5em; /* w3 */
-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
}
/* ~~ Pied de page ~~ */
footer {
padding: 10px 0;
position: relative;/* donne hasLayout à IE6 de façon à permettre un effacement correct */
clear: both; /* cette propriété d'effacement force le .container à comprendre où se terminent les colonnes et à les contenir */
background-color: #FFFFFF;
color: #333333;
text-align: center;
font-family: "Trebuchet MS", Verdana, Helvetica, Arial,sans-serif !important;
font-size:0.7em;
font-weight:normal;
font-style:italic;
}
footer img {
border: 1px solid #ccc;
padding: 0;
margin:0;
-moz-border-radius: .5em; /* gecko */
-webkit-border-radius: .5em; /* webkit */
border-radius: .5em; /* w3 */
-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
}
.genealogie-photo-animal {
padding: 0;
margin: 0;
height:50px;
width:auto;
-moz-border-radius: .7em; /* gecko */
-webkit-border-radius: .7em; /* webkit */
border-radius: .7em; /* w3 */
}
.male {
height: 80px;
background-color: #91C8FF;
font-weight: bold;
font-size: x-large;
-moz-border-radius: .5em; /* gecko */
-webkit-border-radius: .5em; /* webkit */
border-radius: .5em; /* w3 */
-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
}
.female {
height: 80px;
background-color: #FFD2FF;
font-weight: bold;
font-size: x-large;
-moz-border-radius: .5em; /* gecko */
-webkit-border-radius: .5em; /* webkit */
border-radius: .5em; /* w3 */
-moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
-webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) ;
}
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
et l'HTML :
<!DOCTYPE html>
<html>
<head>
<!-- META start -->
<!-- TemplateBeginEditable name="META" -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name=Description content="TAG_DOC_DESCRIPTION" />
<meta name=Keywords content="TAG_DOC_KEYWORDS" />
<meta name="robots" content="all" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="1 month" />
<meta name="author" content="TAG_DOC_AUTHOR" />
<!-- Vignette Facebook -->
<meta property="og:description" content="Pedigree de l'animal" />
<meta property="og:title" content="Pedigree" />
<meta property="og:image" content="TAG_DOC_FACEBOOK_THUMB" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<!-- TemplateEndEditable -->
<!-- META end -->
<!-- Nolmë Informatique - PedigreeGenerator -->
<!-- TemplateBeginEditable name="doctitle" -->
<title>TAG_ANIMAL_TITLE</title>
<!-- TemplateEndEditable -->
<!-- Other start -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- Other end -->
<!-- Head Scripts start -->
<!-- Head Scripts end -->
<!-- CSS start -->
<link href="../css/pedigree.css" rel="stylesheet" type="text/css" />
<!-- CSS end -->
<!-- TemplateBeginEditable name="custom scripts" -->
<!-- TemplateEndEditable -->
</head>
<body id="body_fiche-animal">
<!-- header start-->
<header>
<img alt="TAG_DOC_TOPBANNER_ALT" height="97" src="../images/top-banner.jpg">
</header>
<!-- header end-->
<!-- main start -->
<!-- We will create a family tree using just CSS(3); The markup will be simple nested lists -->
<div class="container">
<!-- TemplateBeginEditable name="nomDuChien" -->
<h1>TAG_ANIMALNAME0</h1>
<!-- TemplateEndEditable -->
<div class="tree">
<!-- TemplateBeginEditable name="pedigree" -->
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL0_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL0_LINE0<br/>
TAG_ANIMAL0_LINE1
</a>
<ul>
<li >
<!-- MERE -->
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL2_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL2_LINE0<br/>
TAG_ANIMAL2_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL6_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL6_LINE0<br/>
TAG_ANIMAL6_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20female.jpg" alt="AGD-MERE" /><br/>
TAG_ANIMAL14_LINE0<br/>
TAG_ANIMAL14_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20female.jpg" alt="AAGD-MERE" /><br/>
TAG_ANIMAL30_LINE0<br/>
TAG_ANIMAL30_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20male.jpg" alt="AAGD-PERE" /><br/>
TAG_ANIMAL29_LINE0<br/>
TAG_ANIMAL29_LINE1
</a>
</li>
</ul>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20male.jpg" alt="AGD-PERE" /><br/>
TAG_ANIMAL13_LINE0<br/>
TAG_ANIMAL13_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20female.jpg" alt="AAGD-MERE" /><br/>
TAG_ANIMAL28_LINE0<br/>
TAG_ANIMAL28_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20male.jpg" alt="AAGD-PERE" /><br/>
TAG_ANIMAL27_LINE0<br/>
TAG_ANIMAL27_LINE1
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL5_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL5_LINE0<br/>
TAG_ANIMAL5_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL12_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL12_LINE0<br/>
TAG_ANIMAL12_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20female.jpg" alt="AAGD-MERE" /><br/>
TAG_ANIMAL26_LINE0<br/>
TAG_ANIMAL26_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/chien%20generique%20male.jpg" alt="AAGD-PERE" /><br/>
TAG_ANIMAL25_LINE0<br/>
TAG_ANIMAL25_LINE1
</a>
</li>
</ul>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL11_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL11_LINE0<br/>
TAG_ANIMAL11_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL24_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL24_LINE0<br/>
TAG_ANIMAL24_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL23_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL23_LINE0<br/>
TAG_ANIMAL23_LINE1
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<!-- PERE -->
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL1_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL1_LINE0<br/>
TAG_ANIMAL1_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL4_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL4_LINE0<br/>
TAG_ANIMAL4_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL10_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL10_LINE0<br/>
TAG_ANIMAL10_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL22_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL22_LINE0<br/>
TAG_ANIMAL22_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL21_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL21_LINE0<br/>
TAG_ANIMAL21_LINE1
</a>
</li>
</ul>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL9_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL9_LINE0<br/>
TAG_ANIMAL9_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL20_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL20_LINE0<br/>
TAG_ANIMAL20_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL19_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL19_LINE0<br/>
TAG_ANIMAL19_LINE1
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL3_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL3_LINE0<br/>
TAG_ANIMAL3_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL8_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL8_LINE0<br/>
TAG_ANIMAL8_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL18_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL18_LINE0<br/>
TAG_ANIMAL18_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL17_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL17_LINE0<br/>
TAG_ANIMAL17_LINE1
</a>
</li>
</ul>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL7_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL7_LINE0<br/>
TAG_ANIMAL7_LINE1
</a>
<ul>
<li>
<a class="female" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL16_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL16_LINE0<br/>
TAG_ANIMAL16_LINE1
</a>
</li>
<li>
<a class="male" href="#">
<img class="genealogie-photo-animal" src="../photos/TAG_ANIMAL15_PHOTO" alt="Photo" /><br/>
TAG_ANIMAL15_LINE0<br/>
TAG_ANIMAL15_LINE1
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- TemplateEndEditable -->
</div> <!-- Tree -->
</div> <!-- Container -->
<!-- main end -->
<!-- footer start -->
<footer>
<img alt="TAG_DOC_BOTTOMBANNER_ALT" src="../images/bottom-banner.png"><br/>
Tous droits réservés.<br/>
</footer>
<!-- footer end -->
</body>
</html>Modifié par nolme (04 May 2015 - 21:45)