[RÉSOLU] Problème dif. nav. sur un bouton en float + relative

Bonjour,

Je suis toujours et encore sur le même site, un point que je pensais avoir réglé jusqu'au jour où j'ai fait le test de mon site sur Adobe BrowserLab, j'ai remarqué que sur chaque navigateur, tout le monde n'est pas d'accord, sur le placement du bouton "Menu", chacun le place différemment et des fois le bouton sort du bloc alors que clearfix de H5BP est utilisé.

Voilà le lien : http://sdcs.olympe.in/no-template/

Ce qui pose problème sont les class : .top & .btn-menu

Voilà le code ajouté dernièrement sur ces 2 class :

.top{
    padding: 7px;
    margin-top: 0.1458333333333%;
    background-color: #a45;
}


.btn-menu{
    position: relative;
    float: right;
    margin-top: -25px;
}

Merci beaucoup.
Modifié par Dr.Revolte (30 Sep 2012 - 18:41)

Bonjour.

Prend garde à BrowserLab, j'ai fait plusieurs tests qui ont montré des résultats peu convainquants par rapport à la réalité. Fais plutôt de vrais tests sur différents navigateurs avec des outils qui te permettront de te rendre compte des problèmes sur chaque navigateur.

Sinon quelques pistes:

Styler un lien sans utiliser de "button", ce dernier étant un client à problème de compatibilité, et n'apporte rien dans ce cas.

Utiliser un positionnement absolu sera sûrement plus clean dans cett situation que la bricole à marge négative.
=>

.top{
    …bla bla…
    position: relative;
}
.btn-menu {
    position: absolute;
    right: 5px;
    top: 7px;
}

Modifié par kustolovic (26 Sep 2012 - 00:42)

Bonjour,

Merci beaucoup des 2 conseils, j'enlève le bouton et j’arrête d'utiliser BrowersLab. Quel outil me conseils tu pour avoir la possibilité d'installer tout les navigateurs sur mon PC ?

Par contre pour la version absolute, j'avais fait ça mais le problème est : que j'utilise un site web responsive, donc le bouton se retrouver tout à gauche. alors que javais mis un max-width.

Bonsoir,

perso , je serais rester dans le flux et styler le lien (FF like) .

.top form {float:left;}
.btn-menu {
float:right;
border:solid 1px white;
padding:0 5px;
border-radius:3px;
background-color:lightgray;
background-image:linear-gradient(90deg, #ddd 45%, #eee 55%);
box-shadow:0 0 1px black;
}
.btn-menu:hover {
background-image:linear-gradient(90deg, #ACDCF7 45%, #E4F4FC 55%);
}

Dr.Revolte a écrit :
Quel outil me conseils tu pour avoir la possibilité d'installer tout les navigateurs sur mon PC ?

Dr.Revolte a écrit :
Par contre pour la version absolute, j'avais fait ça mais le problème est : que j'utilise un site web responsive, donc le bouton se retrouver tout à gauche. alors que javais mis un max-width.

Je vois pas trop le problème, je fais souvent du absolute sur du responsive?

p.s: pour un site responsive, il paraît un peu étroit sur mon écran^^

Sinon on peut bien entendu utiliser du float, même si je n’appelle pas ça "rester dans le flux"

kustolovic a écrit :

Sinon on peut bien entendu utiliser du float, même si je n’appelle pas ça "rester dans le flux"

enfin si quand même un peu quand un clearfix est impliqué

Float n'est jamais totalement extrait du flux, il s'y glisse et en adaptant le contexte de formatage ç'est trés proche d'un comportement inlin-block ou inline-table .

Enfin bon , ce n'est qu'une appréciation perso.

Cdt

Merci beaucoup pour votre aide, j'ai résolu mon second gros problème du moment.

Le site est étroit car pour le moment je ne développe que la version mobile, j'utilise la philosophie "Mobile First".

Vous vous utiliser les position absolute sur des sites responsive avec des images fluides ?