28172 sujets

CSS et mise en forme, CSS3

Bonjour !

Voila je suis en train de créer un site, je ne sais pas si j'ai le droit de le citer mais ce n'est pas compliqué c'est mon pseudo avec un .fr ^^

J'utilise Wordpress et, tout en bas, mon footer laisse une marge degeulasse, j'aimerais qu'il soit collé au bas de la page et qu'il ne bouge pas ( qu'il fasse son rôle de bas de page quoi ! )

Donc je vous ai mis le code de style.css que j'ai dans wordpress.

/*
Theme Name: Rock N Rolla
Theme URI:  http://bandthemes.net/rock-n-rolla/
 
Author: Band Themes
Author URI:   http://bandthemes.net/
 
Description: Rock N Rolla is a theme designed specifically with bands in mind. It functions as a great looking blog theme, but also has some excellent (and optional) home page features to help promote your latest material, tours or any other content you want to. Display a Soundcloud, ReverbNation, Mixcloud or Spotify track or playlist. Display a large format image slider which also supports YouTube video. Or add a post carousel to promote tour dates or other content you want to highlite. Of course yo ucan also upload your own logo and control the theme colors as well.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 
Text Domain: rock-n-rolla
Tags: two-columns, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog, entertainment, photography

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Rock N Rolla is based on Underscores  http://underscores.me/,  (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal  http://necolas.github.com/normalize.css/
 
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Header
# Navigation
	## Links
	## Menus
# Slide
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
# Footer
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size:18px;
	color:#fff;
	font-weight: 100;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out; 
	-moz-transition: all .4s ease-in-out; 
	-webkit-transition: all .4s ease-in-out; 
	transition: all .4s ease-in-out; 
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 12px;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 14px;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
	color:#c7254e;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see  http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/  */
	box-sizing: inherit;
}

body {
	background: #111111; /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 1em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: #ed145b;
    color: #fff;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 18px;
    padding: 9px 4px;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #111;
    color: #fff;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	padding: 7px;
	max-width: 100%;
}

select {
	border: 1px solid #ccc;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header{
	background: rgba(0, 0, 0, .8);
	position: relative;
    z-index: 15;
}
.header-top{
	padding: 20px 20px 15px;
    border-bottom: solid 1px #252525;
	position: relative;
    overflow: hidden;
}
.header-bottom{
	padding: 10px;	
}
.site-title{
	margin: 0;
	font-family: 'Oswald', sans-serif;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 700;
}
.site-title a{
	color: #fff;
}
.site-description{
	color: #ccc;
    font-size: 24px;
    font-weight: 400;
	margin-bottom: 0;
}
.social-media{
	padding: 0;
	margin: 20px 0 0;
	list-style-type: none;	
	float: right;
}
.social-media li{
	display: inline-block;	
	margin: 1px;
	vertical-align: top;
}
#search-icon i.fa-search{
	padding-top: 6px;
	cursor: pointer;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out; 
	-moz-transition: all .4s ease-in-out; 
	-webkit-transition: all .4s ease-in-out; 
	transition: all .4s ease-in-out; 
}
.social-media li a, #search-icon i{
	background: #424242;
    width: 30px;
    display: block;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding-top: 3px;
}
.social-media li a:hover,
#search-icon i:hover{
	background: #ed145b;
}
.search-form-coantainer input[type="text"]{
	width: 100%;
    max-width: 70%;
	font-weight: 600;
}
.search-form-wrapper{
	padding: 20px 0;
	text-align: center;
	display: none;
	z-index: 9999999;
    position: relative;
}
.hide-icons{
	display: none !important;
}
#show-icons{
	text-align:center;
	display: none;
}
#show-icons .fa{
	cursor: pointer;	
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #ed145b;
}

a:hover,
a:focus,
a:active {
	border: none !important;
	outline: none !important;
	text-decoration: none;
	color: #fff;
}

a:focus {
	outline: thin dotted;
}

#site-navigation .menu-toggle{
	padding: 5px 10px;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	display: inline-block;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	color: #fff;
    font-size: 18px;
    text-transform: uppercase;padding: 5px 20px;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.9em;
	left: -999em;
	z-index: 99999;
	background: #232323;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 290px;
	border-bottom: solid 1px #333;
    padding: 10px 15px;
}
.main-navigation ul ul li:last-child a{
	border: none;	
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
	background: #ed145b;
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
	background: #ed145b;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Slide
--------------------------------------------------------------*/
.carousel-inner .item{
	height: 800px;    
	background-size: cover;
	overflow: hidden;
	text-align: center;
}
.carousel-control.left,
.carousel-control.right{
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    filter: none;
}
.featured-post-thumbnail{
	height: 350px;
    overflow: hidden;
	position: relative;
}
.flexslider .slides img{
	position: absolute;
	left:0;
}
.featured-post-thumbnail a{
	display: flex;
    justify-content: center;
	height: 350px;
}
.tour-title{
	align-self: center;
    font-size: 28px;
    font-family: 'Oswald', sans-serif;
    color: #fff;
	display:none;	
	z-index: 9;
}
.tour-title span{
	background: rgba(0, 0, 0, 0.5);
	padding:5px 15px;
	display: block;
}
#featured-post .section-label{
	font-size: 60px;
    font-weight: 700;
    text-align: center;
	margin: 40px 0;
}
#featured-post .section-label:before{
	display: none;	
}
.flexslider{
	margin-bottom: 0;
}
#featured-post{
	background: #000;
    padding: 20px 0;
}
.carousel-control {
	position: initial;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right{
	top: 50%;
}
.carousel-control .glyphicon-chevron-right {
    right: 5%
}
.carousel-control .glyphicon-chevron-left {
    left: 5%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	background:#000;
	padding:20px;
}
/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
	color: #111;
    font-weight: 500;
    width: 100%;
	padding: 5px;
}
.widget-title{
	margin:0;
	font-family: 'Oswald', sans-serif;
    font-size: 28px;
	position:relative;
	margin-bottom: 45px;
	color: #ccc;
	text-transform: uppercase;
}
.widget-title:before{
	content: '';
	width: 70px;
    border-bottom: solid 4px #ed145b;
    display: block;
	position: absolute;
    bottom: -23px;
}
.widget ul{
	list-style-type: none;
    margin: 0;
	padding-left:0;
}
.widget ul ul{
	padding-left:20px;
}
.widget ul li a:first-child:before{
	content: "\f101";
	font-family: FontAwesome;
	margin-right: 3px;
}
.widget ul li a{
	color: #fff;
}
.widget ul li a:hover{
	color: #ed145b;
	margin-left:5px;
}
.rock-n-rolla-recent-post li{
	margin-bottom: 25px;
}
.rock-n-rolla-recent-post li a:first-child:before{
	display: none;
}
.rock-n-rolla-recent-post li .post-image a:hover{
	margin: 0;
}
.rock_n_rolla_post_recent h5 {
    font-size: 18px;
    font-family: 'Oswald', sans-serif;
    display: inline;
}
.rock-n-rolla-recent-post .meta-info, 
.rock-n-rolla-recent-post .post-author a,
.rock-n-rolla-recent-post .meta-info-comment{
	color: #666666;	
	font-size: 14px;
	font-weight: 500;
}


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}
#primary{
	margin-top:40px;	
}
#main{
	padding: 20px;
	background: #000;
}
.entry-title a{    
	font-family: 'Oswald', sans-serif;
    font-size: 24px;
    color: #ed145b;
}
.entry-title a:hover{
	color: #fff;
}
.entry-title{
	margin-top:0;
}
.entry-header{
	margin-bottom: 20px;	
}
.single .entry-header,
.page .entry-header{
	margin-bottom: 0;
	position:relative;
	z-index:11;
}
.page .entry-header{
	margin-bottom:-10px;
}
.header-container{
	overflow: hidden;
    position: relative;
}
.search .entry-header{
	background-color: transparent;
}
.black-overlay{
	background: rgba(0, 0, 0, 0.5);
}
.search-results .entry-header{
	min-height: inherit;
    padding: 0;	
}
.header-wrapper {
	background: rgba(0, 0, 0, .8);
    width: 100%;
    z-index: 9999;
	right: 0;
}
img.single-post-thumbnail, img.full-slide {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	z-index:10;
	
}

.button-container, .entry-meta,
.entry-title{
	text-align: center;
	z-index: 9;
    position: relative;
}
.entry-title{
	font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 10px;
}
.read_more{
	background: #ed145b;
    color: #fff;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 18px;
    padding: 6px;
	border: solid 2px #ed145b;
}
.read_more:hover{
	background: transparent;
    border: solid 2px #ed145b !important;
    color: #ed145b;
}
.entry-meta a, .meta-info-comment{
	color: #ccc;
	font-size: 16px;
}
.posted-on, .byline{
	margin-right: 5px;
}
.bottom-border{
	content: '';
	border-bottom: solid 1px #111;
	display: block;	
	margin: 50px;
}
.post-container { 
	position: relative; 
	min-height: 550px;
}
.flip .front { 
	z-index: 900; 
	-webkit-transform: rotateY(180deg); 
	-moz-transform: rotateY(180deg); 
}
 .front { 
	top: 0; z-index: 900; 
	text-align: center; 
	-webkit-transform: rotateX(0deg) rotateY(0deg); 
	-webkit-transform-style: preserve-3d; 
	-webkit-backface-visibility: hidden; 
	-moz-transform: rotateX(0deg) rotateY(0deg); 
	-moz-transform-style: preserve-3d; 
	-moz-backface-visibility: hidden; 
	-o-transition: all .7s ease-in-out;
	-ms-transition: all .7s ease-in-out; 
	-moz-transition: all .7s ease-in-out; 
	-webkit-transition: all .7s ease-in-out; 
	transition: all .7s ease-in-out; 
  }
.back { 
	position: absolute; 
	top: 0; 
	z-index: 800; 
	-webkit-transform: rotateY(-180deg); 
	-webkit-transform-style: preserve-3d; 
	-webkit-backface-visibility: hidden; 
	-moz-transform: rotateY(-180deg); 
	-moz-transform-style: preserve-3d; 
	-moz-backface-visibility: hidden; 
	-o-transition: all .7s ease-in-out;
	-ms-transition: all .7s ease-in-out; 
	-moz-transition: all .7s ease-in-out; 
	-webkit-transition: all .7s ease-in-out; 
	transition: all .7s ease-in-out; 
	left: 0;
	background: #111111;
	margin: 0 !important;
	padding: 30px; 
	min-height: 550px;
	display: flex;
    justify-content: center;
	width: 100%;
}
.flip .back { 
	z-index: 1000; 
	-webkit-transform: rotateX(0deg) rotateY(0deg); 
	-moz-transform: rotateX(0deg) rotateY(0deg); 
}
.post-details.front{
	background: #111111;
	padding: 30px; 
	min-height: 550px;
	display: flex;
    justify-content: center;
}
.entry-content {
	align-self: center;
}
.search-results .page-header, .search-results .page-title{
	margin-top: 0;
}
.section-label{
	margin:0;
	font-family: 'Oswald', sans-serif;
    font-size: 28px;
	position:relative;
	margin-bottom: 70px;
	color: #ccc;
	text-transform: uppercase;
}
.section-label:before{
	content: '';
	width: 70px;
    border-bottom: solid 4px #ed145b;
    display: block;
	position: absolute;
    bottom: -23px;
}
.bottom-border:last-child{
	display: none !important;
}
.pagination a{
	font-size:20px;
	color: #fff;
	font-weight: 400;
    padding: 3px;
}
.pagination{
	font-size:20px;
	color: #ed145b;
	font-weight: 400;
}
.next .fa-chevron-right,
.prev .fa-chevron-left{
	background: #ed145b;
    color: #fff;
    font-size: 13px;
    padding: 3px 4px;
}
.tagcloud a{
	font-size: 12px !important;
    color: #fff;
    background: #ed145b;
    padding: 3px;
}
.tagcloud a:hover{
	background: #111;
}
.post-navigation .nav-next a:after{
	content: "\f101";
	margin-left:3px;
	font-family: FontAwesome;
}
.post-navigation .nav-previous a:before{
	content: "\f100";
	margin-right:3px;
	font-family: FontAwesome;
}
.post-navigation a:hover{
	color:#fff;	
}
#sc-playlist{
	background: #000;
    padding: 20px;
    margin-top: 40px;	
}
.format-video iframe{
	width: 100%;
}
#home-slider iframe{
	height: 800px;
	width: 100%;
}
.home .format-video p{
	display: none;	
}

.header-image{
	position: absolute;
    left: 0;
    top: 0;
	height: 250px;
    object-fit: cover;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}
.comment-list,
.children{
	margin: 0;
	padding:0;
	list-style-type: none;
}
.children{
	margin-left: 30px;
}
.comment-author img{
	border-radius: 100%;
	float: left;
}
.comment-metadata time{
	color: #707070;
    font-size: 14px;
	font-weight: 600;
}
.comment-content{
	margin-top: 20px;
}
.comment-author .fn{
	margin-left: 30px;
}
.comment-metadata,
.comment-content{
	margin-left: 130px;
}
.comment-list li.comment{
	border-bottom: solid 1px #111;
    margin: 50px 0;
    padding: 50px 0;
}
.comment-list li.comment:first-child{
	margin-top: 20px;
	padding-top: 0;
}
.children li.comment{
	border: none;
	margin:0;
	padding:0;
}
.reply{
	text-align:right;
	margin-top: 20px;
}
.comment-reply-link{
	background: #ed145b;
    color: #fff;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 18px;
    padding: 9px 10px;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.comment-reply-link:hover{
	background: #111;
}
#comment, #comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"]{
	background: transparent;
    border: solid 1px #666666;	
	color: #ccc;
	width: 100%;
}
#comments label{
	display: block;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer{
	
	margin-top: 5%;
}
.footer-widget-container{
	background: #000000;
	border-top: solid 4px #cccccc;
	border-bottom: 2px solid #ccc;
}
.site-footer .widget{
	margin-bottom: 0;
	margin-top: 40px;
	background: #060606;
}
.site-footer .widget:last-child{
	margin-bottom: 50px;
}
.copy-right{
	padding: 25px 0;
	background: #111;
}
.site-info{
	font-size:16px;
}
.site-info a{
	color: #fff;
}
.site-info a:hover{
	color: #ed145b;
}
.site-footer .social-media{
	margin-top: 0;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
	padding: 5px;
}

.gallery-item a img, .gallery-item{
	o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.gallery-item a img{
	border: solid 5px #000;
}
.gallery-item a img:hover{
	border: solid 5px #ed145b;
}

.gallery-caption{
	font-size: 14px;
    color: #999;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}
@media only screen and (min-width:992px){
	img.single-post-thumbnail{
		top:-50%;
	}
	.mobile-post-thumbnail{
		display:none;
	}
}
@media only screen and (max-width:991px){
	.site-info, .social-media,
	.site-title, .site-description{
		text-align: center;	
		float: none;
	}
	.site-info{
		margin-top: 10px;	
	}
	.featured-post-thumbnail, .featured-post-thumbnail a{
		height: 200px;
	}
}
@media only screen and (min-width:769px){
	.single .entry-header,
	.page .entry-header{
		min-height: 440px;
	}
	.black-overlay{
		min-height: 440px;
		padding-top: 160px;
	}
}
@media only screen and (max-width:768px){
	.black-overlay{
		padding:50px 0;
	}
	img.single-post-thumbnail, img.full-slide{
		position:relative;
	}
	.carousel-inner .item {
		height: 300px;
		background-size: cover;
	}
	#home-slider iframe {
    	height: 480px;
	}
	.post-container {
		min-height: auto;
	}
	.tour-title{
		font-size: 18px;
	}
	.featured-post-thumbnail, .featured-post-thumbnail a{
		height: 150px;
	}
}
@media only screen and (max-width:599px){
	.main-navigation li {
		display: block;
	}
	.main-navigation ul ul {
		float: none;
		position: inherit;
		top: 0;
		left: 0;
		background: transparent;
	}
	.main-navigation ul ul a {
		width: 100%;
	}
	#mobile-icon{
		display: none;
	}
	#show-icons{
		display: block;
	}
	.main-navigation a{
		border-bottom: solid 1px #333 !important;
		padding: 10px !important;
	}
}
@media only screen and (max-width:480px){
	.entry-title {
		font-size: 28px;
	}
	.site-title,
	#featured-post .section-label{
		font-size: 36px;
	}
	.site-description{
		font-size: 18px;	
	}
	body{
		-ms-word-wrap: break-word;
		word-wrap: break-word;	
	}
}
@media only screen and (max-width:320px){
	.search-form-coantainer input[type="text"]{
		max-width: 60%;
	}
	.carousel-inner .item {
		height: 200px;
	}
}


Que faut-il que je modifie ?

Je vous remercie de votre précieuse aide et de votre patience !

Bonne journée Smiley smile
Modifié par Gregoryen (18 Aug 2017 - 13:46)
Je voudrais aider mais le clic droit semble désactivé sur ton site donc du coup je peux pas inspecter le html et le css. Par contre, en faisant ctrl-u, je vois ceci:

<style type="text/css">
<!—-
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
     
    img {
	    -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
-->
</style>


Je pense que user-select doit bloquer le clic droit de la souris. Faudrait le retirer pour qu'on puisse inspecter le DOM.
Oups désolé j'avais activé le plugin anti clic droit, je viens de le désactiver Smiley cligne

Tu sais par ailleurs comment supprimer le gros bloc noir ? Cela cache la Terre..

Et aussi je cherche a bloquer le head, la ou il y a le logo et le menu, qu'ils ne bougent pas comme le footer.
Modifié par Gregoryen (18 Aug 2017 - 23:08)
Une solution possible:
Sur la div avec la classe 'copy-right' retirer la position relative et remplacer par:

position: absolute;
bottom: 0;
right: 0;
left: 0;


Pour retirer le gros bloc noir, il faut retirer le backgound de la balise 'main'

Bloquer le header, plus précisément? Tu peux ajouter un position fixed à la balise 'header-wrapper' ......
Modifié par allan00958 (18 Aug 2017 - 23:13)
Meilleure solution
Super merci beaucoup cela à marché Smiley smile

Juste une dernière question :

Saurais tu comment faire pour qu'un effet sonore ( très rapide ) se lance quand on clique sur le bouton " Services & Tarifs " et sur " Contact " ?

Je sais qu'il faut du javascript, wordpress peux le gérer.

Sinon merci beaucoup d'avoir pris de ton temps pour me répondre !
@allan00958 : Pour voir le code source d'un site dont le clic droit est désactivé (et si on a la flemme d'aller désactiver javascript dans les paramètres) :

Sur Chrome :
Ctrl+Maj+J

ou :
Afficher > Option pour les développeurs > Outils de développement

Il suffit de parcourir le html montré ainsi pour le voir en surbrillance sur la page en cours.

@tous : C'est pour cette raison que la protection du clic droit est plus que succincte Smiley cligne
Modifié par Olivier C (19 Aug 2017 - 06:30)
Oui mais il y a aussi la protection contre les raccourcis clavier ^^

Sinon personne ne sait pour le bouton sonore ?

Merci Smiley smile
Merci !

Donc j'ai mis le code Javascript dans " Apparences > Custom Javasript " j'ai collé le code en changeant le son ( qui marche sur le site ).

Cependant je ne trouve pas la page à modifier pour pouvoir modifier les boutons de mes deux spoiler.

Dans ma " page " quand je fait édit, je ne sait pas comment l'insérer.
Modifié par Gregoryen (19 Aug 2017 - 22:49)
Oh la, je suis un peu perdu. Je connais très peu Wordpress. Je pense qu'il faut inclure un fichier js et le rajouter comme pour ceux-ci:


<script type='text/javascript' src='http://gregoryen.fr/wp-content/plugins/document-gallery/assets/js/gallery.min.js?ver=4.4.2'></script>
<script type='text/javascript' src='http://gregoryen.fr/wp-content/plugins/wpmbytplayer/js/jquery.mb.YTPlayer.js?ver=3.1.4'></script>
<script type='text/javascript' src='http://gregoryen.fr/wp-content/themes/rock-n-rolla/js/navigation.js?ver=20151215'></script>
<script type='text/javascript' src='http://gregoryen.fr/wp-content/themes/rock-n-rolla/js/skip-link-focus-fix.js?ver=20151215'></script>
<script type='text/javascript' src='http://gregoryen.fr/wp-includes/js/wp-embed.min.js?ver=4.8.1'></script>


Il faudra voir dans le fichier 'functions.php' je pense. Il n' y pas besoin de changer les boutons? Le menu est généré par une fonction wordpress. Il faut juste les cibler en JS.
En fait les deux spoiler sont générés avec un Widget.

C'est peut-être ce widget auquel il faut cibler je JS ?
Modifié par Gregoryen (19 Aug 2017 - 22:53)
La fonction javascript s'ajoute dans un fichier js. Il faudra mettre la main de la code et non le back-office de Wordpress. Donc chercher comment on ajoute un fichier js dans un wordpress.

Le liens du menu ont une classe 'su-spoiler-title'. Donc c'est ça qu'il faudra rajouter dans la parenthèses de document.querySelectorAll('su-spoiler-title').

1 - créér un fichier.js et ajouter le code
2 - appeler ce fichier dans la page functions.php