Déplacé le menu horizental

freebox67 Messages postés 304 Statut Membre -  
freebox67 Messages postés 304 Statut Membre -
Bonjour,j'arrive pas a déplacé le menu horizontal voici mon code CSS:

body
{
width:760px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
background-image:url("001.jpg");
}

/* L'en-tête */

#en_tete
{
width:500px;
height:166px;
background-image:url("4567.bmp");
background-repeat:no-repeat;
margin-bottom:10px;
}

/* Le menu */

#menu
{
float:left;
width:120px;
}

.element_menu
{
background-color:#4569242;
background-image:url("ldskqjjjj.bmp");
background-repeat:repeat-x;

border:1px solid black;

margin-bottom:20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color:#B3B3B3;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
text-align:center;
}

.element_menu ul
{
list-style-image:url("puce.png");
padding:0px;
padding-left:20px;
margin:0px;
margin-bottom:5px;
}

.element_menu a
{
color:#B3B3B3;
}

.element_menu a:hover
{
background-color:#B3B3B3;
color:black;
}

/* Le corps de la page */

#corps
{
margin-left:140px;
margin-bottom:20px;
padding:5px;

color:#B3B3B3;
background-color:#626262;
background-image:url("ldskqjjjj.bmp");
background-repeat:repeat-x;

border:1px solid black;
}

#corps h1
{
color:#B3B3B3;
text-align:center;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height:30px;

background-image:url("Sanstitre1.png");
background-repeat:no-repeat;

padding-left:30px;
color:#B3B3B3;
text-align:left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding:5px;

text-align:center;

color:#B3B3B3;
background-color:#626262;
background-image:url("motif.bmp");
background-repeat:repeat-x;

border:1px solid black;
}

input, textarea
{
font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
}

input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
background-color: #FFFF99;
}

label
{
color: blue; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
}

legend /* On met un peu plus en valeur les titres des fieldset */
{
font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
color: #696969;
font-weight: bold;
}

fieldset
{
margin-bottom: 10px; /* Une marge pour séparer les fieldset */
background-color: #696969;
}

/* Je séléctionne mes <li> par les sélecteurs (<li> est contenu par le <ul>), inutile de lui rajouter une class */
ul#menu_horizontal li {
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul#menu_horizontal {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
ul#menu_horizontal { /*Ici , c'est ma configuration, à vous de la changer */
width : 600px;
height : 25px;
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
ul#menu_horizontal li {
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
li.bouton_gauche {
float : left;
}
li.bouton_droite {
float : right;
}
ul#menu_horizontal {
width : 600px;
height : 30px;
margin : 2em 0 0 0;
padding : 0;
background-color : #f4f9fd;
border : 1px dashed black;
list-style-type : none;
}

ul#menu_horizontal li {
padding : 0 1.0em;
line-height : 30px;
}

ul#menu_horizontal li.bouton_gauche {
float : left;
border-right : 1px dashed black;
}

ul#menu_horizontal li.bouton_droite {
float : right;
border-left : 1px dashed black;
}

ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 1.0em;
font : 0.8em "Trebuchet MS";
}

ul#menu_horizontal a:hover { text-decoration : underline; }

ul#menu_horizontal a img {
border : none;
padding : 0 0.8em;
}

2 réponses

  1.
    djflexlive Messages postés 577 Statut Membre 95
     
    A déplacer comment exactement ?

    Et ensuite fais voir le code html de la page, pour faire un essai soi meme ;)
    -1
  2. freebox67 Messages postés 304 Statut Membre 31
     
    enfaite j'ai envie de mettre le menu un peu plus vers la droite mon xhtml c :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Mon 1er Site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="CSS" href="CSS.css" />
    </head>

    <body>
    <script type="text/javascript">

    <!--
    function tester_age(age_entre)
    {
    var test;
    if(isNaN(age_entre)) /* Si age_entre n'est pas un nombre */
    {
    alert('Vous n\'avez pas entré un nombre !');
    test = false;
    }
    else
    {
    if(age_entre == null || age_entre == '') /* Si on a cliqué sur Annuler ou si on n'a rien entré */
    {
    alert('Vous n\'avez pas entré un nombre !');
    test = false;
    }
    else
    {
    test = true;
    }
    }

    if(!test) /* Et on fait le test final grâce à la variable test */
    {
    age = prompt('Quel est votre âge ?');
    tester_age(age);
    }
    else
    {
    alert('Ah, tu as donc '+age_entre+' ans !');
    }
    }

    var age = prompt('Quel est votre âge ?');
    tester_age(age);

    confirm('Voulez-vous que je vous repose cette question ?');

    alert('Salut tout le monde !');
    if(confirm('Je vais vous dire sur quel bouton vous allez appuyer')) /* si on clique sur ok */
    {
    alert('Vous avez cliqué sur ok !'); /* on affiche une alerte */
    }
    else
    {
    alert('Vous avez cliqué sur annuler !');/* sinon on en affiche une autre */
    }
    var saisie_du_visiteur = prompt('Quelle est la couleur du cheval blanc d\'Henri IV ?','Mais qu\'est-ce que j\'en ai à faire ?');

    <h1 onmouseover="javascript:document.getElementById('titre').style.color='red';" onmouseout="javascript:document.getElementById('titre').style.color='black';" id="titre">Et encore un autre titre</h1>
    var nom_visiteur = prompt('Quel est votre nom ?'); /* Pour le fun on demande le nom de la personne */
    var style_paragraphes = 'font-family:verdana,arial,courier;color:black;font-size:13px;'; /* Cette fois-ci, pour l'aspect esthétique, on applique un style aux paragraphes */

    function rafraichir()
    {
    var date = new Date(); /* On crée une date. C'est très important de la créer dans la fonction, comme ça, à chaque seconde, on recrée une date, et donc le temps est mis à jour. Si vous ne la créez pas dans la fonction, alors la date ne sera pas mise à jour. */
    var noms_jours = new Array('Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi');
    var noms_mois = new Array('Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre');
    var texte = ''; /* On crée le texte qui va être affiché */
    texte += 'Il est '+date.getHours()+'H'+date.getMinutes()+' et '+date.getSeconds()+' secondes.<br/>';
    texte += 'Nous sommes le '+date.getDate()+'/'+(date.getMonth()+1)+'/'+date.getFullYear()+'.<br/>';
    texte += 'Vous êtes donc le '+noms_jours[date.getDay()]+' '+date.getDate()+' '+noms_mois[date.getMonth()]+' '+date.getFullYear()+'.';

    document.getElementById('date').innerHTML = texte;
    }

    document.write('<p style="'+style_paragraphes+'">Bonjour <b>'+nom_visiteur+'</b>,</p>');
    document.write('<p id="date" style="'+style_paragraphes+'"></p>');

    setInterval('rafraichir()',1000); /* Toutes les 1 secondes, on réaffiche la date */
    function souris(event)
    {
    var x = event.clientX;
    var y = event.clientY;
    document.getElementById('coordonnes').value = x + ', ' + y;
    }

    </script>

    </head>
    <body onmousemove="souris(event);">
    <div id="info">
    Coordonnées de la souris : <input type="text" id="coordonnes" value="inconnues" readonly="readonly" />
    </div>

    //-->
    </script>
    </body>

    <body>
    <!-- le div va te servir a contenir toute ta page au centre, puis tu met le tout dans un tableau, et le tour est joué, comme sa ta page est centrée et c encore mieux qu'avec les larges marges droites_________Sa c'est un exemple de tableau que j'utilise pour mon site ;) -->

    <div align="center">
    <table border="0" cellpadding="0" cellspacing="0" width="900" height="575" >
    <body>
    <div id="en_tete">

    </div>
    <ul id="menu_horizontal">
    <li class="bouton_gauche"><a href="accueil.php">Accueil</a></li>
    <li class="bouton_gauche"><a href="news.php">News</a></li>
    <li class="bouton_gauche"><a href="livreor.php">Livre d'or</a></li>
    <li class="bouton_droite"><a href="admin.php">Admin</a></li>
    <li class="bouton_droite"><a href="contact.php">Contact</a></li>
    </ul>
    <div id="corps">

    <html>
    <head>
    </head>
    <body>e
    <h1 onmouseover="javascript:this.style.color='red';" onmouseout="javascript:this.style.color='black';">Bienvenue Sur mon site</h1>
    </body>

    </html>

    <h2>inscription</h2>
    <p>
    Ne cliqué pas sur le sur (cliquez ici)<div id="fenetre">
    <div class="barre" onmousedown="start_drag(document.getElementById('fenetre'), event);">
    <button class="close" onclick="document.getElementById('fenetre').parentNode.removeChild(document.getElementById('fenetre'));"></button>
    Titre
    </div>uste un esser de site je sais pas encore tous sur css et xhtml mais bon <br />

    </p>

    <p>
    L'image est plutot pas mal non? :<br />
    <img src="conan_&_kaito_kid.jpg" alt="Image détéctive Conan" title="Ca fait envie hein ?" />
    </p>

    </div>

    </body>
    </table>
    </div>
    </body>

    </html>

    </table>
    </div>
    -1

Discussions similaires

Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses