Darkevil Messages : 221
|
Bonsoir, Oui, encore moi  . J'ai quelque soucis au niveau html, je m'explique. (je vous conseille d'abord de voir ceci) Voila, j'ai mon menu, sur la gauche. Comment faire pour placer le contenu ("accueil projet" + le début d'une fenêtre) au même niveau que le menu. Sachant qu'en utilisant float + z-index, le texte du contenu est poussé par le menu, quand il bouge. Là, je sèche (je pense que JS va être indispensable non?) Bonne soirée et merci Cordialement, Darkevil PS: voici les docs index.html Fermer ce cadre
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type"text/css" href="css/essential.css">
<link rel="stylesheet" type"text/css" href="css/head.css">
<link rel="stylesheet" type"text/css" href="css/content.css">
<title>DASHBOARD :: FrappEdit</title>
</head>
<body>
<div id="head">
<div class="nav">
<a href="#"><li >Dashboard</li></a>
<a href="#"><li class="activated">Projets</li></a>
<a href="#"><li >Membres</li></a>
<a href="#"><li >Taches</li></a>
</div>
<div class="profile">
<a href="#"><img src="img/no-avatar.png" alt="" class="proAvatar"/></a>
<div class="proSetting"><a href="#" class="msg"><img src="img/msg.png" alt=""/></a><a href="#" class="stng"><img src="img/stng.png" alt=""/></a></div>
<a href="" class="proName">OnnxHD</a>
</div>
</div>
<div id="content">
<div class="menu">
<div class="deb_menu"></div>
<div class="title">Projets<img src="img/project_ico/project.png" alt=""/></div>
<ul>
<li class="activated"><a href="">Accueil Projet <img src="img/project_ico/project_hom_act..png" alt=""/></a></li>
<li><a href="">Nouveau projets<img src="img/project_ico/project_add.png" alt=""/></a></li>
<li><a href="">Administration projet<img src="img/project_ico/project_adm.png" alt=""/></a></li>
</ul>
<div class="pName">KooP-Edit<img src="img/project_ico/project_file.png" alt=""/></div>
<ul>
<li><a href="">Gerer projet<img src="img/project_ico/project_gst_file.png" alt=""/></a></li>
<li><a href="">Nouveau fichier<img src="img/project_ico/project_add_file.png" alt=""/></a></li>
<li><a href="">Nouvelle Kooperation<img src="img/project_ico/project_koop_file.png" alt=""/></a></li>
<li><a href="">Supprimer projet<img src="img/project_ico/project_file_del.png" alt=""/></a></li>
</ul>
</div>
<div class="content">
<div class="title">Accueil Projet</div>
<div id="fenetre">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
content.css Fermer ce cadre
#content {
}
/* CONTENT :: MENU */
#content .menu {
width: 275px;
margin-left:-225px;
padding-left:10px;
background:#3e3e3e;
height:100%;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: ;
}
#content .menu:hover {
margin-left:-10px;
}
#content .menu ul {
list-style-type:none;
}
/* CONTENT :: MENU :: LI */
#content .menu li a {
color:#ebebeb;
text-decoration:none;
display:block;
text-transform:uppercase;
font-family:Arial;
margin-left: -40px;
text-align:left;
background:#3e3e3e;
height: 40px;
border-bottom:1px solid #2e2e2e;
border-top:1px solid #4e4e4e;
padding-top: 20px;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8);
padding-left:10px
}
/* CONTENT :: MENU :: LI HOVER */
#content .menu li a:hover {
border-bottom:1px solid #2e2e2e;
border-top:1px solid #afe4ff;
background:#60caff;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
/* CONTENT :: MENU :: ICONES */
#content .menu li img {
float:right;
width:32px;
height:32px;
margin-top:-6px;
margin-right:15px;
}
/* CONTENT :: MENU :: LI SPECIAUX */
#content .menu .pName, #content .menu .title {
border-bottom:1px solid #2e2e2e;
border-top:1px solid #4e4e4e;
height: 40px;
padding-top: 20px;
margin-bottom:-16px;
margin-top:-16px;
color:#fff;
text-align:left;
font-size:1.2em;
font-family:Arial;
background:#636363;
padding-left: 10px;
}
#content .menu .pName img, #content .menu .title img{
float:right;
width:32px;
height:32px;
margin-top:-3px;
margin-right:15px;
}
#content .menu .title {
text-transform:uppercase;
}
#content .menu .deb_menu {
margin-top:15px;
}
#content .menu li.activated a{
border-bottom:1px solid #2e2e2e;
border-top:1px solid #cdf2c1;
background:#9fe689;
color:#808080;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}
/* CONTENT :: MENU :: ANIMATION */
#content .menu {
-webkit-transition:all 250ms ease-in-out;
-moz-transition:all 250ms ease-in-out;
-o-transition:all 250ms ease-in-out;
transition:all 250ms ease-in-out;
}
#content .menu li a {
-webkit-transition:all 250ms ease-in;
-moz-transition:all 250ms ease-in;
-o-transition:all 250ms ease-in;
transition:all 250ms ease-in;
}
/* CONTENT :: CONTENT */
#content .content {
}
#content .content .title {
color:#0099cb;
font-size:30px;
text-transform:uppercase;
font-family:Arial;
margin-left:100px;
width: 50%;
padding-left: 10px;
border-bottom: 2px solid #666666;
margin-bottom:10px;
}
/* CONTENT :: FENETRE */
#fenetre .header{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(10%,rgba(244,244,244,1)), color-stop(100%,rgba(231,231,231,1)));
background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(244,244,244,1),0),color-stop(rgba(244,244,244,1),0.1),color-stop(rgba(231,231,231,1),1));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 10%,rgba(231,231,231,1) 100%);
background:-moz-linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 10%,rgba(231,231,231,1) 100%);
background:-o-linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 10%,rgba(231,231,231,1) 100%);
background:linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 10%,rgba(231,231,231,1) 100%);
filter rogidXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e7e7e7',GradientType=0 );
width:90%;
height:30px;
margin:5px auto 0 auto;
-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
border:1px solid #cacaca;
padding:7px 10px 0 10px;
font-size:17px;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
}
#fentre .content{
background:#FFFFFF;
width:90%;
margin:-1px auto 0 auto;
padding:5px 10px 10px 10px;
border:1px solid #cacaca;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
line-height:200%;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
}
EDIT: Je vais jouer la carte de la facilité : Supprimer le lien en texte (et les faire apparaître en tooltip ) |
