Css problème avec le %

killianballuais Messages postés 39 Statut Membre -  
ElementW Messages postés 5690 Statut Contributeur -
Bonjour,

Je viens vers vous car j'ai problème de positionnement avec le css. J'ai donc crée 3 grandes partit dur la page, le Header (100%, fixed), le side bar (16%, fixed) et le main content (84%). Sauf que le main content est plus grand que 84%, car je veux le déplacer verticalement, pourquoi ? Car 16%+84%=100% !
Comment je dois faire ?

lien du site en question : http://networksfans.com/teste/

Merci à tout ceux qui vont m'aider ! :)

7 réponses

  1. Nxl Messages postés 1257 Statut Membre 133
     
    Salut,
    On voit pas ce que tu veux faire...
    0
  2. killianballuais Messages postés 39 Statut Membre 1
     
    En gros mon site je veux faire en sorte que mon site de puisse plus ce déplacer verticalement
    0
  3. Pitet Messages postés 2845 Statut Membre 530
     
    Salut,

    Le problème vient du contenu de la balise <section id="main">. Le contenu de tes articles sont plus larges que la largeur allouée à ta section, donc cette dernière est élargie.

    Bonne journée
    0
  4. killianballuais Messages postés 39 Statut Membre 1
     
    Je ne comprend pas très bien ta réponce, que dois-je modifier ?
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. planete66
     
    En fait tu veux enlever le scroll vertical.

    Tu n'as qu'a ajouté ceci dans le head de ta page:

    <style>
    body{
    overflow-x:hidden;
    }
    </style>


    Cela permet d'enlever le scroll vertical (le scroll x ), c'est pour le mettre en hidden.
    Par contre cela ne regle pas le problème des tailles de tes éléments, ça le masque.

    J'espère t'avoir aidé :)
    0
  7. planete66 Messages postés 21 Statut Membre 35
     
    Ton problème est sans doute lié au border.
    0
    1. ElementW Messages postés 5690 Statut Contributeur 1 293
       
      Affirmatif, si on retire les border de
      .module
      , ainsi que le
      width: 100%
      des
      #main .module header h3
      , ça passe sans problème. Sur Firefox en tout cas.
      0
  8. ElementW Messages postés 5690 Statut Contributeur 1 293
     
    Solution miracle:
    - enlèves le
    width: 100%
    des
    #main .module header h3
    - sur le
    .width_full
    , remplace le
    width
    par
    width: calc(100% - 2px);
    et ajoute-en un autre avant, disons
    width: 95%;
    (oui, 2 définitions, mais c'est pour la compatibilité; l'odre de déclaration compte: mets le calc après le 95%)
    La magie du CSS3.
    from human import idiocy
    del idiocy
    0