28172 sujets

CSS et mise en forme, CSS3

Bonjour Smiley biggrin ,

J'ai un petit problème :

http://data.imagup.com/5/1112866705.JPG

Mon menu apparaît derrière la page. Or, je désire qu'il soit de cette manière.

http://data.imagup.com/4/1112865120.JPG

Je l'ai pris de ce site.

Le fichier CSS du menu est le suivant (http://ddata.over-blog.com/1/18/69/88/demo/css1.css). Celui du site en général (http://fdata.over-blog.net/1/18/69/88/css/page.css?2.4.0.17).

Voici le CSS du site non compressé :

/* @override  http://xylpho.toulouse.jfg-networks.net/fdata/99/00/00/01/designs/302/common/7.css  */

/* @group Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
.box ol, .box ul {
	list-style: none;
}
.contenuArticle ul, .contenuArticle ol {
	margin-left: 30px;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* @end */

#global {
	margin: 0 auto;
	width: 980px;
}

#ln_1 {
	width: 980px;
}

.ln {
	clear: both;
}

.cl {
	float: left;
}

.clear {
	clear: both;
}

/* modele */

#cl_0_0 {
	width: 100%;
}

#cl_1_0 {
	width: 674px;
}

#cl_1_1 {
	width: 306px;
}

#cl_2_0 {
	width: 100%;
}

.box {
	width: auto;
}

.afterArticle span {
 display: block;
 float: left;
 clear: both;
}
.afterArticle .date span {
 display: none;
}
.afterArticle .date .text {
 display: block;
}
.commentMessage p {
 margin: 0px;
}/*----------------------------------------------------------------------------*/
/* Variation                                                                  */
/*----------------------------------------------------------------------------*/
body {
	font: 100%/1.5 verdana,"lucida grande", arial, sans-serif;

}

#ln_1 {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/fauxcols_7.png) repeat-y #fff;
	border: 1px solid #bababa;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

/* @group Typo */

p, .articles, .extrait {
	font-size: 12px;
	margin-bottom: 10px;
}

h1 {
	font-size: 24px;
	color: #666;
}

.divTitreArticle h2, .titreExtrait, .divPageTitle, .column_content .micropayment .box-titre{
	font-size: 18px;
}
p.nocomm {
	font-size: 11px;
	color: #666;
	margin-left: 50px;
}



/* @end */

/* @group header */

#header {
	padding: 10px;
	text-align: left;
	margin-bottom: 10px;
}

#header h1 {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/blog_title.png) no-repeat;
	padding-left: 36px;
	letter-spacing: -1px;
}

#header h1 a, #header h1 a:visited {
	color: #fff;
	text-decoration: none;
}

/* @end */

/* @group Articles */
.beforeArticle, .dateExtrait {
	font-size: 10px;
	color: #666;
}

.beforeArticle a,
.beforeArticle a:visited,
.dateExtrait a,
.dateExtrait a:visited {
	text-decoration: none;
	color: #333;
	font-weight: bold;
	font-style: normal;
}

.beforeArticle br,.dateExtrait br {
	display: none;
}

.beforeArticle, .dateExtrait {
	position: relative;
	display: block;
	width: 649px;
	overflow: hidden;
	margin-top: 10px;
	margin-left: 15px;
}

.beforeArticle, .dateExtrait {
	border-bottom: 1px solid #e5e5e5;
}

.pagination {
	display: block;
	margin: 0 auto;
	padding: 2px 5px;
	font-size: 11px;
}

.pagination a, .pagination a:visited {
	color: #777;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
}

b.currentPage {
	background: #777;
	margin: 0 3px;
	padding: 2px 4px;
	color: #fff;
}

.before_articles .pagination {
	margin-top: 10px;
}

.beforeArticle .date, .dateExtrait .date {
	font-size: 10px;
	background: #fff url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/date.png) no-repeat 0 3px;
	padding: 3px 6px 3px 14px;
	color: #666;
}

.beforeArticle .publishedBy, .dateExtrait .publishedBy {
	font-size: 9px;
	display: block;
	color: #666;
	position: absolute;
	right: 5px;
	top: 4px;
	background: transparent url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/small_user.png) no-repeat 0 1px;
	padding-left: 14px;
}

.beforeArticle .topic {
	display: block;
}

.article {
	padding-bottom: 20px;
	margin: 1px;
	margin-bottom: 20px;
}

div.divTitreArticle, .titreExtrait, .divPageTitle, .column_content .micropayment .box-titre{
	margin-left: 11px;
}

.divTitreArticle h2, .titreExtrait, .divPageTitle h2, .column_content .micropayment .box-titre h2{
	font-weight: normal;
	font-size: 24px;
	letter-spacing: -1px;
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/art_title.png) no-repeat 0 2px;
	padding-left: 34px;
	margin-top: 5px;
	margin-bottom: 10px;
	display: block;
	clear: both;
	width: 93%;
}

a.titreExtrait {
	background: none;
	padding: 0;
	margin: 0;
	display: inline;
}

.titreExtrait {
	display: inline;
	width: auto;
}

.divTitreArticle h2 a,
.divTitreArticle h2 a:visited,
.titreExtrait a,
.titreExtrait a:visited,
.column_content .micropayment h2 a,
.column_content .micropayment h2 a:hover{
	color: #333;
	text-decoration: none;
}

.divTitreArticle h2 a:hover,
.titreExtrait a:hover,
.column_content .micropayment .box-title a:hover{
	color: #7d7d7d;
	text-decoration: underline;
}

div.contenuArticle, .extrait, .pageContent, .column_content .micropayment .box-content{
	margin-left: 15px;
	margin-right: 10px;
	font-size: 12px;
}

div.contenuArticle a,
div.contenuArticle a:visited,
div.extrait a,
div.extrait a:visited,
.column_content .micropayment a,
.column_content .micropayment a:visited{
	color: #333;
	text-decoration: none;
	border-bottom: 1px dotted;
}

div.contenuArticle a:hover,
div.extrait a:hover,
.column_content .micropayment a:hover {
	color: #7d7d7d;
}


#articleSeul.article {
	margin-bottom: 15px;
	padding-bottom: 0;
}

.hrExtrait {
	display: none;
}

.extraitArticle {
	padding: 0;
}

/* @group Apres articles */

.afterArticle, .plusExtrait {
	margin: 0 10px 0 15px;
	padding: 5px;
	font-size: 11px;
	background-color: #eaeaea;
	border: 1px solid #d1d1d1;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	line-height: 1.8;
	font-style: normal;
	width: 629px;
	overflow: hidden;
}
.afterArticle .separator, .plusExtrait .separator{
	display: none;
}
.plusExtrait {
	text-align: left;
}

.plusExtrait br {
	display: none;
}

.afterArticle a,
.afterArticle a:visited,
.plusExtrait a,
.plusExtrait a:visited {
	text-decoration: none;
	color: #333;
	font-weight: bold;
	font-style: normal;
}

.spanRecommend {
	display: block;
	clear: both;
}

.topic {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/topic_small.png) no-repeat left 1px;
	padding-left: 14px;
	margin-right: 10px;
	display: block;
	float: left;
}

.linkAddComment {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/addcomment_small.png) no-repeat left top;
	padding-left: 14px;
	margin-right: 10px;
	display: block;
	float: left;
}

.linkComment {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/commentcount_small.png) no-repeat left top;
	padding-left: 14px;
	margin-right: 10px;
	display: block;
	float: left;
}

span.community {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/community_small.png) no-repeat left top;
	padding-left: 18px;
	margin-right: 10px;
	display: block;
	float: left;
}

.linkRecommend {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/recommand_small.png) no-repeat left top;
	padding-left: 14px;

}

.facebook {
	display: ;
	padding-left: 15px;
	height: auto;
	text-decoration: none !important;
	vertical-align: middle;
}

.afterArticle br {
	display: none;
}

div.article_navigation {
	margin: 15px 10px 0 15px;
	width: 639px;
	font-size: 10px;
	font-weight: bold;
	position: relative;
	height: 16px;
}

div.article_navigation a, div.article_navigation a:visited {
	color: #333;
}

.linkAllArticles {
	width: 26%;
	position: absolute;
	left: 50%;
	margin-left: -13%;
	height: 16px;
}

.nextArticle {
	float: right;
	width: 37%;
	height: 16px;
}

.previousArticle {
	float: left;
	width: 37%;
	height: 16px;
}

.afterArticle .publishedBy, .plusExtrait .publishedBy {
	color: #333;
	font-weight: bold;
	background: transparent url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/small_user.png) no-repeat 0 0;
	padding-left: 14px;
	margin-right: 10px;
}

.plusExtrait .publishedBy {
	text-align: left;
}


/* @end */

/* @group Commentaires */

.commentContainer {
	margin-bottom: 25px;
}

.h2commentMessage {
	font-weight: normal;
	font-size: 24px;
	letter-spacing: -1px;
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/comments.png) no-repeat 0 0;
	padding-left: 34px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 11px;
	color: #333;
}

.commentMessage {
	margin-left: 15px;
	margin-right: 15px;
	font-size: 11px;
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/comment_single.png) no-repeat;
	padding-left: 20px;
	color: #484848;
}

div.commentOption {
	margin-left: 15px;
	margin-right: 15px;
	font-size: 10px;
	border-top: 1px dotted;
	margin-top: 5px;
	padding-top: 3px;
	text-align: right;
	color: #7b7b7b;
}

div.commentOption a.newWindow {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/small_user.png) no-repeat;
	padding-left: 14px;
}

div.commentOption a, div.commentOption a:visited {
	text-decoration: none;
	color: #333;
	font-weight: bold;
}

.afterReactions {
	display: block;
	width: 100%;
	overflow: hidden;
	font-size: 11px;
	text-align: right;
	margin-bottom: 10px;
}

.afterReactions .linkAddComment {
	background: url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/addcomment_small.png) no-repeat left top;
	padding-left: 14px;
	margin-right: 10px;
	display: block;
	float: right;
}

.afterReactions .linkAddComment, .afterReactions .linkAddComment:visited {
	text-decoration: none;
	color: #333;
	font-weight: bold;
}

div.commentMessage.reponseMessage {
	margin-top: 10px;
	background: #fce677 url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/comment_owner.png) no-repeat 8px 6px;
	padding: 5px 5px 0 33px;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topright: 6px;
	-moz-border-radius-topleft: 6px;
	border: 1px solid #ffc300;
	border-bottom: none;
}

div.commentOption.reponseOption {
	background: #fce677;
	margin-top: 0;
	padding: 5px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border: 1px solid #ffc300;
	border-top: none;
}

/* @end */

/* @end */

/* @group liste Articles */

.listArticles {
	margin: 15px 15px 10px 15px;
}

.listArticles a, .listArticles a:visited {
	color: #333;
	text-decoration: none;
	font-size: 18px;
	letter-spacing: -1px;
}

.listArticles a:hover {
	text-decoration: underline;
	color: #7d7d7d;
}

/* @end */

/* @group sidebar droite */
#cl_1_1 div.column_content {
	padding: 5px;
	font-size: 11px;
}

#cl_1_1 .box {
	margin-bottom: 15px;
}

#cl_1_1 .pub {
	margin-left: -2px;
}

#cl_1_1 .box-content {
	margin-left: 5px;
}

#cl_1_1 .pub .box-content, #cl_1_1 .calendrier .box-content,#cl_1_0 .calendrier .box-content {
	margin-left: 0;
}

#cl_1_1 .box-footer {
	display: none;
}

#cl_1_1 h2 {
	font-size: 14px;
	color: #333;
	font-weight: normal;
	letter-spacing: -1px;
	background: #efe1d4;
	margin-bottom: 5px;
	padding: 2px;
	padding-left: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#cl_1_1 .concours h2 {
	display: none;
}

#cl_1_1 .concours a.newWindow {
	border-bottom: none;
}

#cl_1_1 a, #cl_1_1 a:visited {
	color: #333;
	text-decoration: none;
}

#cl_1_1 a:hover {
	border-bottom: 1px dotted;
}

/* @end */

.listAll {
	display: block;
	text-align: right;
	font-size: 10px;
}
.listAll em{
	font-style: normal;
}

.listAll a {
	border-bottom: 1px dotted;
}

/* @group bloc calendrier */

/* @group droit */

#cl_1_1 table.calendarTable1 {
	width: 294px;
	margin-left: 1px;
	background: #f6fbff;
}

#cl_1_1 table.calendarTable1 td.calendarTop1 {
	background: #fff;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: -1px;
	height: 18px;
	width: 256px;
}

#cl_1_1 table.calendarTable1 tbody tr {
	border-bottom: 1px solid #d6e5f7;
	height: 16px;
}

#cl_1_1 table.calendarTable1 tbody tr td {
	padding: 2px;
	width: 38px;
	height: 16px;
	text-align: right;
	vertical-align: top;
	font-size: 9px;
}

#cl_1_1 table.calendarTable1 td.calendarDays1 a {
	display: block;
	background: #dde7ed url(http://fdata.over-blog.net/99/00/00/01/designs/302/blue/pics/post_cal.png) no-repeat 17px 3px;
	width: 34px;
	height: 16px;
	padding: 2px;
}

#cl_1_1 table.calendarTable1 tbody tr td.calendarDays1 table {
	width: 290px !important;
}

#cl_1_1 table.calendarTable1 tbody tr td.calendarDays1 table td.calendarDays1 {
	height: 16px;
	font-weight: bold !important;
	font-size: 11px;
	padding: 0;
	text-align: center;
}

#cl_1_1 table.calendarTable1  td.calendarDays1 table tr {
	border-bottom: none;
	height: 16px;
}

#cl_1_1 table.calendarTable1 td.calendarDays1 table td.calendarDays1 a {
	background: none;
	padding: 0;
	margin: 0;
}

#cl_1_1 table.calendarTable1 td.calendarDays1 a:hover,
#cl_1_1 table.calendarTable1 td.calendarDays1 table td.calendarDays1 a:hover {
	border-bottom: none;
}



/* @end */

#cl_1_1 table.calendarTable1 td.calendarTop1 a,
#cl_1_1 table.calendarTable1 td.calendarTop1 a:visited,
#cl_1_1 table.calendarTable1 td.calendarTop1 a,
#cl_1_1 table.calendarTable1 td.calendarTop1 a:visited {
	color: #333;
}

td.calendarToday1 {
	font-weight: bold;
	color: #5d802e;
	background: #d5f2bd;
	
}




/* @end */

/* @group footer */
#footer {
	background: #333;
	margin-top: 10px;
	padding: 10px;
	font-size: 11px;
	color: #fff;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#footer a, #footer a:visited {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

#footer a:hover {
	border-bottom: 1px dotted;
	text-decoration: none;
}



/* @end */
#menuob {	background: #ddd;
	margin: 15px;
	padding: 10px;
	font-size: 11px;
	border: 1px solid #ccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#menuob a {color: #333;}
/*----------------------------------------------------------------------------*/
/* Personnalisation                                                           */
/*----------------------------------------------------------------------------*/
body {
	background-color: #f1f1f1 ! important;
background-image: none ! important;
}
#top h1,
#top h1 a {
	color: #FFFFFF;
	font-family: "tahoma";
	font-size: 24px;
}
.contenuArticle, .pageContent, .extraitArticle { background-color: #FFFFFF ! important;
 color: #000000 ! important;
 font-family: "tahoma";
 font-size: 12px;
}
.divTitreArticle h2, .divPageTitle h2,
.divTitreArticle h2 a, .divPageTitle h2 a,
.titreExtrait {
	color: #333333 ! important;
	font-family: "tahoma" ! important;
	font-size: 16px ! important;
}
.box-titre h2 {
	color: #333333 ! important;
	font-family: "tahoma" ! important;
	font-size: 14px ! important;
}
.commentMessage {
	color: #484848 ! important;
	font-family: "tahoma" ! important;
	font-size: 12px ! important;
}
.responseMessage {
	color: #ff0000 ! important;
	font-family: "tahoma" ! important;
	font-size: 12px ! important;
}

#menu {
	position: absolute;
	top: 0;
	right: 70px;
	list-style: none;
}

#menu li {
	text-align: center;
	width: 141px; /*update padawan*/
	margin-left: 40px;
	float: left;
	height: 115px;
}

#menu li:hover, #menu li:focus {
	/*background:url(http://www.alsacreations.com/css/img/halo.png) no-repeat 0px 35px;*/
}

#menu li a {
	text-decoration: none;
	color: #494949;
	font-size: 1.5em;
	font-weight: bold;
	text-transform:uppercase;
	line-height:30px;
	display:block;
	padding-top:78px;
	/*background:url(img/menu-icon-hovered.png) 0px 500px no-repeat; update padawan*/
}

#menu li a:hover, #menu li a:focus, #menu li a:active {
	/*background-position: center bottom; update padawan*/
}

#menu li#menu-apprendre {
	background:url(img/menu-li-apprendre.png) 50% -20px no-repeat;
}

#menu li#menu-emploi {
	background:url(img/menu-li-emploi.png) 50% -20px no-repeat;
}

#menu li#menu-forum {
	background:url(http://idata.over-blog.com/1/18/69/88/icones/menu-li-forum.png) 50% -20px no-repeat;
}


Voici également le code du menu :



<!--[if IE 6]>
<style>
body {behavior: url("http://ddata.over-blog.com/1/18/69/88/demo/csshover3.htc");}
#menu li .drop {background:url("http://ddata.over-blog.com/1/18/69/88/demo/img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->

</head>

<body>

<ul id="menu1">

    <li><a href="http://www.maxishare.fr/" class="drop">Accueil</a><!-- Begin Home Item -->

        <div class="dropdown_2columns"><!-- Begin 2 columns container -->

            <div class="col_2">
                <h2>Bienvenue !</h2>
            </div>

            <div class="col_2">
                <p><strong><span style="color: #ff0000;">Maxishare est un site dédié au téléchargement de films, de jeux vidéo, de musique, de logiciels, de séries TV, de livres et tout autre type d’œuvre d'esprit via Megaupload, RapidShare et Hotfile.</span></strong></p>
                <p>En plus de cela, ce site regroupe une forte communauté qui se regroupe régulièrement dans le forum. <strong><span style="color: blue;">N’hésitez pas à nous rejoindre.</span></strong></p>
            </div>

            <div class="col_2">
                <h2>Navigateurs pris en charge</h2>
            </div>

            <div class="col_1">
                <img src="http://ddata.over-blog.com/1/18/69/88/demo/img/browsers.png" width="125" height="48" alt="" />
            </div>

            <div class="col_1">
                <p>Maxishare a été testé sur tous les principaux navigateurs pour vous offrir la meilleure expérience possible.</p>
            </div>

        </div><!-- End 2 columns container -->

    </li><!-- End Home Item -->

    <li><a href="#" class="drop">Recherche</a><!-- Begin 5 columns Item -->

        <div class="dropdown_5columns"><!-- Begin 5 columns container -->

            <div class="col_5">
                <h2>Recherche</h2>
            </div>
            <div>
    </div>
    <div class="cse-branding-form">
      <form action="http://www.google.fr/cse" name="cse-search-box" id="cse-search-box" target="_blank">
    <div>
       <input name="cx" value="partner-pub-9945254626236907:qgt3q6b49bb" type="hidden" /> <input name="ie" value="ISO-8859-1" type="hidden" /> <input name="q" size="31" type="text" /> <input name="sa" value="Rechercher" type="submit" />
    </div>
    </form>
    </div>
    <style type="text/css"><!--
    @import url(http://www.google.com/cse/api/branding.css);
    --></style>
            <div class="col_1">
                <p class="black_box"><img src="http://ddata.over-blog.com/1/18/69/88/demo/img/toolbar_find.png" width="20" height="20" alt="Recherche" /> Ce moteur de recherche allie la puissance et l’efficacité de l’algorithme de Google pour un résultat saisissant.</p>
            </div>

            <div class="col_1">
                <p>Nous vous proposons quelques astuces pour affiner vos recherches sur Maxishare. <span style="color: red;"><strong>Alors, n’hésitez pas, car Google est votre ami !</strong></span></p>
            </div>

            <div class="col_1">
                <p class="italic">Pour exclure un mot de votre recherche, placez le signe moins ( - ) immédiatement devant ce mot. (Le signe moins doit être précédé d'un espace.)</p>
            </div>

            <div class="col_1">
                <p>Pour obtenir la liste des sites contenant des mots dans un ordre précis, mettez-les entre guillemets : en tapant par exemple "glee mu". </p>
            </div>

            <div class="col_1">
                <p class="strong">A noter que Google n’est sensible ni à la casse ni aux accents ou autres signes diacritiques ("FRANÇAIS" et "FRANCAIS" sont ainsi équivalents).</p>
            </div>

            <div class="col_5">
                <h2>Dernières news</h2>
            </div>

            <div class="col_3">

                <img src="http://ddata.over-blog.com/1/18/69/88/demo/img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p><strong>Vous n’attendiez pas celle-là, mes chers ; n’est-ce pas brûleurs de bandes passantes ? Eh, bien, le résultat est devant vos petits yeux rougeâtres et j’espère que cette nouvelle mouture répond à vos attentes !</strong><a href="http://www.maxishare.fr/article-rafraichissement-de-fin-d-annee-63327765.html">Lire la suite...</a></p>

                <img src="http://ddata.over-blog.com/1/18/69/88/demo/img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p><strong>L’année 2010 a été sans conteste le théâtre de moult changements et évolutions concernant Maxishare. Notre staff s’est davantage concentré sur le plan technique et graphique du site pour corriger ses défauts.</strong><a href="http://www.maxishare.fr/article-resolutions-et-refontes-occasionnelles-56328074.html">Lire la suite...</a></p>

            </div>

            <div class="col_2">

                <p class="black_box"><img src="http://ddata.over-blog.com/1/18/69/88/demo/img/toolbar_get_info.png" width="20" height="20" alt="" /> Suivez l’évolution de Maxishare, à l’aide de ce module. Vous saurez ainsi toutes les dernières améliorations en date apportées et pourrez bénéficier très tôt des nouvelles fonctionnalités implantées. Alors, n’hésitez pas à jeter régulièrement un coup d’œil à ces news croustillants.</p>

            </div>

        </div><!-- End 5 columns container -->

    </li><!-- End 5 columns Item -->

    <li><a href="#" class="drop">Catégories</a><!-- Begin 4 columns Item -->

        <div class="dropdown_4columns"><!-- Begin 4 columns container -->

            <div class="col_4">
                <h2>Voici les principales catégories</h2>
            </div>

            <div class="col_1">

                <h3>Interactif</h3>
                <ul>
                    <li><a href="http://maxishare.xooit.fr/profile.php?mode=register"><strong>Inscription</strong></a></li>
                    <li><a href="http://maxishare.xooit.fr/login.php">Connection</a></li>
                    <li><a href="http://www.maxishare.fr/pages/Nous_contacter-639157.html">Contact</a></li>
                    <li><a href="http://www.maxishare.fr/pages/Ajouter_un_article-1472895.html">Ajouter un article</a></li>
                </ul>

            </div>

            <div class="col_1">

                <h3>Télécharger</h3>
                <ul>
                    <li><a href="http://www.maxishare.fr/categorie-10704603.html">Jeux</a></li>
                    <li><a href="http://www.maxishare.fr/categorie-10810045.html">Films</a></li>
                    <li><a href="http://www.maxishare.fr/categorie-10810373.html">Logiciels</a></li>
                    <li><a href="http://www.maxishare.fr/categorie-10810093.html">Séries TV</a></li>
					<a href="http://www.maxishare.fr/categorie-10810109.html">Séries animées</a></li>
                    <li><a href="http://www.maxishare.fr/categorie-10810137.html">Documentaires</a></li>
					<li><a href="http://www.maxishare.fr/categorie-10810167.html">Musique</a></li>
					<li><a href="http://www.maxishare.fr/categorie-10810201.html">Magazines</a></li>
					<li><a href="http://www.maxishare.fr/categorie-10810336.html">Journaux</a></li>
					<li><a href="http://www.maxishare.fr/categorie-10810352.html">BD et mangas</a></li>
                </ul>

            </div>

            <div class="col_1">

                <h3>Aide</h3>
                <ul>
                    <li><a href="http://www.maxishare.fr/pages/FAQ-1472648.html">FAQ</a></li>
                    <li><a href="http://www.maxishare.fr/pages/Les_7_raisons_pour_adopter_ce_site-1453957.html">7 raisons de rester</a></li>
                    <li><a href="http://www.maxishare.fr/pages/Disclaimer-1511158.html">Diclaimer</a></li>
                    <li><a href="http://www.maxishare.fr/pages/regles-2609150.html">Ce que dit la loi...</a></li>
                    <li><a href="http://www.maxishare.fr/pages/charte-de-confiance-2776762.html">Charte de confiance </a></li>
                </ul>

            </div>

            <div class="col_1">

                <h3>Suivez-nous</h3>
                <ul>
                    <li><a href="http://www.facebook.com/pages/Maxishare/127634580590488"><em>Facebook</em></a></li>
					<li><a href="http://twitter.com/maxishare"><em>Twitter</em></a></li>
                </ul>

            </div>

        </div><!-- End 4 columns container -->

    </li><!-- End 4 columns Item -->

	<li class="menu1_right"><a href="#" class="drop">Partenaires</a>

		<div class="dropdown_1column align_right">

                <div class="col_1">

                    <ul class="simple">
                        <li><a href="http://www.topwarez.fr/">Top Warez</a></li>
                        <li><a href="http://www.liensmegaupload.fr/">Liens Megaupload</a></li>
                        <li><a href="http://www.force-download.net/?p=34&hl=fr">Force Download</a></li>
                        <li><a href="http://www.maxishare.fr/pages/Nous_contacter-639157.html"><strong>Devenir partenaire</strong></a></li>
                    </ul>

                </div>

		</div>

	</li>

    <li class="menu1_right"><a href="#" class="drop">Débrideurs</a><!-- Begin 3 columns Item -->

        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->

            <div class="col_3">
                <h2>Liste de débrideurs</h2>
            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="http://deb.ze.cx/">Deb</a></li>
                    <li><a href="http://rapid8.com/">Rapid8</a></li>
                    <li><a href="http://www.leechgod.eu/">LeechGod</a></li>
                    <li><a href="http://www.megadebrideur.com/">MegaDébrideur</a></li>
                    <li><a href="http://www.iphon-team-debrid.com/">Iphon-team-debrid</a></li>
                </ul>

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="http://gr0wl.com/">Gr0wl</a></li>
                    <li><a href="http://www.gigaleecher.com/">Gigaleecher</a></li>
                    <li><a href="http://debrid-link.fr/?page=debrideur">Debrid-Link</a></li>
                    <li><a href="http://www.only-mu.com/?page=debfree">Only-MU</a></li>
                    <li><a href="http://leechtube.com/">LeechTub</a></li>
                </ul>

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="http://freedebrid.911mb.com/">Freedebrid</a></li>
                    <li><a href="http://e-debrid.com/">E-debrid</a></li>
                    <li><a href="http://knight-debrid.co.cc/">Knight Debrid</a></li>
                    <li><a href="http://megastreaming.org/">MegaStreming</a></li>
                    <li><a href="http://www.fast-ddl.com/">Autres...</a></li>
                </ul>

            </div>

            <div class="col_3">
                <h2>Dernières astuces</h2>
            </div>

            <div class="col_3">
                <img src="http://ddata.over-blog.com/1/18/69/88/demo/img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Voici un tutoriel pour mettre votre PSP en 5.50 Gen-D2, très utile si vous voulez jouer à tout les nouveaux jeux sans avoir à patcher etc.... Il s'adresse seulement au PSP 1000 et 2000 déjà en custom firmware 4.01m33 minimum (si vous avez le 5.00 m33 c'est parfait).<a href="http://www.maxishare.fr/pages/Mettre_a_jour_sa_PSP--2119903.html">Lire la suite...</a></p>

                <img src="http://ddata.over-blog.com/1/18/69/88/demo/img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Admettons que vous ayez un fichier .rar protegé par un <em>x</em> mot de passe et que vous n'avez pas ce maudit mot de passe. Alors cette méthode marche à 75% disons pricipalement pour les musiques et films (pour les autres types de fichier c'est plus bas). Alors, prêt ?
<a href="http://www.maxishare.fr/pages/tuto_winrar_comment_contourner_les_fichiers_rar_protege_par_un_mot_de_passe_-2084676.html">Lire la suite...</a></p>
            </div>

        </div><!-- End 3 columns container -->

    </li><!-- End 3 columns Item -->


</ul>


P.S : Pour tester mon menu, veuillez vous diriger vers cette page de test.
Modifié par hopper (20 Feb 2011 - 12:48)
Ben oui c'est bizarre hein? Un weekend et un dimanche en plus. Smiley smile

Bon j'ai regardé rapidement, il y a tellement de script dans tous les sens que j'ai laissé tomber. Sûrement un problème de z-index, mais bon.

Perso j'utiliserais superfish, mais c'est du jquery.
Modifié par Patidou (20 Feb 2011 - 20:08)
Up !

P.S : Soyez sympathiques, les gens Smiley bawling !

EDIT : Je viens de comprendre le vrai sens de communauté et entraide Smiley murmure .
Patidou a écrit :
Bon j'ai regardé rapidement, il y a tellement de script dans tous les sens que j'ai laissé tomber. Sûrement un problème de z-index, mais bon.


En fait, non. Mais parce que j'y ai passé un peu de temps. il s'agit d'un overflow hidden sur un élément parent de ce menu.

hopper a écrit :
EDIT : Je viens de comprendre le vrai sens de communauté et entraide Smiley murmure .


Ce genre de remarques est déplacé. Aucune obligation de résultat. Pas une communauté de travail à ta place tout ça (cf. Règles de la communauté).
Je te remercie chaudement pour ton aide mais pourrais-tu me donner plus précisément la solution (le CSS modifiée ou autres) Smiley sweatdrop ? Car, même si je sais que le overflow est responsable du problème, je ne sais quoi faire.

a écrit :
Ce genre de remarques est déplacé. Aucune obligation de résultat. Pas une communauté de travail à ta place tout ça (cf. Règles de la communauté).


C'est vous qui le sous-entendez, pas moi. (Je n'ai jamais dit ça, relis bien mon post)

http://www.zeniouz.com/wp-content/uploads/2009/05/zemmour-burns.jpg

Cordialement,
hopper a écrit :
Je te remercie chaudement pour ton aide mais pourrais-tu me donner plus précisément la solution (le CSS modifiée ou autres) Smiley sweatdrop ? Car, même si je sais que le overflow est responsable du problème, je ne sais quoi faire.


Le menu n'est plus visible sur la page de test. Ce qu'il reste à faire c'est supprimer la propriété overflow valorisée à hidden (si je me rappelle bien elle est appliquée sur le sélecteur .cl). Par contre, je n'assure pas que ça ne pose pas d'autres problèmes (cf. post de Patidou niveau code).

hopper a écrit :
C'est vous qui le sous-entendez, pas moi. (Je n'ai jamais dit ça, relis bien mon post)


C'est très ambigu donc mea-culpa.
Modifié par yodaswii (22 Feb 2011 - 10:35)
La page de test est de nouveau dispo.

Pourrais-tu me donner directement le CSS modifié car je ne sais que faire.

Merci,
Salut,

Essaye peut être de rajouter un z-index:999; dans la déclaration de ta div menu !


#menu { 
    position: absolute; 
    top: 0; 
    right: 70px; 
    list-style: none; 
    z-index:999;
} 


Courage !
hopper a écrit :
La page de test est de nouveau dispo.

Pourrais-tu me donner directement le CSS modifié car je ne sais que faire.

Merci,


La page n'est pas la même que celle montrée précédemment.
Ton menu n'est plus dans la même configuration.