Sujet Précédent Sujet Suivant

Contenue en dehors du body

Résolu/Fermé
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 - 16 oct. 2013 à 16:46
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 - 18 oct. 2013 à 13:11
Bonjour,

je suis débutant et entrain de faire quelque essaie mais j'ai un petit souci.
j'ai mis la page en ligne à cette adresse : http://mezzopiano.ch/test/
J'ai mis une bordure à body et des couleurs de fond sur mes autres partie du site pour mieux voir ou il sont positionner. Mais comme vous pouvez le constater nav, section et aside ce retrouve en dehors de body.
Comment faire pour que le body s'adapte au contenu de la page ?

Merci d'avance de votre aide

10 réponses

Réponse 1 / 10
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
16 oct. 2013 à 17:30
bonjour,

cela est normal puisque dans tes balises nav , section et aside , tu utilises top.

Tu demandes donc par top au navigateur chargé d'afficher ton site de placer ces éléments à tant de pixels par rapport au haut de la fenêtre du navigateur.

Si tu supprimes top, tes balises nav , section et aside se positionneront normalement dans ton body.

Cordialement,
0
Réponse 2 / 10
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
17 oct. 2013 à 08:51
Merci de votre aide :) cependant j'ai encore un autre problème. Je veux que aside ce trouve à droite de ma page j'ai donc utiliser la valeur relative pour le placer. Mais si je rétréci la page mon bloque sort à nouveau du body.
0
Réponse 3 / 10
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 oct. 2013 à 13:33
Salut

tu part sur de mauvaise bases !
voila un exemple de squelette possible (CSS a mettre en externe !)
pour ton site !

colonne central liquide et 2 colonnes droite et gauche avec width 150px , site min-width: 400px; ! 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <!-- pour html 5 sur IE inf a IE9 -->
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!-- pour html 5 sur IE inf a IE9 -->
    <style type="text/css">
<!--
    /**
    * Eric Meyer's Reset 
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    /**
    * Eric Meyer's Reset CSS 
    */

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
    }

    p,h1 {
    padding: 10px;
    }

    #site {
    width: 100%;
    min-width: 400px;
    max-width: 2000px;
    margin: 0 auto;
    }

    header {
    float: left;
    height: 290px;
    width: 100%;
    background: #FFC2AD;
    }

    #liquide {
    float: left;
    width: 100%;
    }

    #actu {
    background: #FFF1E6;
    margin-left: 150px;
    margin-right: 150px;
    }

    nav {
    background: #BDEEFF;
    width: 150px;
    float: left;
    margin-left:-100%;
    }

    aside {
    background: #F0C2FF;
    width: 150px;
    float: left;
    margin-left: -150px;
    }

    footer {
    width: 100%;
    background: #B2FFC6;
    clear: both;
    }


    -->
    </style>
  </head>
  <body>
    <div id="site">
      <header>
        <p>
          Header
        </p>
      </header>
      <div id="liquide">
        <section id="actu">
          <h1>
            Actu
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
            dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
            Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent
            taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in
            libero. Sed dignissim lacinia nunc.
          </p>
          <p>
            Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.
            Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum
            sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer
            euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum
            magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
          </p>
          <p>
            Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet.
            Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut
            ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla
            facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam.
          </p>
        </section>
      </div>
      <nav>
        <h1>
          Nav
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
          dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
          Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
        </p>
      </nav>
      <aside>
        <h1>
          Aside
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
          dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
          Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
        </p>
      </aside>
      <footer>
        <p>
          Footer
        </p>
      </footer>
    </div>
  </body>
</html>


a+
0
Réponse 4 / 10
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
17 oct. 2013 à 15:36
bonjour,

"tu part sur de mauvaise bases ! "
euh je ne vois pas où il est parti sur une mauvaise base tant la structure de sa page est sommaire !

En étant pointilleux on pourrait noter la mauvaise façon d'écrire le charset de sa page qui devrait être : "<meta charset="UTF-8">

pour le reste : la mise en page et les choix de présentations ne regardent que celui qui les crée

pour ce qui concerne le problème du aside qui sort si la page est redimensionnée, il faudrait déjà appliquer les réponses proposées pour régler au fur et à mesure les autres problèmes.

Cordialement,
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 oct. 2013 à 16:30 
"tu part sur de mauvaise bases ! "  euh je ne vois pas où il est parti sur une mauvaise base tant la structure de sa page est sommaire!
.
commencer html5 sans penser a IE8 est une hérésie, tout les xp sont sous IE8 !
donc html5shiv ou modernizer ! 
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

penser au reset (pas oblige le meyer mais y penser )! 

pour le reste : la mise en page et les choix de présentations ne regardent que celui qui les crée
.
voila un exemple de squelette possible !
moi je n ai fais que de lui donner un squelette de base , puisque comme tu le dis 
tant la structure de sa page est sommaire !
, a lui de voir si il veux l utiliser ou s en inspirer pour adapter le siens ou s en foutre , c est lui qui voit !

<meta charset="UTF-8"> c est vrais mais <meta charset="utf-8"> est interprete de la meme maniere !

et le seul fait d enlever les top ne regle pas son probleme de positionnement ! 
 position: relative;
    left: 900px;
pour le aside, c est pas mal partir ca !! ;-))

son plus gros probleme est la non connaissance des bases CSS !



a+
0
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
17 oct. 2013 à 17:01
Je sais bien qu'il faut qu'il sois compatible avec IE mais la n'est pas ma question pour l'instant j'essaie de faire de mon mieux pour que ça marche sur mon ordinateur et après seulement je vais régler les problèmes de compatibilité chez tout le monde. Mais je n'ai toujours pas eu d'aide à mon problème...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
17 oct. 2013 à 15:59
Bonjour,

Merci pour vos réponses mais c'est le premier site que je fais entièrement en html et css donc me donner un autres codes déjà tout fait ne va pas m'aider à apprendre. Et donc j'aimerais savoir précisément ce que je dois changer pour que ça ne dépasse plus.
J'ai fais déjà pas mal de modifications mais je suis encore loin d'avoir fini :)
je vous laisses le lien ici : www.mezzopiano.ch
0
Réponse 6 / 10
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
17 oct. 2013 à 16:25
En fait c'est pas le seul problème sous l'onglet vidéo, le petit carré rouge ou il y a des liens, je l'ai mis en fixe pour qu'il soit toujours présent dans la page même si on descend mais le problème c'est que si la page est trop petit le cadre reste toujours à la même place vu qu'il est fixé donc on ne le voit plus du tout.
0
Réponse 7 / 10
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
17 oct. 2013 à 17:51
RAD ZONE :

1 - 
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Cela est le bienvenu si tu souhaites le rendre compatible mais tu peux tout aussi bien t'en passer et afficher une sorte de notification si le navigateur n'est pas compatible avec le HTML5 pour indiquer au visiteur qu'une mise à jour du navigateur ou encore le choix d'un autre navigateur serait le bienvenu.

Les 2 approches se défendent.

2 - pour le charset : j'ai pointé cela du fait non pas des majuscules ou minuscules mais parce que sur sa page de test le charset était défini comme pour un page classique et non comme le demande la nouvelle nomenclature concernant le HTML5.

3 - pour le aside n'ayant pas répondu à sa demande pour l'heure pour les raisons indiquées ci-avant, je ne vois pas pourquoi c'est mal parti si sans le préciser il n'indique pas que cela ne correspond pas à ce qu'il veut.

Pour un premier site je trouve qu'il s'en sort mieux que moi à mes débuts car j'étais bien pire que cela...

j3-1996 : je ne vois pas ton carré rouge sous firefox... et apparemment le seul élément en position fixe c'est ton aside (commentaire).

Cordialement,
0
Réponse 8 / 10
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
17 oct. 2013 à 18:14
Est-ce que tu es bien allez sur la page vidéo ? Car moi j'ai également tester avec firefox et il s'affiche
0
Réponse 9 / 10
j3-1996 Messages postés 77 Date d'inscription jeudi 24 décembre 2009 Statut Membre Dernière intervention 18 août 2014 2
18 oct. 2013 à 08:10
C'est bon je me suis débrouiller tout seul ! j'ai mis une largeur minimum en pixel sur body et maintenant ça ne dépasse plus du cadre.
0
Réponse 10 / 10
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
18 oct. 2013 à 13:11
bonjour,

désolé pour le retour tardif, effectivement je n'étais pas sur la bonne page :)

bravo à toi pour avoir trouvé une solution ;)

cordialement,
0

Discussions similaires

Message recurent : Un site est en train de lire vos données
marcm_54 -
Gg -

7 réponses
Excel : colorer une cellule sous condition d'une autre ?
KAKEPATHEL -
Pascal -

15 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses
win improper quit body : help merci
alsan29 -
Michael -

14 réponses
Excel supprimer une mise en forme de tableau
pépé35530 -
allezlom -

24 réponses