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
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+
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.
Sous linux, les fonts sont pas forcement les mêmes.
Mais tu n'as pas mis de font-family, essaye dans mettre une.
A+
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 :)
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 :(
: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 ^^
Ah la police deborde des blocks sur linux d'un pote , je sais pas de où ça vient , car moi c nikel
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: