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;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
||||
#content_inter {
|
||||
@@ -754,29 +570,6 @@ adresse1 td {
|
||||
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
|
||||
*/
|
||||
|
||||
@@ -34,6 +34,13 @@
|
||||
href="css/lightbox.css"
|
||||
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
|
||||
@@ -163,7 +170,8 @@
|
||||
|
||||
<div id="right">
|
||||
<div id="middle">
|
||||
<div id="top" style="height: 25px">
|
||||
|
||||
<div id="top">
|
||||
<div class="nom">
|
||||
<div class="carre">
|
||||
<img
|
||||
@@ -800,18 +808,12 @@
|
||||
<div class="title">L’art mène le monde</div>
|
||||
<div class="texte_manif">
|
||||
<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">
|
||||
Disposées pendant le confinement sur le territoire de la
|
||||
ville de Sceaux et perçues lors des précieuses sorties du
|
||||
public, ces 5 citations rappelaient la présence
|
||||
essentielle de l’Art dans nos vies.
|
||||
</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>
|
||||
<!-- fin lart mene le monde -->
|
||||
|
||||
@@ -2136,49 +2138,6 @@
|
||||
</div>
|
||||
<!-- 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 -->
|
||||
</div>
|
||||
<!-- fin news -->
|
||||
|
||||
Reference in New Issue
Block a user