Bonjour à tous,
Je suis actuellement en train d'effectuer la conception d'une vitrine pour une menuiserie.
Je bloque sur la mise en forme d'une des pages. J'aimerai pouvoir mettre un paragraphe complet à côté d'une figure (je dis bien une figure et non une image).
voici mon code html(la portion ou je voudrais faire cette mise en forme)
h2 class="center">Tables faites main</h2>
<nav>
<p class="pleft">Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse.</p>
<figure class="figright">
<img src="img/table.png" alt="table faite main" class="augmented">
<figcaption>Nos plus belles tables</figcaption>
</figure>
</nav>
et la portion de mon code css correspodante
figcaption
{
display: table-caption;
caption-side: top;
text-align: center;
padding: 0.5em;
border : solid;
border-bottom: none;
background-color: purple;
}
footer
{
position:absolute;
bottom:0;
width:100%;
height:100px;
}
.figright
{
width: 30%;
display: table;
border: solid;
border-top: none;
padding-top: 0;
float:right;
}
.pleft
{
float:left;
}
J'attend vos retours et vous remercie d'avance.
Je suis actuellement en train d'effectuer la conception d'une vitrine pour une menuiserie.
Je bloque sur la mise en forme d'une des pages. J'aimerai pouvoir mettre un paragraphe complet à côté d'une figure (je dis bien une figure et non une image).
voici mon code html(la portion ou je voudrais faire cette mise en forme)
h2 class="center">Tables faites main</h2>
<nav>
<p class="pleft">Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse.</p>
<figure class="figright">
<img src="img/table.png" alt="table faite main" class="augmented">
<figcaption>Nos plus belles tables</figcaption>
</figure>
</nav>
et la portion de mon code css correspodante
figcaption
{
display: table-caption;
caption-side: top;
text-align: center;
padding: 0.5em;
border : solid;
border-bottom: none;
background-color: purple;
}
footer
{
position:absolute;
bottom:0;
width:100%;
height:100px;
}
.figright
{
width: 30%;
display: table;
border: solid;
border-top: none;
padding-top: 0;
float:right;
}
.pleft
{
float:left;
}
J'attend vos retours et vous remercie d'avance.