28172 sujets

CSS et mise en forme, CSS3

[Résolu] Décalage

Bonjour,

Quelque chose m'échappe !

Voici la page que je suis en train de créer (enfin ! la base...)
Mon site

Je pars sur une largeur de 960 px, mon menu qui sera situé sur la gauche fait 255px.
960 - 255 = 705px >> Il devrait me rester 705 px de dispo pour mon bandeau d'adresses.
J'ai placé mon "menu" et le "bloc_page" en display: inline block pour qu'ils soient côte a côte.

Dès que le width de mon bloc_page dépasse les 698 px, il passe sous le menu Smiley fache
Pourquoi ?
Du coup je me retrouve avec quelques pixels vide dans mon bandeau adresses

Merci de votre aide
Modifié par Freemuse (22 Jul 2015 - 19:43)
Smiley bawling Je pige rien !!!

Je viens de supprimer les "whitespace", et toujours le même problème !!!

Qu'est ce que j'ai loupé ?
Supprimer ? C'est à dire ? Que vous avez mis les balises bout à bout ? Ou que vous avez commenté les espaces entre balises ?

Si oui : vos blocks comportent-ils des bordures ? Dans ce dernier cas penchez-vous sur la règle box-sizing:border-box.
Modifié par Olivier C (23 Jul 2015 - 15:19)
Bonjour,

Malheureusement, toujours pas la solution !

Oui Olivier, j'ai supprimé les "whitespace" de mon CSS et de mon html pour être sur de mon coup !

J'ai ajouté :
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

dans mon css, et le bandeau adresse se positionne toujours en dessous au lieu de se positionner sur la droite de mon menu !!!
J'ai a peine commencer ma page que je suis déjà bloqué !!! Smiley bawling

Merci de votre aide
Bonjour,

Je me permets de faire un petit up car je ne trouve toujours pas pour quelle raison mon bandeau adresse passe sous mon futur menu situé sur la gauche !

Help me please !! Smiley bawling

Adresse

Merci d'avance
Modifié par Freemuse (25 Jul 2015 - 16:17)
Comme indiqué plus tôt, il s'agit bien d'un soucis de whitespace.

Le moyen le plus simple de le résoudre est de mettre côte à côte la fermeture de ta navigation et l'ouverture de ton div#bloc_page sans espace, tabulation ou retour à la ligne.
<body>
  <nav>
  </nav><div id="bloc_page">
    <header>...</header>
  </div>
</body>

ou :
<body>
    <nav>
    </nav><!--
--><div id="bloc_page">
        <header>...</header>
    </div>
</body>

Modifié par hiwelo (25 Jul 2015 - 18:26)
En effet, merci de votre aide, ça fonctionne ! Smiley ravi

Je ne savais pas que les espaces dans mon CSS avait un impact sur le rendu final.

Encore merci.
Freemuse a écrit :
EJe ne savais pas que les espaces dans mon CSS avait un impact sur le rendu final.

Plus exactement, ce sont les espaces, tabulations et les sauts de lignes entre les balises html, qui ont un impact sur le rendu css.
hiwelo a écrit :
Entre les balises html dans un contexte inline-block principalement Smiley cligne

ReCligne Smiley cligne

Mais au fait : qui est ce nouveau modérateur ? Tu remplaces Geoffrey ?
Sujet clos
Aller à