Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
414 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML/CSS Probleme de format Besoin d'aide !!!

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

HTML/CSS Probleme de format Besoin d'aide !!!

n°2249923
brandown39
Posté le 01-02-2015 à 02:32:21  profilanswer
 

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
mood
Publicité
Posté le 01-02-2015 à 02:32:21  profilanswer
 

n°2249932
brandown39
Posté le 01-02-2015 à 13:49:14  profilanswer
 

Je vien de trouver la solution à mon problème pour centrer le menu.
 
Maintenant j'aurai juste une petit question, pour que mon site s'adapte a différente résolution comme je peut faire ? , faut il reprendre tout le code css et le transformer je ne ces pas comment x) , ou existe t'il des balise ou du code spécial pour faire ceci ? :D

n°2250261
CooKKarach​A
Posté le 06-02-2015 à 14:50:40  profilanswer
 

Je ne suis pas un spécialiste mais je dirais que la longueur ou la largeur de ton body tu le mets en px et l autre en %

n°2252973
psychodark​squall
VégétAryen
Posté le 11-03-2015 à 16:41:41  profilanswer
 

Ce que tu cherches à faire porte un nom, c'est le "responsive design". Ça veut dire que la navigation sur un site sera adaptée au média utilisé. Je te conseille de te renseigner là-dessus. Pour info, ce sera un mélange entre du CSS en commun qui sera vrai quel que soit le média, et du CSS spécifique à chaque média qui sera utilisé si le média fait telle ou telle résolution.
 
Edit : très bon exemple, va sur ce site http://3200tigres.wwf.fr/ et essaie de changer la taille de ta fenêtre.


Message édité par psychodarksquall le 11-03-2015 à 16:45:24

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML/CSS Probleme de format Besoin d'aide !!!

 

Sujets relatifs
Css inline impossible a trouverAide avec cini.h
Aide VBA comparaison de deux fichiers Excel[Curl] problème d'interprétation des quotes
[Résolu] Problème Index.html quand hébergéProbleme connexion yahoo CSS
Récupérer dans des text/Combo Box le format du doc wordajout de plusieurs images en HTML/CSS
Plus de sujets relatifs à : HTML/CSS Probleme de format Besoin d'aide !!!


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR