A voir également:
- Créer un site Responsive design
- Créer un compte gmail - Guide
- Créer un groupe whatsapp - Guide
- Créer un compte google - Guide
- Site de telechargement - Guide
- Créer un compte instagram sur google - Guide
2 réponses
Felice_
Messages postés
265
Date d'inscription
mardi 25 avril 2017
Statut
Membre
Dernière intervention
20 juillet 2017
11
28 avril 2017 à 19:13
28 avril 2017 à 19:13
En css
@media (max-width: [pixel]px) {
}
jordane45
Messages postés
38243
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 octobre 2024
4 689
28 avril 2017 à 20:15
28 avril 2017 à 20:15
Bonjour,
Si tu veux pas t'embêter à coder le css du responsive .. tu peux directement utiliser un framework css comme BOOTSTRAP.
Si tu veux pas t'embêter à coder le css du responsive .. tu peux directement utiliser un framework css comme BOOTSTRAP.
jordane45
Messages postés
38243
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 octobre 2024
4 689
>
elie
29 avril 2017 à 13:59
29 avril 2017 à 13:59
Si tu ne nous montres pas le code que tu as utilisé ......... impossible de t'aider !
NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Voici l code: /* Template Name: SybarMagazine Template URI: http://www.wpfreeware.com/sybarmagazine-wordpress-magazine-theme/ Author: WpFreeware Author URI: http://www.wpfreeware.com Description: A Pro magazine news & blog style html5 css3 responsive bootstrap website template Version: 1.0 License: GPL License URI: http://www.gnu.org/licenses/gpl-2.0.html */ @font-face{font-family:"Open Sans"; font-style:normal; font-weight:400; src:local("Open Sans"),local("OpenSans"),url("../fonts/OpenSans-400.woff") format("woff")} @font-face{font-family:"Varela"; font-style:normal; font-weight:400; src:local("Varela"),url("../fonts/Varela-400.woff") format("woff")} body{background-image:url("images/pattern-bg.png"); background-repeat:repeat; color:#444; overflow-x:hidden !important} ul{padding:0; margin:0; list-style:none} a{text-decoration:none} a:hover{color:#646464} a:focus{outline:none} h2{font-family:'Varela',sans-serif; line-height:23px} .img-center{display:block; margin-left:auto; margin-right:auto; text-align:center} .img-right{display:block; margin-left:auto} .img-left{display:block; margin-right:auto} .yellow_bg{background-color:#ffd62c} .yellow_btn{background-color:#ffd62c; color:#fff} .yellow_btn:hover{background-color:#f8c907; color:#fff} .limeblue_bg{background-color:#7dc34d} .blue_bg{background-color:#09c} .blue_btn{background-color:#09c; color:#fff} .blue_btn:hover{background-color:#39c8f7; color:#fff} .box_wrapper{background-color:#fff; box-shadow:0 0 9px #ddd; display:inline; float:left; width:100%} #header{float:left; display:inline; width:100%;} .header_top{display:inline; float:left; width:100%; position:relative} .navbar{border-radius:0; float:left; margin-bottom:0; min-height:40px; width:80%; border:none} .header_search{float:right; display:inline} .navbar-nav > li > a{padding-bottom:10px; padding-top:10px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .navbar-collapse{padding-left:0} .container-fluid{padding-left:0} #searchIcon{border:0 none; cursor:pointer; display:block; font-size:1.2em; height:40px; width:50px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} #shide{overflow:hidden; position:absolute; top:-80px; width:100%; z-index:9999999; left:0; display:none; background-color:#fff; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} #search-hide input{background-color:rgba(255,255,255,1); border:0 none; font-family:"Open Sans"; font-size:16px; font-style:normal; font-weight:400; height:40px; padding:0 15px; width:55%; float:left} button.remove{background-color:transparent; border:0 none; color:#555; cursor:pointer; font-size:1.5em; float:right; padding-top:5px} .header_bottom{display:inline; float:left; padding:30px 15px; width:100%} .logo_area{width:25%; float:left; display:inline} .logo{font-size:35px; line-height:26px; font-family:"Varela",sans-serif; color:#252525} .logo:hover, .logo:focus{text-decoration:none; outline:none} a.logo b{color:#09c} .logo > span{font-size:16px; display:block} .top_addarea{float:right; width:728px; display:inline} .top_addarea a{width:100%} .top_addarea a > img{width:100%} .scrollToTop{bottom:105px; display:none; font-size:32px; font-weight:bold; height:50px; position:fixed; right:75px; text-align:center; text-decoration:none; width:50px; z-index:9999; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .scrollToTop:hover, .scrollToTop:focus{text-decoration:none; outline:none} .latest_newsarea{display:inline; float:left; width:100%; background-color:#1b1a1a} .news_sticker li a{display:inline-block; color:#eee; margin-right:40px} .latest_newsarea span{display:block; float:left; font-size:16px; padding:5px 25px; position:absolute; z-index:20;} .news_sticker{float:right; width:85%; padding:5px 15px 5px 5px} .news_sticker li a:before{content:""; margin-right:5px} .news_sticker li a:before{display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1} #preloader{position:fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:99} #status{width:200px; height:200px; position:absolute; left:50%; top:50%; background-image:url("images/status.gif"); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px} .thumbnail_slider_area{display:inline; float:left; margin-top:20px; width:100%} .signle_iteam{position:relative; padding:0 3px} .slider_comntbox{background-color:rgba(0,0,0,0.5); left:15px; padding:5px 8px; position:absolute; top:10px; width:auto !important; z-index:5} .slider_comntbox > p{color:#fff !important; margin-bottom:0} .slider_comntbox > a{color:#fff !important} .signle_iteam img{width:100%; height:100%; transform:translate3d(0px,0px,0px); -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .signle_iteam:hover img{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1)} .owl-carousel .signle_iteam:last-child img{width:100% !important} .slider_tittle{bottom:15px; color:#fff; font-size:20px; left:0; line-height:23px; margin:0 20px; padding:20px 0; position:absolute; right:0; text-align:center; width:auto; z-index:5} .slider_tittle:hover, .slider_tittle:focus{color:#fff} #contentbody{background-color:#eee; display:inline; float:left; min-height:500px; padding:0 30px; width:100%; padding-top:10px} .left_bar{float:left; display:inline; width:93%; min-height:400px} .single_leftbar{float:left; display:inline; width:100%; margin-bottom:25px} .single_leftbar > h2{background-image:url("images/header_dot.png"); background-repeat:repeat; float:center; width:100%; margin-top:0} .single_leftbar > h2 span{color:#fff; display:inline-block; float:center; font-size:15px; font-weight:400; padding:7px 42px; position:relative; line-height:15px; background:#DF6D14;} .singleleft_inner{background-color:#fff; display:inline-block; padding:15px; width:100%} .singleleft_inner img{width:100%} .recentpost_nav li{display:block; margin-bottom:20px} .recentpost_nav li a{display:block; line-height:23px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .recentpost_nav li a:hover{opacity:0.75} .recentpost_nav li a > img{margin-bottom:5px; width:100%} .recent_title:before{content:""; margin-right:5px} .recent_title:before{display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1} .middle_bar{display:inline; float:left; padding-bottom:40px; width:98%} .featured_sliderarea{float:left; display:inline; width:100%} .left_slide{font-size:11px; left:15px; padding:8px 12px; position:absolute; top:15px; color:#fff; z-index:10; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .right_slide{font-size:11px; left:55px; padding:8px 12px; position:absolute; top:15px; z-index:10; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .carousel-caption{z-index:15} .carousel-indicators li{-webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .carousel-indicators .active{height:15px; width:15px} .carousel-indicators{left:70%; text-align:right; top:20px; padding-right:3%} .carousel-caption > h1 a{color:#fff; font-size:18px} .single_category{background-color:#fff; display:inline; float:left; width:100%; margin-top:18px} .category_title{float:left; display:inline; width:100%; background-image:url("images/header_dot.png"); background-repeat:repeat; text-align:center} .category_title a{display:inline-block; font-size:16px; font-weight:normal; padding:7px 15px} .single_category_inner{float:left; display:inline; width:100%; padding:10px 15px} .catg_nav li{display:block; float:left; margin-right:20px; width:48.4%; margin-bottom:5px} .catg_nav li:nth-child(2){margin-right:0} .catg_nav li:nth-child(4){margin-right:0} .catgimg_container{width:100%; height:150px; overflow:hidden; margin-bottom:8px;box-shadow:1px 1px 2px #C0C0C0 inset;} .catg1_img img{height:100%; width:100%; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; transform:translate3d(0px,0px,0px)} .catg1_img:hover img{opacity:0.8; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1)} .catg_title{color:#111; display:block; font-size:14px; line-height:23px; margin-bottom:7px} .catg_title:before{display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1; content:""; margin-right:5px} .sing_commentbox{float:left; display:inline; width:100%} .sing_commentbox > p{color:#888; display:inline-block; font-size:11px; font-weight:normal; margin-right:5px} .sing_commentbox > p i{margin-right:5px} .sing_commentbox > a{color:#888; font-size:11px; font-weight:normal} .sing_commentbox > a i{margin-right:5px} .catg_nav2 .catgimg_container{height:300px} .post-summary{color:#9b9b9b; line-height:18px; margin:10px 5px 10px 0} .category_three_fourarea{float:left; display:inline; width:100%} .category_three{float:left; display:inline; width:48%} .category_four{float:right; display:inline; width:48%} .catg_nav3 li{width:100%} .catg_nav3 .catgimg_container{width:100%} .catg3_bottompost{float:left; display:inline; width:100%; margin-top:10px} .catg3_snav li{border-top:1px solid #f1f1f1; display:block; padding-top:15px; padding-bottom:5px} .catg3_snav .media-left{width:70px; height:70px} .catg3_snav .media-left:hover{opacity:0.75} .catg3_snav .media-left > img{width:100%; height:100%} .catg5_nav li{border-top:medium none; float:left; padding-bottom:0; padding-top:5px; width:49%} .right_bar{float:left; display:inline; width:100%} .ppost_nav li{border-top:none} .blog_archive{float:left; display:inline; width:100%} .blog_archive select{background-color:#eee; border:medium none; height:50px; padding:10px; width:100%} .blog_archive select option{cursor:pointer; padding:10px 5px} .label_nav li a{border-bottom:1px solid; color:#777; display:block; padding:8px 5px; font-size:13px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .label_nav li a:hover{text-decoration:none; padding-left:15px} .label_nav li a:before{content:""; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1; margin-right:5px} .link_nav li a{display:block; padding:3px 5px; font-size:13px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .link_nav li a:before{display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1; content:""; margin-right:5px} .link_nav li a:hover{padding-left:15px; color:#777; text-decoration:none} #footer{float:left; display:inline; width:100%} .footer_top{float:left; display:inline; width:100%; background-color:#151515} .single_footer_top{float:left; display:inline; width:100%; padding-bottom:30px} .single_footer_top > h2{background-color:rgba(0,0,0,0.04); border-left:0 none; border-right:0 none; color:#b9b9b9; display:block; font-size:16px; font-weight:400; margin-bottom:15px; padding:10px 0} .single_footer_top ul li a{color:#eee} .subscribe_area{float:left; display:inline; width:100%} .subscribe_area p{font-size:13px; font-style:normal; font-weight:400px; color:#eee} .subscribe_mail{background-color:#222; display:inline; float:left; margin-bottom:10px; position:relative; width:100%} .subscribe_mail input{background:none repeat scroll 0 0 #222; border:medium none; color:#eee; height:40px; line-height:40px; padding-right:32px} .subscribe_mail i{height:10px; position:absolute; right:17px; top:13px; width:10px; z-index:10} .submit_btn{border:medium none; border-radius:2px; font-size:13px; font-style:normal; font-weight:bold; height:40px; line-height:40px; min-width:80px; width:100%; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .footer_labels li a{display:block; float:left; background-color:#222; color:#eee; font-size:12px; padding:5px 10px; margin-left:5px; margin-bottom:10px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .footer_labels li a:hover, .footer_labels li a:focus{text-decoration:none} .contact_form label{color:#fff; font-size:13px; margin-bottom:5px} .contact_form input{background-color:#222; border-radius:0; color:#eee; border:none; margin-bottom:15px} .contact_form textarea{background-color:#222; border-radius:0; color:#eee; border:none; height:100px} .send_btn{border:medium none; border-radius:2px; font-size:13px; font-style:normal; font-weight:bold; height:35px; line-height:35px; min-width:80px; width:100%; margin-top:20px; margin-bottom:0 !important; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .footer_bottom{background:none repeat scroll 0 0 #252525; display:inline; float:left; padding:10px 10px 0; width:100%} .footer_bottom_left{float:left; display:inline; width:50%; text-align:left} .footer_bottom_left p{color:#fff; font-size:13px; margin-top:5px} .footer_bottom_right{float:left; display:inline-block; width:118%; text-align:left} .footer_bottom_right li{display:inline-block} .footer_bottom_right li a{background-color:#f13b3b; border-radius:50%; color:#fff; display:inline-block; margin-bottom:8px; opacity:0.7; padding:06px 10px; vertical-align:middle;margin:3px auto} .footer_bottom_right li a:hover{opacity:1} .footer_bottom_right li:nth-of-type(1) a{background-color:#2AB2E3} .footer_bottom_right li:nth-of-type(2) a{background-color:#3b5998; padding:6px 12px} .footer_bottom_right li:nth-of-type(4) a{background-color:#D42E33} .footer_bottom_right li:nth-of-type(5) a{background-color:#E36F36} .custom-tabs > li:last-child a{border-right:0; float:right} .custom-tabs > li > a{padding:8px 5px; color:#fff; font-size:13px; border-radius:0; border:none} /*==========start category archive page==============*/ .category_archive_area{float:left; display:inline; width:100%} .single_archive{float:left; display:inline; width:100%; position:relative; margin-bottom:20px} .single_archive img{width:100%} .read_more{font-size:11px; padding:5px 12px; position:absolute; right:10px; top:15px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .read_more:hover, .read_more:focus{text-decoration:none; outline:none} .singlearcive_article{position:absolute; left:0; bottom:10px; padding:10px} .singlearcive_article p{color:#ddd; margin-top:5px; background-color:rgba(0,0,0,0.4); padding:3px} .singlearcive_article > h2 a{background-color:rgba(0,0,0,0.4); color:#fff; font-size:20px; padding:5px 10px} .author_name{color:#ddd; font-size:12px; margin-right:10px; background-color:rgba(0,0,0,0.4); padding:3px 5px} .author_name:hover, .author_name:focus, .post_date:hover, .post_date:focus{text-decoration:none; outline:none} .author_name > i, .post_date > i{margin-right:5px} .post_date{color:#ddd; font-size:12px; background-color:rgba(0,0,0,0.4); padding:3px 5px} /*============start single page=================*/ .breadcrumb{border-radius:0} .breadcrumb > li+li:before{display:none} .breadcrumb > li a > i{margin-right:5px} .breadcrumb > li a > .fa-angle-right{margin-left:5px} .post_title{font-size:2em; font-weight:400; margin-bottom:15px; line-height:30px; padding:15px; border-left-style:solid; border-left-width:15px} .single_post_content{background-color:#fff; display:inline; float:left; margin-top:40px; padding:40px 20px; width:100%} .single_post_content img{margin-bottom:10px; max-width:100%; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .single_post_content img:hover{opacity:0.75} .post_footer{float:left; display:inline; width:100%; margin-top:10px} .post_pager li{display:block; float:left; text-align:center; width:50%} .post_pager li:hover{color:#fff} .post_pager li a{padding:20px; display:block; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .post_pager li a:hover{background-color:#09c !important; text-decoration:none; outline:none; color:#fff} .previous strong, .next strong{display:block; width:100%} .previous span, .next span{display:block; width:100%} .previous a{border-right:2px solid #ccc} .related_post{background-color:#fff; border-top:1px solid #ddd; display:inline; float:left; margin-top:20px; padding:0 20px; width:100%} .related_post > h2{background:none repeat scroll 0 0 white; border-bottom:1px solid #e3e3e3; font-size:17px; font-weight:bold; line-height:32px; margin:0 0 20px; padding:10px 0px; width:100%} .relatedpost_nav{} .relatedpost_nav li{float:left; width:32%; margin-right:12px} .relatedpost_nav li:last-child{margin-right:0} .social_area{display:inline; float:left; margin-top:20px; padding:10px 0; width:100%} .social_area ul{display:inline-block; text-align:center; width:100%} .social_area ul li{display:inline-block} .social_area ul li > a{background:none repeat scroll 0 0 grey; color:white; font-size:24px; border-radius:5px; margin:0 4px; padding:6px 12px; text-decoration:none; display:inline-block; opacity:0.75; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .social_area ul li > a:hover{border-radius:0; opacity:1; margin-top:-5px} .social_area li:nth-child(1) > a{background:none repeat scroll 0 0 #3b5998; padding:6px 16px} .social_area li:nth-child(2) > a{background:none repeat scroll 0 0 #00acee} .social_area li:nth-child(3) > a{background:none repeat scroll 0 0 #dd4b39} .social_area li:nth-child(4) > a{background:none repeat scroll 0 0 #0e76a8} .social_area li:nth-child(5) > a{background:none repeat scroll 0 0 #c92228} .single_post_content ul{margin-bottom:10px; padding:10px} .single_post_content ul li:before{content:""; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1; margin-right:5px} .single_post_area .author_name, .single_post_area .post_date{background:none} .single_post_content h1, .single_post_content h2, .single_post_content h3, .single_post_content h4, .single_post_content h5, .single_post_content h6{color:#555} .btn{-webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; border-radius:0} .btn:hover{-webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; border-radius:4px} .btn-basic{border:1px solid #09c; background-color:#09c; color:#fff; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .btn-basic:hover{border:1px solid #09c; background-color:#0597C8; color:#fff} /*==========start 404 page============*/ #errorpage_body{float:left; display:inline; width:100%} .errorpage_area{background-color:#474747; display:inline; float:left; width:100%; padding-bottom:40px} .errorpage_area .error-title{text-align:center} .errorpage_area .error-title span{color:#fff; font-size:10em} .error_content{float:left; display:inline; width:100%; text-align:center} .error_content > p{text-align:center; color:#fff; padding:0 5px} .error_content a{background-color:#fff; color:#111; display:inline-block; padding:10px 25px; margin-top:25px; -webkit-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s} .error_content a:hover{text-decoration:none; outline:none; color:#fff} /*==========start responsive style============*/ @media(max-width:1199px ){.logo_area{width:32%}.top_addarea{width:66%}.catg_nav li{width:47.94%}.catg_nav3 li{width:100%}.relatedpost_nav li{margin-right:9px}.custom-tabs > li > a{font-size:11px; padding:8px 2px}} @media(max-width:991px ){.slider_tittle{bottom:10px; color:#fff; font-size:18px; line-height:1.5em; margin:0 15px}.logo_area{width:100%}.top_addarea{display:none}.middle_bar{width:100%}.catg_nav li{width:47.64%}.catg_nav3 li{width:100%}.catg5_nav li{width:49%; padding-right:6px}.catg3_snav .media-left > img{height:auto}.ppost_nav li{width:50%; float:left}.catg_nav2 .catgimg_container{height:250px}.relatedpost_nav li{margin-right:7px}.custom-tabs > li > a{font-size:13px; padding:8px 5px}} @media(max-width:767px ){.navbar-collapse{padding-left:15px}.container-fluid{padding-left:15px}#searchIcon{height:50px; float:right}#search-hide input{height:108px; width:89%}.header_search{width:100%}.navbar{width:100%}.navbar-toggle{float:none; margin:8px auto; padding:13px}.navbar-header{text-align:center}button.remove{padding-top:40px; padding-right:6px}.left_bar{width:100%}} @media(max-width:480px ){.logo_area{text-align:center}.logo img{width:100%}.catg_nav li{width:100%}.category_three{width:100%}.category_four{width:100%}.catg5_nav li{padding-right:0; width:100%}.ppost_nav li{width:100%}.footer_bottom_left{text-align:center; width:100%}.footer_bottom_right{text-align:center; width:100%}.read_more{z-index:99}.singlearcive_article p{display:none}.relatedpost_nav li{margin-right:0; width:100%}.recentpost_nav li a > img{height:150px}.carousel-caption{bottom:5px; padding-bottom:0; padding-top:10px; z-index:999}.latest_newsarea span{font-size:14px; padding:5px 15px}} @media(max-width:320px ){.carousel-indicators{display:none}.carousel-caption > h1{font-size:10px}.read_more{font-size:10px; padding:5px 6px; right:5px; top:5px}.singlearcive_article{bottom:0}.singlearcive_article h2{line-height:15px}.singlearcive_article p{display:none}.post_title{border-left:5px solid #09c; font-size:1.5em}.single_post_area .author_name, .post_date{width:100%; float:left; margin-bottom:10px}.social_area ul li > a{font-size:20px; margin:0 2px}.carousel-caption{bottom:5px; padding-bottom:0; padding-top:10px}.carousel-caption > h1 a{font-size:14px}.custom-tabs > li > a{font-size:11px}.singlearcive_article > h2 a{font-size:11px}.author_name{margin-bottom:2px; float:left}} .catg_nav9 ul{display:block; float:left; margin-right:50px; width:48.4%; margin-bottom:5px} #menu, #menu ul{ padding:0; margin:0; list-style:none; text-align: left; width:1097px; z-index:3000 } #menu li{ display:inline-block; position:relative; } #menu ul li{ display:inherit; } #menu ul li:last-child{ border-radius:0 0 8px 8px; } #menu ul{ position:absolute; max-height:0; width:100%; overflow:hidden; transition: .6s all .2s; z-index:14} #menu li:hover ul{ max-height:15em; } #menu li{ background:#DF6D14; } #menu li li{ background:#4caf50; } #menu li li:hover{ background:black; } #menu a{ text-decoration:none; display:block; padding:8px 28px; color:#fff; font-family:arial; font-size:14px; } #menu ul a{ padding:8px 6px; } #menu li:hover li a{ color:#fff; text-transform:inherit; } #menu li:hover a, #menu li li:hover a{ color:#000; } #s{background-color:#DF6D14; padding-left:500px; } #d{background-color:#DF6D14; padding-left:300px; } form { width:665px; border:1px solid; padding-left:20px; background:white; } fieldset { padding:0 20px 20px 20px; margin-bottom:10px; border:1px solid #DF3F3F; } legend { color:#DF3F3F; font-weight:bold } label { margin-top:10px; display:block; } label.inline { display:inline; margin-right:50px; } input, textarea, select, option { background-color:#FFF3F3; } textarea, select { padding:3px; border:1px solid #F5C5C5; border-radius:5px; width:300px; height:210px; box-shadow:1px 1px 2px #C0C0C0 inset; } #mission{ border:1px solid red; } #bloc1{ margin-left:269px; margin-top:-199px; display:block; margin-right:30px; padding-top:10px; width:60%; } #bloc2{ margin-left:229px; margin-top:-159px; display:block; margin-right:30px; padding-top:10px; width:60%; } #elie { border:1px solid; background:#57D53B; margin-bottom:10px; padding:10px; } #tes { border:1px solid; background:#DF6D14; margin-bottom:10px; padding:10px; width:500px; } #tes1 { background:#DF6D14; border:1px solid; margin-left:150px; margin-bottom:10px; padding:10px; width:400px; } #tes2 { background:#DF6D14; border:1px solid; margin-left:200px; margin-bottom:10px; padding:10px; width:400px; } #bloc3{ margin-left:229px; margin-top:-160px; display:block; margin-right:30px; padding-top:10px; width:60%; } #bloc4{ display:block; margin-right:30px; padding-top:10px; width:100%; } #border1{ border:1px solid; width:665px; padding-left:10px; background:white; } #border2{ border:1px white solid; width:665px; padding-left:10px; background:white; height:590px; } #border3{ display:block; width:670px; height:70px; background:#fcf8e3; border-bottom:5px solid #FB7D00; font-size:16px; } #maps { float:left; width:270px; margin-left:36px; padding-top:-850px; position:top;} #menu12, #menu2 ul{ padding:0; margin:0; list-style:none; text-align: left; width:937px; overflow: hidden; /* Empêche le dépassement des flottants. */ z-index:3000; } #menu2 li{ display:inline-block; position:relative; } #menu2 ul li{ display:inherit; } #menu2 ul li:last-child{ border-radius:0 0 8px 8px; } #menu2 ul{ position:absolute; max-height:0; width:100%; overflow:hidden; transition: .6s all .2s; } #menu2 li:hover ul{ max-height:15em; } /*#menu2 li{ background:#DF6D14; }*/ #menu2 li li{ background:#DF6D14; color:white; width:900px; height:80px; display:block; } } #menu2 li:hover, #menu2 li li:hover{ background:#4caf50; } #menu2 a{ text-decoration:none; display:block; padding:8px 32px; color:; font-family:arial; } #menu2 ul a{ padding:8px 6px; } #menu2 li:hover li a{ color:white; text-transform:inherit; } #menu2 li:hover a, #menu li li:hover a{ color:white; } p { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; } #spinner img { position: absolute; border: 1px solid #ccc; background: rgba(255,255,255,0.8); box-shadow: inset 0 0 20px rgba(0,0,0,0.2); } @-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-180deg); } } #stage { margin: 1em auto; -webkit-perspective: 1100px; } #spinner { -webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; -webkit-transform-style: preserve-3d; float:left; margin-left:280px; } #spinner:hover { -webkit-animation-play-state: paused; } #spinner img { position: absolute; border: 1px solid #ccc; background: rgba(255,255,255,0.8); box-shadow: inset 0 0 20px rgba(0,0,0,0.2); } #thumbs { list-style: none outside none; /* On supprime le style de la liste par défaut */ margin: 0 auto; /* La galerie est centrée horizontalement */ padding: 0; width: 480px; padding-bottom:56px; } #thumbs li { float: left; height: 112px; margin: 0; padding: 5px; position: relative; width: 150px; z-index: 10; } #thumbs li:hover { z-index: 100; /* Nécessaire pour Firefox */ } #thumbs li img { border: 5px solid #fff; z-index: 100; transition: transform 0.25s ease-in-out; -moz-transition: -moz-transform 0.25s ease-in-out; -o-transition: -o-transform 0.25s ease-in-out; -webkit-transition: -webkit-transform 0.25s ease-in-out; transform: scale(0.75); /* On réduit l'image à 75% */ -moz-transform: scale(0.75); -o-transform: scale(0.75); -webkit-transform: scale(0.75); } #thumbs:hover li img { opacity: 0.5; /* Au survol de la galerie, toute les images auront une opacité de 50% */ } #thumbs li:hover img { opacity: 1; /* L'image survolée aura une opacité de 100% */ z-index: 100; transform: scale(1); /* On affiche l'image à sa taille normale */ -moz-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); box-shadow: 1px 1px 10px #000; /* On ajoute une ombre */ -moz-box-shadow: 1px 1px 10px #000; -o-box-shadow: 1px 1px 10px #000; -webkit-box-shadow: 1px 1px 10px #000; } #contac { border:1px red solid; background:#57D53B; margin-bottom:10px; padding:10px; } #z{ margin-top:25px; border:1px red solid; background:#57D53B; margin-bottom:10px; margin-left:20px; float:left; } #for { background-image:url("images/post.jpg"); } #lien_utile{ display:block; width:650px; height:70px; background:#fcf8e3; border-bottom:5px solid #FB7D00; font-size:16px; font-weight:bold; color:#74930B; padding-top:5px; margin-left:15px; margin-right:225px; } .categ { background-color:#f5f5f5; margin: .5em 0 0; padding: 6px 8px; font-size: 90%; font-style: italic; }<code css>