Forum : Engrenage en dehors du cadre ?? [CSS]

Bonjour, 30 minutes je me bloque sur une chose, je développe actuellement un petit "site" design, et j'ai créé une nav-bar, et celle-ci contient 2 élèments pour le moment, et un élèment qui est dans un des deux élèments se pavane en dehors du champs définit (Width + height)

Voici le problème en screen:

(http://i.imgur.com/MDj14PA.png)
(Merci Grafikart.fr pour l'image de profil :D)

Bien, et voilà le problème en code:
HTML [:]

    <nav>
        <div class="logo">
            <img src="img/protocole.png">
        </div>
        <div class="profil">
            <div class="imgp"><img src="img/avatar.png"></div>
            <div class="compte"><i class="ion-gear-b"></i></div>
        </div>
    </nav>

CSS [:]

nav {
    width: 100%;
    height: 50px;
    background-color: #475558;
    box-shadow: 0px 1px 8px black;
}
nav .logo {
    float: right;
    background-color: #0093ff;
    height: 100%;
    width: 80px;
}
nav .logo img {
    height: 50px;
    width: 90%;
    padding-left: 10
}
nav .profil {
    padding-left: 5px;
    width: 15%;
    height: 50px;
}
nav .profil img {
    height: 40px;
    width: 40px;
    border: 2px solid rgba(0, 198, 53, 0.87);
}
nav .profil .imgp { padding-top: 3px; }

nav .profil .compte {  
}

Voilà, je ne comprends pas d'où vient le problème.
Merci aux personnes qui fourniront une aide à mon problème.
Cordialement,
Alex.

daemon24

Réponse acceptée

Si tu voudrait que tous les deux elements soit dans le navbar,donne une classe au navbar et met le en position relative et tout ces enfants en position absolute Et puis evite d'entourer les images avec des div,donne leur directement une classe
.Apres tu devrais donner plus d'explications sur ton sujet

StarTechs

Salut !

Essaie de rajouter ceci tout en haut de ta fiche CSS et dis moi si ça résoud ton problème :

*, *:before, *:after {
    box-sizing: border-box;
}

Je pense que cela vient des paddings. Si yu as une div qui fait 100 100 avec un padding de 10px partout, elle en fera en réalité 120 120

EDIT :

nav .logo img {
    height: 50px;
    width: 90%;
    padding-left: 10
}

Il y a un petit souci syntaxique au niveau de la ligne du padding non ?

Alex

Auteur

Personellement je n'en vois pas. Et quelque sois le code que tu m'as donné, cela ne change rien.

StarTechs

Il manque l'unité à ton padding-left ainsi que le point virgule (bon en vrai pas obligatoire vu que la dernière instruction du bloc mais j'imagine que ça risque de s'étoffer par la suite).

Alex

Auteur

Ce n'est que superficielle ça, le problème n'est pas là, mais merci quand même pour la remarque.

daemon24

Au fait tu voudrait obtenir quel resultat?Tu voudrais que ton element qui pavane ne pavanne plus ?Mais tu voudrais le placer ou?

Alex

Auteur

Merci de ta réponse deamon, j'ai mis tout ça en position absolute et problème réglé.

Engrenage en dehors du cadre ?? [CSS]

7 réponses