Problème centrage nav

Par iTACHi, il y a 14 ans

Les bases HTML/CSS

Bonjour , je vous explique , j'ai crée une barre de navigation en css , elle marche tres bien , et est tres bien positionné et centré sur mon ecran , mais sur le mac de ma copine , par exemple , ce n'est pas centré , c'est un peu décallé sur la droite , donc je voudrais faire en sorte que le nav soit centré sur tout les ecrans :)

Je vous passe le code css :

#bloc_page {
    width: 100%;
    height: 100%;
    margin: auto;
}
nav {
    display: inline-block;
    z-index: 5;
    width: 740px;
    position: absolute;
    top: 0%;
    margin: 0% 25% 0% 25%;
}
nav ul {
    liste-style-type: none;
}
nav li {
    display: inline-block;
}
nav a {
    padding: 7px;
    0px 7px;
     0px;
     display: block;
    margin: ;
    width: 70px;
    height: 22px;
    background: url('banniere.png') no-repeat;
    text-align: center;
    color: dodgerblue;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    border-color: black;
}
nav a:hover {
    padding: 7px;
    0px 7px;
     0px;
     display: block;
    margin: ;
    width: 70px;
    height: 22px;
    background: url('banniere2.png') no-repeat;
    text-align: center;
    color: dodgerblue;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    border-color: black;
}

Le bloc page est callé dans une page include sur tt mes pages ^^

J'ai bien sûr essayer de caller des margin:auto; sur plusieurs blocs mais rien n'y fait ...

Voilà , merci à ceux qui pourront m'aider :)

8 réponses

extrarox, il y a 14 ans

Salut,

Beaucoup d'erreur^^
Dans #bloc_page, change et ajoute :

margin: 0;
    padding: 0;

Dans nav :
Tu as ce code qui n'a aucun intérêt : 

position: absolute;

De plus tout le long tu utilises des pourcentages, donc si tu mets : 

width: 740px;

ça ne marchera pas car si ton écran fait 1024, tu retranches les 740, ça donne 464 que tu divises par 2 = 232, or 25% de 1024 = 256, donc tu auras un décalage.
Donc en restant logique il faut le mettre à 50%.

Pour finir tu passes dans le nav ul : 

padding: 0;
text-align: center;

Ps:
Ces trucs sont bizarre dans nav a et nav a:hover : 

padding: 7px;
    0px 7px;
     0px;

C'est ça plutôt? : 

padding : 7px 0;

Et tout ce qui est redondant dans a:hover n'a pas besoin d'être écrit.

Et le tour est joué.

A+

iTACHi, il y a 14 ans

Merci extrarox :D Comme tjs , tu m'es d'une grande aide , je vais regarder tout ça , des que j'ai regardé , j'te tiens au courant :)

iTACHi, il y a 14 ans

J'ai un petit soucis , quand je rétrécis mon navigateur , les blocs passent les uns en dessous des autres maintenant :( Je pense que ça vient du

nav {
    display: inline-block;
    z-index: 5;
    width:50%;
    top: 0%;
    margin: 0% 25% 0% 25%;
}

width:50% , sur mes anciens reglages , la barre restait intact au rétrécissement du navigateur , là sur le mac de ma copine , vu qu'elle a un ecran moins grand que le mien , les blocs descendent les uns en dessous des autres :(

extrarox, il y a 14 ans

En fait c'est dans la continuité, les nav a, ont une taille fixe, donc forcement a un moment ça rentre plus.
Le mieux dans ce cas, si tu veux gagner le plus possible en taille :

nav {
    display: block;
    z-index: 5;
    top: 0%;
    margin: 0 auto;
}

Tu mets juste ça.

iTACHi, il y a 14 ans

:D Oui c nikel , j'te tiens au courant si j'ai un soucis avec les autres ecrans , je verrais sur le mac de ma copine ce soir , mais c vraiment nikel là j'ai l'impression :D Merci extrarox ^^

iTACHi, il y a 14 ans

Ah la police deborde des blocks sur linux d'un pote , je sais pas de où ça vient , car moi c nikel

extrarox, il y a 14 ans

Sous linux, les fonts sont pas forcement les mêmes.

Mais tu n'as pas mis de font-family, essaye dans mettre une.

A+

iTACHi, il y a 14 ans

ouep c bon , j'ai juste adapté le width pour lui , j'ai aggrandit un tt petit peu les blocks , là c bon :) sinon niveau police , je sais pas trop quoi mettre comme police standart , si tu en aurais à me conseiller , elles sont les bienvenus , car je n'ai que des farfelus attrapé sur dafont , et pour la conception d'un site web , c pas top quoi :lol: