reorganized manifestation css
This commit is contained in:
hugo LAMY
193
www/css/page_manifestations.css
Normal file
193
www/css/page_manifestations.css
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
/* page manifestations */
|
||||||
|
|
||||||
|
#middle {
|
||||||
|
float: left;
|
||||||
|
width: 600px;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
#top {
|
||||||
|
float: left;
|
||||||
|
height: 25px;
|
||||||
|
width: 480px;
|
||||||
|
margin-left: 98px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
.nom {
|
||||||
|
float: left;
|
||||||
|
height: 12px;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.carre {
|
||||||
|
float: left;
|
||||||
|
width: 10px;
|
||||||
|
height: 12px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#manifestations {
|
||||||
|
position: relative;
|
||||||
|
left: 100px;
|
||||||
|
top: 0px;
|
||||||
|
float: left;
|
||||||
|
width: 580px;
|
||||||
|
height: 600px;
|
||||||
|
|
||||||
|
#Container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 510px;
|
||||||
|
height: 530px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
|
#News {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
width: 480px;
|
||||||
|
height: 530px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.Scroller-Container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
.video {
|
||||||
|
width: 480px;
|
||||||
|
height: 400px;
|
||||||
|
margin-top: 3px;
|
||||||
|
|
||||||
|
&.manifestation_poster {
|
||||||
|
position: relative;
|
||||||
|
background: black;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
video {
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
width: 480px;
|
||||||
|
height: 80px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
&.manifestation_flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 480px;
|
||||||
|
height: 20px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 19px;
|
||||||
|
color: #cc3300;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.texte_manif {
|
||||||
|
width: 480px;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.images_grand {
|
||||||
|
width: 480px;
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images_grand1 {
|
||||||
|
width: 480px;
|
||||||
|
height: 357px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images_grand2 {
|
||||||
|
width: 480px;
|
||||||
|
height: 384px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images_grand3 {
|
||||||
|
width: 480px;
|
||||||
|
height: 351px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images_grand4 {
|
||||||
|
width: 480px;
|
||||||
|
height: 402px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images_grand5 {
|
||||||
|
width: 480px;
|
||||||
|
height: 372px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images1 {
|
||||||
|
width: 480px;
|
||||||
|
height: 80px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vignette a {
|
||||||
|
float: left;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vignette a:hover {
|
||||||
|
float: left;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border: 1px solid #cc3300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img_grand a {
|
||||||
|
float: left;
|
||||||
|
width: 478px;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
.img_grand a:hover {
|
||||||
|
float: left;
|
||||||
|
width: 478px;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid #cc3300;
|
||||||
|
}
|
||||||
|
|
||||||
|
#trait_vertical1 {
|
||||||
|
float: left;
|
||||||
|
height: 610px;
|
||||||
|
width: 1px;
|
||||||
|
margin-top: 48px;
|
||||||
|
margin-left: 90px;
|
||||||
|
border-left: 1px solid #000000;
|
||||||
|
}
|
||||||
@@ -301,190 +301,6 @@ margin-left:262px;*/
|
|||||||
padding-top: 62px;
|
padding-top: 62px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page manifestations */
|
|
||||||
|
|
||||||
#middle {
|
|
||||||
float: left;
|
|
||||||
width: 600px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#top {
|
|
||||||
float: left;
|
|
||||||
height: 15px;
|
|
||||||
width: 480px;
|
|
||||||
margin-left: 98px;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carre {
|
|
||||||
float: left;
|
|
||||||
width: 10px;
|
|
||||||
height: 12px;
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nom {
|
|
||||||
float: left;
|
|
||||||
height: 12px;
|
|
||||||
width: auto;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#manifestations {
|
|
||||||
position: relative;
|
|
||||||
left: 100px;
|
|
||||||
top: 0px;
|
|
||||||
float: left;
|
|
||||||
width: 580px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#Container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 510px;
|
|
||||||
height: 530px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#News {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
/* overflow: hidden; */
|
|
||||||
width: 480px;
|
|
||||||
height: 530px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#News {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Scroller-Container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
width: 480px;
|
|
||||||
height: 20px;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
font-size: 19px;
|
|
||||||
color: #cc3300;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video {
|
|
||||||
width: 480px;
|
|
||||||
height: 400px;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images_grand {
|
|
||||||
width: 480px;
|
|
||||||
height: 380px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images_grand1 {
|
|
||||||
width: 480px;
|
|
||||||
height: 357px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images_grand2 {
|
|
||||||
width: 480px;
|
|
||||||
height: 384px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images_grand3 {
|
|
||||||
width: 480px;
|
|
||||||
height: 351px;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images_grand4 {
|
|
||||||
width: 480px;
|
|
||||||
height: 402px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images_grand5 {
|
|
||||||
width: 480px;
|
|
||||||
height: 372px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images {
|
|
||||||
width: 480px;
|
|
||||||
height: 80px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.images1 {
|
|
||||||
width: 480px;
|
|
||||||
height: 80px;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vignette a {
|
|
||||||
float: left;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border: 1px solid #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vignette a:hover {
|
|
||||||
float: left;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border: 1px solid #cc3300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.texte_manif {
|
|
||||||
width: 480px;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.texte_manif p {
|
|
||||||
text-align: justify;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img_grand a {
|
|
||||||
float: left;
|
|
||||||
width: 478px;
|
|
||||||
height: auto;
|
|
||||||
border: 1px solid #ffffff;
|
|
||||||
}
|
|
||||||
.img_grand a:hover {
|
|
||||||
float: left;
|
|
||||||
width: 478px;
|
|
||||||
height: auto;
|
|
||||||
border: 1px solid #cc3300;
|
|
||||||
}
|
|
||||||
|
|
||||||
#trait_vertical1 {
|
|
||||||
float: left;
|
|
||||||
height: 610px;
|
|
||||||
width: 1px;
|
|
||||||
margin-top: 48px;
|
|
||||||
margin-left: 90px;
|
|
||||||
border-left: 1px solid #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* page interstices */
|
/* page interstices */
|
||||||
|
|
||||||
#content_inter {
|
#content_inter {
|
||||||
@@ -754,29 +570,6 @@ adresse1 td {
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* manifestation video poster
|
|
||||||
*/
|
|
||||||
.video.manifestation_poster {
|
|
||||||
position: relative;
|
|
||||||
background: black;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.video.manifestation_poster video {
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
object-position: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* manifestations images flex
|
|
||||||
*/
|
|
||||||
.images.manifestation_flex {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* SCROLL BAR
|
* SCROLL BAR
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -34,6 +34,13 @@
|
|||||||
href="css/lightbox.css"
|
href="css/lightbox.css"
|
||||||
title="Design"
|
title="Design"
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
media="screen"
|
||||||
|
type="text/css"
|
||||||
|
href="css/page_manifestations.css"
|
||||||
|
title="Design"
|
||||||
|
/>
|
||||||
|
|
||||||
<script type="text/javascript" src="javascript/prototype.js"></script>
|
<script type="text/javascript" src="javascript/prototype.js"></script>
|
||||||
<script
|
<script
|
||||||
@@ -163,7 +170,8 @@
|
|||||||
|
|
||||||
<div id="right">
|
<div id="right">
|
||||||
<div id="middle">
|
<div id="middle">
|
||||||
<div id="top" style="height: 25px">
|
|
||||||
|
<div id="top">
|
||||||
<div class="nom">
|
<div class="nom">
|
||||||
<div class="carre">
|
<div class="carre">
|
||||||
<img
|
<img
|
||||||
@@ -800,18 +808,12 @@
|
|||||||
<div class="title">L’art mène le monde</div>
|
<div class="title">L’art mène le monde</div>
|
||||||
<div class="texte_manif">
|
<div class="texte_manif">
|
||||||
<p style="font-size: 14px">Février - Avril 2020</p>
|
<p style="font-size: 14px">Février - Avril 2020</p>
|
||||||
<!--
|
|
||||||
<p style="font-style:italic;margin-top:5px;">Hôtel de ville de Sceaux</p>
|
|
||||||
-->
|
|
||||||
<p style="margin-top: 8px; text-align: justify">
|
<p style="margin-top: 8px; text-align: justify">
|
||||||
Disposées pendant le confinement sur le territoire de la
|
Disposées pendant le confinement sur le territoire de la
|
||||||
ville de Sceaux et perçues lors des précieuses sorties du
|
ville de Sceaux et perçues lors des précieuses sorties du
|
||||||
public, ces 5 citations rappelaient la présence
|
public, ces 5 citations rappelaient la présence
|
||||||
essentielle de l’Art dans nos vies.
|
essentielle de l’Art dans nos vies.
|
||||||
</p>
|
</p>
|
||||||
<!--
|
|
||||||
<p style="margin-top:8px;text-align:justify;">Macha Pandellé - Altone Mishino - Françoise Delecroix - ITAE - Wari Mansouri – Vincent Pandellé - Jean.José Baranes - Grégory Morizeau - Arnaud Laval - Renaud Bargues - Laurence Bost - Mitou Allalinarde - Christophe Bogdan - Claudine Sabatier - Anne Mauban - Jérôme Bouchez – Dashan Yang - Arnaud de l’Estourbeillon - Paule Millara - Margot Montenoise - Jouda Gomri - Lin Lei - Milan Atanaskovic - Bertell’</p>
|
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
<!-- fin lart mene le monde -->
|
<!-- fin lart mene le monde -->
|
||||||
|
|
||||||
@@ -2136,49 +2138,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- fin C1.1 -->
|
<!-- fin C1.1 -->
|
||||||
|
|
||||||
<!-- debut du paragraphe d'une nouvelle manifestation
|
|
||||||
|
|
||||||
<div class="video">
|
|
||||||
|
|
||||||
insérer le code de la vidéo s'il y a lieu, et effacer ce texte
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="images">
|
|
||||||
|
|
||||||
exemple pour 5 images, completer le chemin des images avec les noms à la place de "..." ainsi que title et alt avec le nom de la manifestation, ne pas oublier de glisser les nouvelles images p et g dans le dossier images/manifestations/, et effacer ce texte
|
|
||||||
|
|
||||||
<div class="vignette"><a href="images/manifestations/...1g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...1p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
|
|
||||||
|
|
||||||
<div class="vignette"><a href="images/manifestations/...2g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...2p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
|
|
||||||
|
|
||||||
<div class="vignette"><a href="images/manifestations/...3g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...3p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
|
|
||||||
|
|
||||||
<div class="vignette"><a href="images/manifestations/...4g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...4p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
|
|
||||||
|
|
||||||
<div class="vignette"><a href="images/manifestations/...5g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...5p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="title">....
|
|
||||||
|
|
||||||
mettre le nom de la manifestions et effacer ce texte
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="texte_manif"> ici tous les paragraphes qui suivent le titre
|
|
||||||
|
|
||||||
<p style="font-size:14px;">... remplir en cas de sous-titre, genre de manifestations</p>
|
|
||||||
<p style="font-style:italic;margin-top:5px;">... nom général et date</p>
|
|
||||||
|
|
||||||
<p style="margin-top:8px;text-align:justify;">... les noms des participants</p>
|
|
||||||
<p style="margin-top:8px;text-align:justify;">... Un texte sur l'événement</p>
|
|
||||||
|
|
||||||
fin de texte_manif</div>
|
|
||||||
|
|
||||||
|
|
||||||
fin du paragraphe nouvelle manifestation, à insérer à l'endroit souhaité entre fin et debut d'autres paragraphes -->
|
|
||||||
|
|
||||||
<!-- fin scroller container -->
|
<!-- fin scroller container -->
|
||||||
</div>
|
</div>
|
||||||
<!-- fin news -->
|
<!-- fin news -->
|
||||||
|
|||||||
Reference in New Issue
Block a user