quelconque et preciser une WIDTH à l'image ex:
*/
.imgCentre
{
margin: auto;
}
/* Pour la mettre a droite placer l'img dans une div et lui affecter la classe suivante, ex:
*/
.divDroite
{
text-align: right;
}
.ImgDroite
{
display: inline-block;
vertical-align: top;
}
/* Pour la mettre a gauche... l'inserer tout simplement ! (faire suivre d'un pour aller a la ligne)
NB: Toujours definir une largeur d'image en POURCENTAGE pour qu'elle puisse se compresser et s'etirer.
Pour eviter que l'image ne s'etire trop, on lui applique un "max-width" (uniquement via css! :P)
On peut choisir simplement la largeur réelle de l'image (ici par ex 200px) :
Pour un element HTML:
![]()
Mettre ca dans le css: #MonImage
{
max-width: 200px;
}
En esperant que ca soit clair et que je n'ai pas dit de betises... (j'ai pas testé ^^)
--------------------
PS: Pour le tableau des millesimes, tu peux tout à fait affecter une note "-", a condition de la mettre entre guillemets ou apostrophes !!
=> tu regarderas Champagne pour l'exemple.
PSS: Penser à aerer les textes de description "Ici on explique" (slide 3 et 4) avec des à foison ! :D
Boooonne chaaance !
FIN */
body {
font-family: Verdana, sans-serif;
margin: 0;
position: relative;
width: 100%;
color: white;
font-size: 14px;
}
.slideTitle h1
{
box-shadow: 2px 2px 2px black;
font-variant:small-caps;
background-color: rgba(0, 0, 0, 0.9);
padding: 0px;
margin: 0;
padding-left: 1%;
}
#navWrap
{
position: fixed;
right: 10px;
top: 25%;
color: black;
z-index: 90;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 2px 2px 2px black;
}
#navWrap li
{
padding: 5px;
width: 100%;
}
#navWrap ul
{
margin:0;
text-align: left;
color: white;
}
.navMenuIcon
{
font-variant: small-caps;
font-weight: bold;
}
.navPop
{
height: 100%;
}
.centertalign
{
text-align: center !important;
}
.Hmenu
{
font-variant: small-caps;
color: #d83c3a;
cursor: pointer;
}
.soustexte
{
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.soustexte p
{
width: 90%;
margin: auto;
padding-top: 1%;
padding-bottom: 1%;
}
#navWrap li:hover .navPop
{
color: #d83c3a;
}
#socialWrap
{
position: fixed;
right: 10px;
top: 60%;
text-align: left;
z-index: 90;
}
#wrapLeft
{
display: inline-block;
width: 100%;
}
.scrolltable
{
height: 600px;
width: 100%;
table-layout:fixed;
overflow-y: scroll;
overflow-x:hidden;
}
.innerScrollDiv tr
{
height: 2em;
}
.innerScrollDiv
{
width: 100%;
height: 300px;
overflow:visible;
box-sizing:border-box;
}
#wineTableWrap
{
width: 75%;
display: inline-block;
vertical-align: top;
background-color: rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 2px black;
margin-bottom: 2em;
word-wrap: break-word;
}
.wineTable
{
width: 100%;
text-align: center;
table-layout:fixed;
font-weight:bold;
}
.wineTable th
{
font-variant:small-caps;
background-color: rgba(0, 0, 0, 0.6);
}
.wineTable th:hover a
{
color: #d83c3a;
}
#logoBonial
{
height: 1em;
display: inline-block;
vertical-align: middle;
}
h1
{
font-size: 2.5em;
font-variant:small-caps;
margin: 0;
}
h2
{
font-size: 2em;
font-variant:small-caps;
margin: 0;
}
h3
{
font-size: 1.2em;
font-variant:small-caps;
margin: 0;
}
h4
{
font-size: 0.8em;
font-variant:small-caps;
margin: 0;
}
p
{
color: white;
position: relative;
margin: 0;
}
.bottom-arrow
{
position: absolute;
bottom: 0;
left: 50%;
z-index: 9000;
}
.top-arrow
{
position: absolute;
top: 0;
left: 50%;
z-index: 9000;
}
a
{
text-decoration : none;
color: white;
}
.clair
{
background-image: url(images/white-grapes.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
.sombre
{
background-image: url(images/wine-stocks2.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
.bottle
{
background-image: url(images/red32.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
.land
{
background-image: url(images/land5.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
.rouge
{
background-image: url(images/wineglass.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
ul
{
text-align: center;
list-style-type: none;
padding: 0;
}
li
{
display: block;
margin: 5px;
}
.light
{
font-size: 2em;
}
.slide
{
position: relative;
display: inline-block;
width: 100%;
box-shadow: 4px 4px 4px black;
}
.sectionWrap
{
margin: auto;
margin-top: 3%;
width: 75%;
color: white;
}
#wrapMap {
position: relative;
height: 100%;
max-height: 700px;
}
.wrapped
{
background-color: rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 2px black;
padding: 2%;
}
.wrapped h1
{
vertical-align: middle;
}
.double
{
display: inline-block;
vertical-align: top;
width: 50%;
}
.right
{
float: right;
}
.left
{
float: left;
}
/* DEGUSTATION */
.tile
{
background-color: rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 2px black;
}
.tile h3
{
background-color: rgba(0, 0, 0, 0.6);
box-shadow: 0px 2px 2px black;
text-align:center;
}
.tile p,ul
{
width: 90%;
margin: auto;
padding-top: 2%;
padding-bottom: 2%;
text-align: left;
}
.leftTileWrap
{
display:inline-block;
width: 23%;
margin-right: 2%;
}
#sources
{
text-align: left;
color:white;
font-variant: normal;
background-color: rgba(0,0,0,0.6);
min-height: 100px;
width: 100%;
}
#sources ul
{
text-align: left;
}
#disclaimer
{
width: 90%;
margin: auto;
text-align: center;
border: 1px solid white;
background-color: rgba(255,255,255,0.3);
}