brandown39 | Bonsoir ou Bonjour , je post ici car je suis entrain de m’initier à la création de site web en Html et css , est mon problème est que j'ai crée un menu avec : Accueil , Forum ..... mais lorsque que j'ouvre ma page sur un écran plus grand ce menu reste à la même taille et surtout il rester aligner sur la droit mais j'aimerais qu'il soit centrer et si possible pourquoi pas que sa taille change proportionnellement.
voici l'image sur un écran plus grand (je ne connais pas la dimension), j'aimerais que le menu soit centrer que entre les 2 cotés ils y et la même distance et que la taille reste la même pour tout type d'écrans.
Si quelqu'un pouvait m'aider je lui en serai très reconnaissant ;D
voici le code html assez simple mais le code css et quand à lui plus compliquer.
Le Code HTML :
-----------------------------------------
Spoiler :
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="menu.js"></script>
<title>T-F ®</title>
</head>
<body>
<header>
<h1>Team - Finders</h1>
<ul id="menu">
<li>
<a href="#">ACCUEIL</a>
</li>
<li>
<a href="#">MEMBRES</a>
<ul>
<li><a href="#">CONNEXION</a></li>
<li><a href="#">INSCRIPTION</a></li>
</ul>
</li>
<li>
<a href="#">PROJETS</a>
<ul>
<li>
<a href="#">LISTES</a>
<a href="#">PHOTO</a>
<a href="#">VIDEOS</a>
</li>
</ul>
</li>
<li>
<a href="#">DEPOT</a>
<ul>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">MUSIQUES</a></li>
</ul>
</li>
<li>
<a href="#">TEAM</a>
</li>
<li>
<a href="#">FORUM</a>
</li>
<li>
<a href="#">TCHAT</a>
</li>
</ul>
</header>
</body>
</html>
|
----------------------------------------------------------
j'aimerais savoir ci quelqu'un pouvait essayer de m'aider à trouver comment faire pour résoudre mon problème car j'ai déjà essayer beaucoup de chose mais rien y fait je n'y arrive pas si quelqu'un pouvait m'aider pour cela , En résumé j'aimerais que le site s'adapte à tout les format d'écran d'ordinateur , si c'est trop compliquer j'aimerais au moins que le menu soit centrer tout le temps  Merci d'avance pour votre aide.
VOICI LE CODE CSS :
-----------------------------------------
Spoiler :
@font-face {
font-family: 'ma';
src: url('Polices/ma_police2.ttf');
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
color:rgb(); /* Appliquer une couleur grise */
}
a:hover /* Apparence au survol des liens*/
{
color:rgb(150,150,150)
}
body
{
background-image: url("image/wood.jpg" );
/* background-position: top right; */
background-repeat: repeat;
/*background-position: 1150px 30px;*/
}
p
{
/* background-color: rgba(200, 0, 0, 0.5); Fond rouge à moitié transparent */
font-size:15px;
width: 50%;
text-align: justify;
/* border: 1px solid black; /* contour */
/* padding: 6px; /*marge intérieur*/
/* margin: 10px; /* marge extérieur */
}
h2
{
font-family:ma,Impact,Verdana;
color:rgb(20,100,200); //commentaire
font-weight: bold;
text-align: center;
}
.barrer
{
text-decoration:line-through;
}
h1
{
font-size:40px;
color:rgb(253,60,60);
font-family:ma,Impact,Verdana;
margin: 50px;
text-align: center;
}
.intro
{
color:red;
}
.test
{
color:green;
}
.Bintro
{
color:blue;
font-style:bold;
font-family:Impact,Verdana;
}
.imageflotte
{
float:left;
}
/* Menu déroulant du site */
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, #menu a:hover {
background: linear-gradient(top, #4e95dc 0%, #347BC2 100%);
background: -moz-linear-gradient(top, #4e95dc 0%, #347BC2 100%);
background: -webkit-linear-gradient(top, #4e95dc 0%, #347BC2 100%);
background: -o-linear-gradient(top, #4e95dc 0%, #347BC2 100%);
color:rgb(150,150,150)
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active, #menu a:active{
opacity:0.8;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .#menu a:hover {
background: linear-gradient(top, #5aafff 0%, #4095ff 100%);
background: -moz-linear-gradient(top, #5aafff 0%, #4095ff 100%);
background: -webkit-linear-gradient(top, #5aafff 0%, #4095ff 100%);
background: -o-linear-gradient(top, #5aafff 0%, #4095ff 100%);
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active, #menu a:active{
opacity:0.8;
}
#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 : 120%; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu a /* Contenu des listes */
{
font-family: ma,Impact;
padding: 10px 40px;
margin: 2px 8px;
display: inline-block;
color:rgb(220,220,220);
font-size: 26px;
cursor: pointer;
background: #347BC2;
background: linear-gradient(top, #347BC2 0%, #1b62a9 100%);
background: -moz-linear-gradient(top, #347BC2 0%, #1b62a9 100%);
background: -webkit-linear-gradient(top, #347BC2 0%, #1b62a9 100%);
background: -o-linear-gradient(top, #347BC2 0%, #1b62a9 100%);
border: 3px solid #FBFAFA;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
-webkit-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
-o-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
text-decoration: none;
}
#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: 50px; /* Largeur des sous-listes */
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 ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#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 */
}
|
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Le code du java script :
----------------------------------------------------------
Spoiler :
sfHover = function() {
var sfEls = document.getElementById("menu" ).getElementsByTagName("LI" );
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
|
-------------------------------------------------------
Je précise que le code css est composé de plusieurs ligne de code repris parci par la ^^.
-
Edité par brandown39 il y a environ 1 heure
Message édité par brandown39 le 01-02-2015 à 02:37:46
|
