18041 sujets
Questions générales et questions de débutants
je copie quelle partie de code ?
J'ai copié le CSS
/* Resets
--------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
fieldset, input {
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: 'Delius Swash Caps', cursive;
font-size: 16px;
background:#ffffff url(body-bg.png) repeat-x fixed center bottom;
color: #96a2a6;
}
body.wsite-custom-background {
background-attachment: fixed !important;
background-position: center bottom !important;
}
.container {
margin: 0 auto;
width: 988px;
}
#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap
{
width:100%;
min-width:988px;
}
a {
color: #cd4d7d;
}
a:hover {
color: #792c49;
}
h2 {
font-size: 36px;
padding: .5em 0 0.2em 0;
line-height: 1.2;
font-family: 'Dancing Script', cursive;
color: #5d6365;
}
p {
font-size: 16px;
font-family: 'Delius Swash Caps', cursive;
line-height: 1.5;
padding: .5em 0;
}
div#content {min-height:400px;}
/* Header
--------------------------------------------------------------------------------*/
#header-wrap .container {
width:880px;
text-align:center;
}
#header {
background: url(top-header-bg.png) repeat-x center left;
padding:7px 0px;
width:100%;
}
#header td{
vertical-align: middle;
height:30px;
padding:0px;
}
#header table {
width: 100%;
border-collapse:collapse;
}
#date {
font-family: 'Dancing Script', cursive;
font-size: 22px;
color: #5d6365;
margin-top: 15px;
overflow: hidden;
position: relative;
margin-bottom:20px;
left:0px;
width: 100%;
text-align:center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
#logo {
font-size: 48px;
text-align: center;
width: 880px;
display:inline-block;
clear:both;
font-family: 'Dancing Script', cursive;
color:#5d6365;
padding-top:30px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
/* Header: Social Links
--------------------------------------------------------------------------------*/
#header .wsite-social {
vertical-align: middle;
float: left;
}
#header .wsite-social-item {
width: 14px;
height: 14px;
margin: 0 0 0 8px;
}
#header .wsite-social-rss {
background: url(social-icons.png) no-repeat -100px 0px;
}
#header .wsite-social-linkedin {
background: url(social-icons.png) no-repeat -48px 0px;
}
#header .wsite-social-facebook {
background: url(social-icons.png) no-repeat 0px 0px;
}
#header .wsite-social-twitter {
background: url(social-icons.png) no-repeat -24px 0px;
}
#header .wsite-social-mail {
background: url(social-icons.png) no-repeat -74px 0px;
}
#header .wsite-social-pinterest {
background: url(social-icons.png) no-repeat -179px 0px;
}
#header .wsite-social-youtube {
background: url(social-icons.png) no-repeat -256px 0px;
}
#header .wsite-social-plus {
background: url(social-icons.png) no-repeat -152px 0px;
}
#header .wsite-social-flickr {
background: url(social-icons.png) no-repeat -126px 0px;
}
#header .wsite-social-vimeo {
background: url(social-icons.png) no-repeat -204px 0px;
}
#header .wsite-social-yahoo {
background: url(social-icons.png) no-repeat -230px 0px;
}
/* Header: Search Box
--------------------------------------------------------------------------------*/
#header .container .search {
text-align:right;
}
#header .container .wsite-search {
vertical-align: middle;
width: 182px ;
}
#header .container .wsite-search-input {
width: 141px;
height: 21px;
border: 0;
padding: 3px 10px !important;
background: url(input-bg.png) no-repeat center left;
float:left;
font-family: 'Delius Swash Caps', cursive;
font-size: 15px;
color: #5d6365;
}
#header .container .wsite-search-button {
position: relative;
width: 21px;
height: 27px;
padding: 0px !important;
background: url(submit-bg.png) no-repeat center right;
}
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
background: url("nav-bg-pink.png") no-repeat center top;
height: 104px;
position: relative;
top: 10px;
z-index:2;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
font-family: 'Dancing Script', cursive;
}
#nav-wrap .container ul {
list-style: none;
margin-top:19px;
text-align:center;
}
#nav-wrap .container ul li{
list-style: none;
background: url(divider.png) no-repeat right 10px;
padding: 0px 50px;
font-size: 26px;
display:inline-block;
zoom: 1;
*display: inline;
}
#nav-wrap .container ul > li:last-child,
#nav-wrap .container ul span:last-child li {
background:none;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Dancing Script', cursive;
color: #fff;
padding-bottom: 8px;
border: 0;
outline: 0;
opacity: 0.5;
filter: alpha(opacity=50);
list-style-type: none;
text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
opacity:1.0;
filter: alpha(opacity=100);
border: 0;
}
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
background: url(floral-motif.png) repeat;
border-radius:0px 0px 20px 20px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
}
#wsite-menus .wsite-menu li {
background:none;
}
#wsite-menus .wsite-menu > li:last-child > a,
#wsite-menus .wsite-menu > li:last-child > a:hover {
background:none;
}
#wsite-menus .wsite-menu li a {
font-family: 'Dancing Script', cursive;
font-size: 24px;
padding: 5px 0px;
margin: 0px;
color: #96a2a6;
background: url(list-divider.png) repeat-x left bottom;
border: 0;
}
#wsite-menus .wsite-menu li a:hover {
color: #cd4d7d;
background: url(list-divider.png) repeat-x left bottom;
}
/* Universal banner
--------------------------------------------------------------------------------*/
#banner-wrap {margin-top:-35px; position:relative;}
#banner-wrap .container {
background: url(content-bg.png) repeat center left;
padding-top:30px;
}
.rounded-top {
background: url(rounded-top.png) no-repeat top center;
height:18px;
}
.rounded-btm {
background: url(rounded-btm.png) no-repeat top center;
height:18px;
}
#banner {
background: url(floral-motif.png) repeat;
margin: 0 54px;
}
.banner-image-wrap {
position:relative;
}
.corner-top-left {
background:url(banner-corner-top-left.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
top:0px;
left:0px;
}
.corner-top-right {
background:url(banner-corner-top-right.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
top:0px;
right:0px;
}
.corner-bottom-left {
background:url(banner-corner-bottom-left.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
bottom:0px;
left:0px;
}
.corner-bottom-right {
background:url(banner-corner-bottom-right.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
bottom:0px;
right:0px;
}
/* Page type: Tall header
--------------------------------------------------------------------------------*/
.tall-header-page #banner {
padding:35px 60px;
}
.tall-header-page .wsite-header {
width: 760px;
height: 300px;
background: url(banner-tall.jpg) no-repeat;
}
/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page #banner {
padding:35px 60px;
}
.short-header-page .wsite-header {
width: 760px;
height: 200px;
background: url(banner-short.jpg) no-repeat;
}
/* Page type: No header
--------------------------------------------------------------------------------*/
.no-header-page .wsite-header {
display:none;
}
/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner {
height: 382px;
}
#bannerleft {
float: left;
width: 410px;
padding:35px 0px 0px 60px;
}
.landing-page .wsite-header {
width: 410px;
height: 300px;
background: url(banner-landing.jpg) no-repeat;
}
.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}
.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.landing-banner-inner {
#position: relative;
#top: -50%;
}
#bannerright {
float: right;
width: 300px;
height: 300px;
margin: 35px 60px 0 0;
}
#bannerright h2 {
color: #5d6365;
font-size: 36px;
font-family: 'Dancing Script', cursive;
padding: 0px;
line-height: 36px;
}
#bannerright p {
color: #96a2a6;
font-family: 'Delius Swash Caps', cursive;
font-size: 16px;
padding: 20px 0px;
line-height: 140%;
}
#bannerright .wsite-button {
margin: 0px;
}
/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap .container {
background: url(content-bg.png) repeat center left;
}
.content-inner {
background: url(floral-motif.png) repeat;
margin:0px 54px;
padding:10px 60px;
width:760px;
}
#content-top {
background: url(seprator.png) no-repeat center center;
height:35px;
width:100%;
overflow:hidden;
}
.no-header-page #content-top {
display:none;
}
#content-bottom {
background:url(content-bottom-bg.png) no-repeat center top;
width:988px;
height:111px;
margin:0 auto;
}
#main-wrap .container p {
font-family: 'Delius Swash Caps', cursive;
}
blockquote {
background: url(quote.png) no-repeat 0px 10px;
font-family: 'Delius Swash Caps', cursive;
font-size:16px;
padding-left: 40px !important;
margin:20px 0px;
line-height:28px;
border-left:none !important;
}
#main-wrap .container form .wsite-button {
margin-top:20px;
}
#main-wrap .paragraph ul {
padding: 0px !important;
margin: 0px !important;
}
#main-wrap .paragraph ul li {
list-style: none !important;
background: url(bullets.png) no-repeat 0px 7px;
padding-left: 20px !important;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
text-align:right;
color:#fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12);
margin-bottom:20px;
}
#footer-wrap .container {
width:760px;
}
#footer-wrap .container h2 {
color:#fff;
font-size:24px;
}
#footer-wrap hr {background:#fff !important;}
#footer-wrap .wsite-form-container {
text-align:left;
}
#footer-wrap .paragraph ul {
padding: 0px !important;
margin: 0px !important;
}
#footer-wrap .paragraph ul li {
list-style: none !important;
background: url(footer-bullet.png) no-repeat 0px 7px;
padding: 0px 20px !important;
}
#footer-wrap .wsite-form-input, #footer-wrap .wsite-search-element-input {
font-family: 'Delius Swash Caps', cursive;
font-size: 18px;
color: #fff;
background: url(footer-input-bg.png) repeat center left;
border-radius: 15px;
border:none;
border-top:1px solid #d0c1ad;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.3);
}
#footer-wrap .wsite-search-element-submit {
background: url(search-dark.png) left;
}
#footer-wrap .wsite-form-label {
color: #fff;
}
/* footer: Social Links
--------------------------------------------------------------------------------*/
#footer-wrap .wsite-social {
vertical-align: middle;
margin: 10px 0px;
float: left;
width: 326px;
}
.wsite-social-item {
width: 26px;
height: 27px;
margin: 0 0 0 8px;
}
.wsite-social-rss {
background: url(footer-social-icons.png) no-repeat -120px 0px;
}
.wsite-social-rss:hover {
background-position: -120px -28px;
}
.wsite-social-rss:active {
background-position: -120px -55px;
}
.wsite-social-linkedin {
background: url(footer-social-icons.png) no-repeat -60px 0px;
}
.wsite-social-linkedin:hover {
background-position: -60px -28px;
}
.wsite-social-linkedin:active {
background-position: -60px -55px;
}
.wsite-social-facebook {
background: url(footer-social-icons.png) no-repeat 0px 0px;
}
.wsite-social-facebook:hover {
background-position: 0px -28px;
}
.wsite-social-facebook:active {
background-position: 0px -55px;
}
.wsite-social-twitter {
background: url(footer-social-icons.png) no-repeat -29px 0px;
}
.wsite-social-twitter:hover {
background-position: -29px -28px;
}
.wsite-social-twitter:active {
background-position: -29px -55px;
}
.wsite-social-mail {
background: url(footer-social-icons.png) no-repeat -90px 0px;
}
.wsite-social-mail:hover {
background-position: -90px -28px;
}
.wsite-social-mail:active {
background-position: -90px -55px;
}
.wsite-social-pinterest {
background: url(footer-social-icons.png) no-repeat -210px 0px;
}
.wsite-social-pinterest:hover {
background-position: -210px -28px;
}
.wsite-social-pinterest:active {
background-position: -210px -55px;
}
.wsite-social-youtube {
background: url(footer-social-icons.png) no-repeat -300px 0px;
}
.wsite-social-youtube:hover {
background-position: -300px -28px;
}
.wsite-social-youtube:active {
background-position: -300px -55px;
}
.wsite-social-plus {
background: url(footer-social-icons.png) no-repeat -180px 0px;
}
.wsite-social-plus:hover {
background-position: -180px -28px;
}
.wsite-social-plus:active {
background-position: -180px -55px;
}
.wsite-social-flickr {
background: url(footer-social-icons.png) no-repeat -150px 0px;
}
.wsite-social-flickr:hover {
background-position: -150px -28px;
}
.wsite-social-flickr:active {
background-position: -150px -55px;
}
.wsite-social-vimeo {
background: url(footer-social-icons.png) no-repeat -240px 0px;
}
.wsite-social-vimeo:hover {
background-position: -240px -28px;
}
.wsite-social-vimeo:active {
background-position: -240px -55px;
}
.wsite-social-yahoo {
background: url(footer-social-icons.png) no-repeat -270px 0px;
}
.wsite-social-yahoo:hover {
background-position: -270px -28px;
}
.wsite-social-yahoo:active {
background-position: -270px -55px;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-container {margin-top:0px !important;}
.wsite-form-label {
display: inline-block;
color: #96a2a6;
font-family: 'Delius Swash Caps', cursive;
font-size: 18px;
font-weight:normal;
margin:15px 0px 5px;
}
.form-radio-container {
color: #5d6365;
font-size: 18px;
font-family: 'Delius Swash Caps', cursive;
}
.wsite-form-input, .wsite-search-element-input {
font-family: 'Delius Swash Caps', cursive;
font-size: 18px;
color: #5d6365;
background: none;
border: 1px solid #f1f1f1;
padding: 5px !important;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
}
.form-select {
color: #5d6365;
border: 1px solid #d1d5da;
font-size: 18px;
font-family: 'Delius Swash Caps', cursive;
padding: 10px 10px;
width: 390px;
height: 45px !important;
line-height: 45px !important;
background: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
}
.wsite-form-sublabel {font-size:14px;}
/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button {
height: 33px;
display: inline-block;
padding: 0px 30px 0px 0px;
background: url(button_pink.png) no-repeat 100% -102px;
}
.wsite-button::-moz-focus-inner {/* fix for extra padding in Firefox */
margin: 0;
padding: 0;
border: 0;
}
.wsite-button:hover {
background-position: 100% -136px;
}
.wsite-button:active {
background-position: 100% -169px;
}
.wsite-button-inner {
color: #fff !important;
height: 33px;
line-height: 33px;
display: block;
font-family: 'Delius Swash Caps', cursive;
padding: 0px 0px 0px 30px;
background: url(button_pink.png) no-repeat 0px 0px;
}
.wsite-button:hover .wsite-button-inner {
background-position: 0px -34px;
}
.wsite-button:active .wsite-button-inner {
background-position: 0px -67px;
}
/* Large structure & regular style */
.wsite-button-large {
height: 53px;
background: url(button_large_pink.png) no-repeat 100% -162px;
padding: 0px 30px 0px 0px;
}
.wsite-button-large:hover {
background-position: 100% -215px;
}
.wsite-button-large:active {
background-position: 100% -269px;
}
.wsite-button-large .wsite-button-inner {
height: 53px;
line-height: 53px;
padding: 0px 0px 0px 30px;
background: url(button_large_pink.png) no-repeat 0px 0px;
}
.wsite-button-large:hover .wsite-button-inner {
background-position: 0px -53px;
}
.wsite-button-large:active .wsite-button-inner {
background-position: 0px -107px;
}
/* Highlighted styles */
.wsite-button-highlight {
background-image: url(button_highlight.png);
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight.png);
color: #757879 !important;
}
.wsite-button-large.wsite-button-highlight {
background-image: url(button_large_highlight.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight.png);
}
J'ai copié le CSS
/* Resets
--------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
fieldset, input {
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: 'Delius Swash Caps', cursive;
font-size: 16px;
background:#ffffff url(body-bg.png) repeat-x fixed center bottom;
color: #96a2a6;
}
body.wsite-custom-background {
background-attachment: fixed !important;
background-position: center bottom !important;
}
.container {
margin: 0 auto;
width: 988px;
}
#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap
{
width:100%;
min-width:988px;
}
a {
color: #cd4d7d;
}
a:hover {
color: #792c49;
}
h2 {
font-size: 36px;
padding: .5em 0 0.2em 0;
line-height: 1.2;
font-family: 'Dancing Script', cursive;
color: #5d6365;
}
p {
font-size: 16px;
font-family: 'Delius Swash Caps', cursive;
line-height: 1.5;
padding: .5em 0;
}
div#content {min-height:400px;}
/* Header
--------------------------------------------------------------------------------*/
#header-wrap .container {
width:880px;
text-align:center;
}
#header {
background: url(top-header-bg.png) repeat-x center left;
padding:7px 0px;
width:100%;
}
#header td{
vertical-align: middle;
height:30px;
padding:0px;
}
#header table {
width: 100%;
border-collapse:collapse;
}
#date {
font-family: 'Dancing Script', cursive;
font-size: 22px;
color: #5d6365;
margin-top: 15px;
overflow: hidden;
position: relative;
margin-bottom:20px;
left:0px;
width: 100%;
text-align:center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
#logo {
font-size: 48px;
text-align: center;
width: 880px;
display:inline-block;
clear:both;
font-family: 'Dancing Script', cursive;
color:#5d6365;
padding-top:30px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
/* Header: Social Links
--------------------------------------------------------------------------------*/
#header .wsite-social {
vertical-align: middle;
float: left;
}
#header .wsite-social-item {
width: 14px;
height: 14px;
margin: 0 0 0 8px;
}
#header .wsite-social-rss {
background: url(social-icons.png) no-repeat -100px 0px;
}
#header .wsite-social-linkedin {
background: url(social-icons.png) no-repeat -48px 0px;
}
#header .wsite-social-facebook {
background: url(social-icons.png) no-repeat 0px 0px;
}
#header .wsite-social-twitter {
background: url(social-icons.png) no-repeat -24px 0px;
}
#header .wsite-social-mail {
background: url(social-icons.png) no-repeat -74px 0px;
}
#header .wsite-social-pinterest {
background: url(social-icons.png) no-repeat -179px 0px;
}
#header .wsite-social-youtube {
background: url(social-icons.png) no-repeat -256px 0px;
}
#header .wsite-social-plus {
background: url(social-icons.png) no-repeat -152px 0px;
}
#header .wsite-social-flickr {
background: url(social-icons.png) no-repeat -126px 0px;
}
#header .wsite-social-vimeo {
background: url(social-icons.png) no-repeat -204px 0px;
}
#header .wsite-social-yahoo {
background: url(social-icons.png) no-repeat -230px 0px;
}
/* Header: Search Box
--------------------------------------------------------------------------------*/
#header .container .search {
text-align:right;
}
#header .container .wsite-search {
vertical-align: middle;
width: 182px ;
}
#header .container .wsite-search-input {
width: 141px;
height: 21px;
border: 0;
padding: 3px 10px !important;
background: url(input-bg.png) no-repeat center left;
float:left;
font-family: 'Delius Swash Caps', cursive;
font-size: 15px;
color: #5d6365;
}
#header .container .wsite-search-button {
position: relative;
width: 21px;
height: 27px;
padding: 0px !important;
background: url(submit-bg.png) no-repeat center right;
}
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
background: url("nav-bg-pink.png") no-repeat center top;
height: 104px;
position: relative;
top: 10px;
z-index:2;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
font-family: 'Dancing Script', cursive;
}
#nav-wrap .container ul {
list-style: none;
margin-top:19px;
text-align:center;
}
#nav-wrap .container ul li{
list-style: none;
background: url(divider.png) no-repeat right 10px;
padding: 0px 50px;
font-size: 26px;
display:inline-block;
zoom: 1;
*display: inline;
}
#nav-wrap .container ul > li:last-child,
#nav-wrap .container ul span:last-child li {
background:none;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Dancing Script', cursive;
color: #fff;
padding-bottom: 8px;
border: 0;
outline: 0;
opacity: 0.5;
filter: alpha(opacity=50);
list-style-type: none;
text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
opacity:1.0;
filter: alpha(opacity=100);
border: 0;
}
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
background: url(floral-motif.png) repeat;
border-radius:0px 0px 20px 20px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
}
#wsite-menus .wsite-menu li {
background:none;
}
#wsite-menus .wsite-menu > li:last-child > a,
#wsite-menus .wsite-menu > li:last-child > a:hover {
background:none;
}
#wsite-menus .wsite-menu li a {
font-family: 'Dancing Script', cursive;
font-size: 24px;
padding: 5px 0px;
margin: 0px;
color: #96a2a6;
background: url(list-divider.png) repeat-x left bottom;
border: 0;
}
#wsite-menus .wsite-menu li a:hover {
color: #cd4d7d;
background: url(list-divider.png) repeat-x left bottom;
}
/* Universal banner
--------------------------------------------------------------------------------*/
#banner-wrap {margin-top:-35px; position:relative;}
#banner-wrap .container {
background: url(content-bg.png) repeat center left;
padding-top:30px;
}
.rounded-top {
background: url(rounded-top.png) no-repeat top center;
height:18px;
}
.rounded-btm {
background: url(rounded-btm.png) no-repeat top center;
height:18px;
}
#banner {
background: url(floral-motif.png) repeat;
margin: 0 54px;
}
.banner-image-wrap {
position:relative;
}
.corner-top-left {
background:url(banner-corner-top-left.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
top:0px;
left:0px;
}
.corner-top-right {
background:url(banner-corner-top-right.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
top:0px;
right:0px;
}
.corner-bottom-left {
background:url(banner-corner-bottom-left.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
bottom:0px;
left:0px;
}
.corner-bottom-right {
background:url(banner-corner-bottom-right.png) no-repeat top left;
width:15px;
height:15px;
position:absolute;
bottom:0px;
right:0px;
}
/* Page type: Tall header
--------------------------------------------------------------------------------*/
.tall-header-page #banner {
padding:35px 60px;
}
.tall-header-page .wsite-header {
width: 760px;
height: 300px;
background: url(banner-tall.jpg) no-repeat;
}
/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page #banner {
padding:35px 60px;
}
.short-header-page .wsite-header {
width: 760px;
height: 200px;
background: url(banner-short.jpg) no-repeat;
}
/* Page type: No header
--------------------------------------------------------------------------------*/
.no-header-page .wsite-header {
display:none;
}
/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner {
height: 382px;
}
#bannerleft {
float: left;
width: 410px;
padding:35px 0px 0px 60px;
}
.landing-page .wsite-header {
width: 410px;
height: 300px;
background: url(banner-landing.jpg) no-repeat;
}
.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}
.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.landing-banner-inner {
#position: relative;
#top: -50%;
}
#bannerright {
float: right;
width: 300px;
height: 300px;
margin: 35px 60px 0 0;
}
#bannerright h2 {
color: #5d6365;
font-size: 36px;
font-family: 'Dancing Script', cursive;
padding: 0px;
line-height: 36px;
}
#bannerright p {
color: #96a2a6;
font-family: 'Delius Swash Caps', cursive;
font-size: 16px;
padding: 20px 0px;
line-height: 140%;
}
#bannerright .wsite-button {
margin: 0px;
}
/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap .container {
background: url(content-bg.png) repeat center left;
}
.content-inner {
background: url(floral-motif.png) repeat;
margin:0px 54px;
padding:10px 60px;
width:760px;
}
#content-top {
background: url(seprator.png) no-repeat center center;
height:35px;
width:100%;
overflow:hidden;
}
.no-header-page #content-top {
display:none;
}
#content-bottom {
background:url(content-bottom-bg.png) no-repeat center top;
width:988px;
height:111px;
margin:0 auto;
}
#main-wrap .container p {
font-family: 'Delius Swash Caps', cursive;
}
blockquote {
background: url(quote.png) no-repeat 0px 10px;
font-family: 'Delius Swash Caps', cursive;
font-size:16px;
padding-left: 40px !important;
margin:20px 0px;
line-height:28px;
border-left:none !important;
}
#main-wrap .container form .wsite-button {
margin-top:20px;
}
#main-wrap .paragraph ul {
padding: 0px !important;
margin: 0px !important;
}
#main-wrap .paragraph ul li {
list-style: none !important;
background: url(bullets.png) no-repeat 0px 7px;
padding-left: 20px !important;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
text-align:right;
color:#fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12);
margin-bottom:20px;
}
#footer-wrap .container {
width:760px;
}
#footer-wrap .container h2 {
color:#fff;
font-size:24px;
}
#footer-wrap hr {background:#fff !important;}
#footer-wrap .wsite-form-container {
text-align:left;
}
#footer-wrap .paragraph ul {
padding: 0px !important;
margin: 0px !important;
}
#footer-wrap .paragraph ul li {
list-style: none !important;
background: url(footer-bullet.png) no-repeat 0px 7px;
padding: 0px 20px !important;
}
#footer-wrap .wsite-form-input, #footer-wrap .wsite-search-element-input {
font-family: 'Delius Swash Caps', cursive;
font-size: 18px;
color: #fff;
background: url(footer-input-bg.png) repeat center left;
border-radius: 15px;
border:none;
border-top:1px solid #d0c1ad;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.3);
}
#footer-wrap .wsite-search-element-submit {
background: url(search-dark.png) left;
}
#footer-wrap .wsite-form-label {
color: #fff;
}
/* footer: Social Links
--------------------------------------------------------------------------------*/
#footer-wrap .wsite-social {
vertical-align: middle;
margin: 10px 0px;
float: left;
width: 326px;
}
.wsite-social-item {
width: 26px;
height: 27px;
margin: 0 0 0 8px;
}
.wsite-social-rss {
background: url(footer-social-icons.png) no-repeat -120px 0px;
}
.wsite-social-rss:hover {
background-position: -120px -28px;
}
.wsite-social-rss:active {
background-position: -120px -55px;
}
.wsite-social-linkedin {
background: url(footer-social-icons.png) no-repeat -60px 0px;
}
.wsite-social-linkedin:hover {
background-position: -60px -28px;
}
.wsite-social-linkedin:active {
background-position: -60px -55px;
}
.wsite-social-facebook {
background: url(footer-social-icons.png) no-repeat 0px 0px;
}
.wsite-social-facebook:hover {
background-position: 0px -28px;
}
.wsite-social-facebook:active {
background-position: 0px -55px;
}
.wsite-social-twitter {
background: url(footer-social-icons.png) no-repeat -29px 0px;
}
.wsite-social-twitter:hover {
background-position: -29px -28px;
}
.wsite-social-twitter:active {
background-position: -29px -55px;
}
.wsite-social-mail {
background: url(footer-social-icons.png) no-repeat -90px 0px;
}
.wsite-social-mail:hover {
background-position: -90px -28px;
}
.wsite-social-mail:active {
background-position: -90px -55px;
}
.wsite-social-pinterest {
background: url(footer-social-icons.png) no-repeat -210px 0px;
}
.wsite-social-pinterest:hover {
background-position: -210px -28px;
}
.wsite-social-pinterest:active {
background-position: -210px -55px;
}
.wsite-social-youtube {
background: url(footer-social-icons.png) no-repeat -300px 0px;
}
.wsite-social-youtube:hover {
background-position: -300px -28px;
}
.wsite-social-youtube:active {
background-position: -300px -55px;
}
.wsite-social-plus {
background: url(footer-social-icons.png) no-repeat -180px 0px;
}
.wsite-social-plus:hover {
background-position: -180px -28px;
}
.wsite-social-plus:active {
background-position: -180px -55px;
}
.wsite-social-flickr {
background: url(footer-social-icons.png) no-repeat -150px 0px;
}
.wsite-social-flickr:hover {
background-position: -150px -28px;
}
.wsite-social-flickr:active {
background-position: -150px -55px;
}
.wsite-social-vimeo {
background: url(footer-social-icons.png) no-repeat -240px 0px;
}
.wsite-social-vimeo:hover {
background-position: -240px -28px;
}
.wsite-social-vimeo:active {
background-position: -240px -55px;
}
.wsite-social-yahoo {
background: url(footer-social-icons.png) no-repeat -270px 0px;
}
.wsite-social-yahoo:hover {
background-position: -270px -28px;
}
.wsite-social-yahoo:active {
background-position: -270px -55px;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-container {margin-top:0px !important;}
.wsite-form-label {
display: inline-block;
color: #96a2a6;
font-family: 'Delius Swash Caps', cursive;
font-size: 18px;
font-weight:normal;
margin:15px 0px 5px;
}
.form-radio-container {
color: #5d6365;
font-size: 18px;
font-family: 'Delius Swash Caps', cursive;
}
.wsite-form-input, .wsite-search-element-input {
font-family: 'Delius Swash Caps', cursive;
font-size: 18px;
color: #5d6365;
background: none;
border: 1px solid #f1f1f1;
padding: 5px !important;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
}
.form-select {
color: #5d6365;
border: 1px solid #d1d5da;
font-size: 18px;
font-family: 'Delius Swash Caps', cursive;
padding: 10px 10px;
width: 390px;
height: 45px !important;
line-height: 45px !important;
background: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.3);
}
.wsite-form-sublabel {font-size:14px;}
/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button {
height: 33px;
display: inline-block;
padding: 0px 30px 0px 0px;
background: url(button_pink.png) no-repeat 100% -102px;
}
.wsite-button::-moz-focus-inner {/* fix for extra padding in Firefox */
margin: 0;
padding: 0;
border: 0;
}
.wsite-button:hover {
background-position: 100% -136px;
}
.wsite-button:active {
background-position: 100% -169px;
}
.wsite-button-inner {
color: #fff !important;
height: 33px;
line-height: 33px;
display: block;
font-family: 'Delius Swash Caps', cursive;
padding: 0px 0px 0px 30px;
background: url(button_pink.png) no-repeat 0px 0px;
}
.wsite-button:hover .wsite-button-inner {
background-position: 0px -34px;
}
.wsite-button:active .wsite-button-inner {
background-position: 0px -67px;
}
/* Large structure & regular style */
.wsite-button-large {
height: 53px;
background: url(button_large_pink.png) no-repeat 100% -162px;
padding: 0px 30px 0px 0px;
}
.wsite-button-large:hover {
background-position: 100% -215px;
}
.wsite-button-large:active {
background-position: 100% -269px;
}
.wsite-button-large .wsite-button-inner {
height: 53px;
line-height: 53px;
padding: 0px 0px 0px 30px;
background: url(button_large_pink.png) no-repeat 0px 0px;
}
.wsite-button-large:hover .wsite-button-inner {
background-position: 0px -53px;
}
.wsite-button-large:active .wsite-button-inner {
background-position: 0px -107px;
}
/* Highlighted styles */
.wsite-button-highlight {
background-image: url(button_highlight.png);
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight.png);
color: #757879 !important;
}
.wsite-button-large.wsite-button-highlight {
background-image: url(button_large_highlight.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight.png);
}
Bonjour,
En fait t'as pas de menu déroulant dans la structure de ton HTML, mais tous les éléments des 4 menus dans 4 langues différent cachés sous un gros display:none ajouté en JavaScript.
Au début ton script est pas chargé vu que le site est très lent, du coup on voit le menu. Et une fois que le site est enfin chargé, le JavaScript se lance et ajoute des display:none sur tous les éléments du menu, du coup on le voit plus.
Donc pour résoudre ça, c'est du côté du JS qu'il faut chercher, pas du côté du CSS.
Au passage c'est un joli bazar de JS, de CSS inline, de CSS dans le head et de JS inline ton site, donc ça va pas être facile à débuguer
Courage
En fait t'as pas de menu déroulant dans la structure de ton HTML, mais tous les éléments des 4 menus dans 4 langues différent cachés sous un gros display:none ajouté en JavaScript.
Au début ton script est pas chargé vu que le site est très lent, du coup on voit le menu. Et une fois que le site est enfin chargé, le JavaScript se lance et ajoute des display:none sur tous les éléments du menu, du coup on le voit plus.
Donc pour résoudre ça, c'est du côté du JS qu'il faut chercher, pas du côté du CSS.
Au passage c'est un joli bazar de JS, de CSS inline, de CSS dans le head et de JS inline ton site, donc ça va pas être facile à débuguer
Courage
Salut,
Après quelques minutes de débogage j'ai finalement trouvé le hic..
En effet, le problème se trouve dans ce fichier JS
<script src="/files/theme/languages-1.0.js"></script>
il suffit d'ajouter la méthode trim() à ta variable text et le tour est joué!
Juste comme ceci..
Bonne suite dans ton developpement!
Après quelques minutes de débogage j'ai finalement trouvé le hic..
En effet, le problème se trouve dans ce fichier JS
<script src="/files/theme/languages-1.0.js"></script>
il suffit d'ajouter la méthode trim() à ta variable text et le tour est joué!
Juste comme ceci..
function hideMenus() {
lang = language.toLowerCase();
console.log('LANG: ' + lang);
currentLang = null;
menus = jQuery(menuSelector + ' ul li').each(function(){
menu = jQuery(this);
a = menu.children('a');
span = a.children('span');
if (span.length == 0) text = a.html();
else text = span.html();
[b] text = text.toLowerCase().trim();[/b] // JUSTE ICI
if (langs[text] != null) {
currentLang = langs[text].toLowerCase();
if (currentLang == lang) {
//if this is the first page of this language, we set the logo to go to this page url
jQuery('.wsite-logo a').attr('href', a.attr('href'));
}
}
show = (currentLang == lang);
if (show) menu.show(); else menu.hide();
console.log('MENU:' + text + ' - current lang: ' + currentLang + ' - in langs '+ langs[text] + ' - '+ (show ? 'SHOW' : 'HIDE'));
});
}
Bonne suite dans ton developpement!