par
arthur77 » 08 janv. 2012, 20:26
(J'ai modifié le padding-bottom de .fullheader (alias "bienvenue") pour qu'il descend jusqu'en bas du who is online)
Bon alors changement de plan, est-ce qu'on peut coller le who is online et les boutons tout à droite, comme ça il faudrai un pseudo super long pour que ça se superpose ? Et aussi, comme on le voit sur l'image, les boutons et le WhoIsOnline ne sont pas colé en haut, alors que j'ai des "margin-top" et "padding-top" à 0, on peut pas les coller ?
Je remet le CSS :
Code : Tout sélectionner
/* TOUTE cette première partie concerne l'affichage déroulant des notifications */
#nav
{
position: fixed;
margin-top: 0px;
margin-left:116px;
background-color: #9C9F9E;
}
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément. ancien : 21px */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
padding : 0; /* aucune marge intérieure */
background : #fff; /* couleur de fond */
color : #000; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes. ancien : 144px */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #194898;
background: #fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
/* FIN DE CETTE PREMIERE PARTIE pour l'affichage déroulant des notifs */
a
{
text-decoration: none;
color: #194898;
}
a:hover
{
text-decoration: none;
text-decoration: underline;
color: #5368D2;
}
a:active
{
text-decoration: none;
text-decoration: underline;
color: #5368D2;
}
a:visited
{
text-decoration: none;
color: #194898;
}
body
{
text-align: center;
font-family: "Trebuchet MS", Arial;
}
.wio
{
font-style: italic;
font-size: 0.7em;
}
p
{
background-color: #9C9F9E;
margin-left: 100px;
margin-right: 100px;
}
.footer
{
margin-bottom: 100px;
border: 2px #194898 dashed;
}
.header .logo
{
position : absolute;
left: 9%;
}
.header
{
text-align: left;
}
.fullheader
{
position : fixed;
top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
text-align: center;
padding-bottom: 9px;
}
[img]http://www.heberg-pics.com/images/NrLot.jpg[/img]
(J'ai modifié le padding-bottom de .fullheader (alias "bienvenue") pour qu'il descend jusqu'en bas du who is online)
Bon alors changement de plan, est-ce qu'on peut coller le who is online et les boutons tout à droite, comme ça il faudrai un pseudo super long pour que ça se superpose ? Et aussi, comme on le voit sur l'image, les boutons et le WhoIsOnline ne sont pas colé en haut, alors que j'ai des "margin-top" et "padding-top" à 0, on peut pas les coller ?
Je remet le CSS :
[code] /* TOUTE cette première partie concerne l'affichage déroulant des notifications */
#nav
{
position: fixed;
margin-top: 0px;
margin-left:116px;
background-color: #9C9F9E;
}
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément. ancien : 21px */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
padding : 0; /* aucune marge intérieure */
background : #fff; /* couleur de fond */
color : #000; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes. ancien : 144px */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #194898;
background: #fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
/* FIN DE CETTE PREMIERE PARTIE pour l'affichage déroulant des notifs */
a
{
text-decoration: none;
color: #194898;
}
a:hover
{
text-decoration: none;
text-decoration: underline;
color: #5368D2;
}
a:active
{
text-decoration: none;
text-decoration: underline;
color: #5368D2;
}
a:visited
{
text-decoration: none;
color: #194898;
}
body
{
text-align: center;
font-family: "Trebuchet MS", Arial;
}
.wio
{
font-style: italic;
font-size: 0.7em;
}
p
{
background-color: #9C9F9E;
margin-left: 100px;
margin-right: 100px;
}
.footer
{
margin-bottom: 100px;
border: 2px #194898 dashed;
}
.header .logo
{
position : absolute;
left: 9%;
}
.header
{
text-align: left;
}
.fullheader
{
position : fixed;
top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
text-align: center;
padding-bottom: 9px;
}[/code]