Mise en forme : tableaux et blocs CSS

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par loufpad, 10 Janvier 2006.

  1. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Hello la troupe :p
    Je vais refondre mon site pour qu'il soit "propre" et surtout compatible avec FF :wink:
    Je me pose une question : le mieux est-il de concevoir la mise en page
    1) en utilisant des tableaux imbriqués (pas top à ce que j'ai lu)
    2) en utilisant 1 tableau principal pour structurer la page et y insérer des blocs CSS pour la finition
    3) en n'utilisant que des blocs CSS ?

    Mon objectif le plus important : la compatibilité avec les autres navigateurs :wink:

    Thanks :D

    Ah oui, autre petite question : si je spécifie une valeur en pixels pour margin-left par exemple, celle-ci créera-telle un décalage avec FF par rapport à IE ? Mieux vaut utiliser une valeur en pourcentage ? (je pense que oui, mais bon :wink: )
     
  2. juliofromlille
    juliofromlille WRInaute occasionnel
    Inscrit:
    15 Février 2004
    Messages:
    339
    J'aime reçus:
    0
    Choix Numéro 3 : un site agencé avec les DIV du XHTML et positionné grace aux CSS.

    Travaille en PX et non en % sauf si ton site est dit "Elastique".
     
  3. biddybulle
    biddybulle WRInaute passionné
    Inscrit:
    30 Mai 2005
    Messages:
    1 428
    J'aime reçus:
    0
    oui evite les tableaux c est un cauchemar et c est trop vieux maintenant
    Div + CSS
     
  4. xenoox
    xenoox WRInaute discret
    Inscrit:
    1 Janvier 2006
    Messages:
    69
    J'aime reçus:
    0
    Le mieux reste les "em".

    Il permet de mieux s'adapter aux personnes malvoyantes (zoom du navigateur).

    "les tailles en em sont préférables aux tailles en pixels car elles s'adaptent aux réglages personnels des utilisateurs et sont ainsi plus accessibles… "
     
  5. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Bonne idée :wink:

    Donc, si je procède avec des divs et des css, mon site sera-t-il compatible pour tous les navigateurs ?
     
  6. xenoox
    xenoox WRInaute discret
    Inscrit:
    1 Janvier 2006
    Messages:
    69
    J'aime reçus:
    0
    Oui si tu n'utilise pas des fonctions avancées de css (par là j entend compatible par tous les navigateurs.)

    Mais il faut toujours vérifier que son site est compatible avec IE et FireFox (au minimum) car ils ne gèrent pas tous les objets de la même façon ! On a souvent des surprises.

    Sinon il existe des techniques (hack) pour palier aux différences de navigateurs (pour le moment j'en ai pas eu l'utilité)

    Tu as plein de docs sur le css en ligne de toute façons.
     
  7. jOoL
    jOoL WRInaute occasionnel
    Inscrit:
    5 Mai 2005
    Messages:
    388
    J'aime reçus:
    0
    div + css + font em
     
  8. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 857
    J'aime reçus:
    5
  9. jOoL
    jOoL WRInaute occasionnel
    Inscrit:
    5 Mai 2005
    Messages:
    388
    J'aime reçus:
    0
    D'ailleurs, en parlant d'Alsacréations, ils ouvrent une agence web spécialisée dans les standards. (Plus d'infos sur leur blog)

    Belle initiative, joli site, clean, efficace.

    Je leur souhaite bon succès.
     
  10. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Merci pour les infos
    J'ai fait des tests
    Composition de ma page :
    header.php
    corps.htm
    footer.php
    + un style.css

    Dans mon header, je mets une bannière dans un tableau. Ca passe sans souci, mon corps.htm s'affichant juste en dessous.
    puis je rajoute la même bannière dans mon header juste en dessous la 1è (dans le tableau) avec une DIV :
    <DIV class="boite1" style="position:absolute; left:100px; top:100px; width:491px; height:80px; z-index:1;"></DIV> (boite1 fait référence à mon style.css)
    Et là, cette DIV s'affiche au dessus de mon corps.htm
    :? et cache sa partie haute.
    Comme si elle était considérée comme un élément flottant de mon header qui pourrait se permettre de venir déborder sur mon corps.htm.
    Malpolie !!!
    :lol:

    J'ai essayé plein de bidouilles, sans résultats... :oops:
     
  11. jOoL
    jOoL WRInaute occasionnel
    Inscrit:
    5 Mai 2005
    Messages:
    388
    J'aime reçus:
    0
    met style="postion:relative"
     
  12. illicotravel
    illicotravel Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    15
    J'aime reçus:
    0
    mets surtout la définition de tes styles dans un fichier CSS à part. Au lieu d'avoir:

    il vaut mieux:

    C'est plus propre et plus maintenable.

    En gros, ta page ne doit jamais contenir une seule définition de style, uniquement des id et des class. Pour avoir un exemple, tu peux regarder mon site. Ca te donnera une idée. (il est compatible IE, FF et Opera)
     
  13. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Merci pour ces conseils. Je n'ai pas eu le temps de m'y remettre depuis mais dès que je peux, je teste tout ça :wink:

    Thanks :wink:
     
  14. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Merdouille ! Malgré vos conseils, mon header est toujours affiché PAR DESSUS (et pas au dessus :lol: ) ma page...

    Voilà mon header :
    <html>
    <head>
    <title>Document sans titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">@import "test.css";</style>
    </head>
    <body>
    <DIV class="boite1"></DIV>
    </body>
    </html>

    Mon test.css (extrait)
    .boite1
    {
    background-image: url("./pics/accueil/banniere.gif") ;
    position:absolute;
    left:10px;
    top:100px; (exprès pour voir si mon corps de page s'affiche en dessous)
    width:491px;
    height:80px;
    }

    Et j'appelle mon header dans ma page de manière classique :
    <body>
    <?php include ("header.php");
    ?>
    <table width="142" height="612" border="0" cellspacing="0" bordercolor="#990000" summary="Menu">
    <tr>
    <td height="21" bordercolor="#990000">&nbsp;</td>
    (ici le reste du code de mon tableau)
    </tr>
    </table>

    <?php include ("footer.php");
    ?>
    </body>

    Mon footer s'affiche bien à la suite de ma page par contre...

    Là je sèche :? J'suispas encore bien doué mais bon... :oops:
    Merci pour votre aide :wink:
     
  15. illicotravel
    illicotravel Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    15
    J'aime reçus:
    0
    le squelette d'une page doit être sous la forme:

    là, tu fais:

     
  16. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    je crois avoir compris :oops: mais pourrais tu m'expliquer un peu mieux ?
    tu veux dire que L'ENSEMBLE header + corps + footer doit être sous la forme :
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>

    Alors que moi mon header a cette forme et que mon corps aussi :?: et que du coup ça fait double emploi ?
     
  17. illicotravel
    illicotravel Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    15
    J'aime reçus:
    0
    exactement: ton header est simplement une partie de ta page finale que tu as décidé d'exporter. Pour ne pas faire d'erreur, dessine ta page finale en premier, puis exporte la partie que tu souhaites, comme ça tu es sur de garder une cohérence d'ensemble.
     
  18. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Ok mais alors çomment expliquer que mon header se superpose à mon corps de page ? :oops:
    Ma nouvelle structure :

    header :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Document sans titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">@import "test.css";</style>

    </head>
    <body leftmargin="0" topmargin="0">
    <DIV class="boite1"></DIV>

    mon corps de page :
    <?php include ("header.php");
    ?>
    <table width="142" height="540" border="0" cellspacing="0" bordercolor="#990000" summary="Menu">
    <tr>
    ...
    </tr>
    </table>

    <?php include ("footer.php");
    ?>

    mon footer :
    FOOTER
    </body>
    </html>

    Et comme d'hab, le footer lui colle parfaitement avec le corps de page :?

    :?: :?: :?:
     
  19. illicotravel
    illicotravel Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    15
    J'aime reçus:
    0
    Si je comprends bien, tu veux savoir pourquoi ta div avec la classe "boite1" se trouve au dessus du reste. Si c'est ta question, c'est parce que la position de cette classe est définie en absolute, donc décorrélée du reste des éléments de ta page.

    Si tu cherches à avoir un header, un body et un footer, procède comme suit:

    <!-- début header -->
    <html>
    <head>
    </head>
    <body>
    <div class="header">
    <div class="boite1"></div>
    </div>
    <!-- fin header -->

    <!-- début body -->
    <!-- fin body -->

    <!-- début footer -->
    </body>
    </html>
    <!-- fin footer -->

    la classe "header" définie l'espace total de ton header (position: relative)
    la classe "boite1" définie ta pub (sa position dans le header en fait)
     
  20. loufpad
    loufpad WRInaute discret
    Inscrit:
    28 Octobre 2005
    Messages:
    163
    J'aime reçus:
    0
    Disons le tout net : je t'aime !!! :lol: :lol: 8)

    Merci beaucoup d'avoir pris le temps de m'expliquer (longuement :oops: ) les choses. J'ai appris pas mal de trucs avec tes conseils et en faisant des tests à partir de ceux-ci.

    Vraiment, merci :wink:
     
  21. illicotravel
    illicotravel Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    15
    J'aime reçus:
    0
Chargement...
Similar Threads - forme tableaux blocs Forum Date
Droit plateforme mise en relation Droit du web (juridique, fiscalité...) Dimanche à 16:43
Prix en 2022 d'une plateforme de mise en relation Développement d'un site Web ou d'une appli mobile Dimanche à 16:04
Suppression de la recherche Google conformément au DMCA Référencement Google 20 Juillet 2022
Quelle CMP vraiment simple pour être conforme au RGPD ? Administration d'un site Web 14 Mars 2022
Ancre pour Sommaire de page comment les mettre en forme? Débuter en référencement 24 Février 2022
sous domaine transformé en nouveau site Crawl et indexation Google, sitemaps 23 Janvier 2022
Plateforme pour backlinks provenant des US Netlinking, backlinks, liens et redirections 18 Janvier 2022
Se former au SEO Débuter en référencement 18 Novembre 2021
Transformer une page pro en page personnelle Facebook 11 Novembre 2021
Faut-il utiliser cette plateforme netlinking? DealerDeTemps Netlinking, backlinks, liens et redirections 2 Juillet 2021
que penser de la plateforme dealerdetemps? Netlinking, backlinks, liens et redirections 5 Avril 2021
Plateforme de pub entre particuliers Monétisation d'un site web 2 Avril 2021
Plateforme de paiement pour de l'affiliation Demandes d'avis et de conseils sur vos sites 9 Février 2021
Vos meilleures plateformes netlinking anglais ?! Référencement international (langues, pays) 10 Janvier 2021
Backlinks plateforme netlinking Netlinking, backlinks, liens et redirections 8 Janvier 2021
Plateformes de netlinking pour le marché italien Référencement international (langues, pays) 22 Décembre 2020
Titre de ma page transformé par Google ! Help Débuter en référencement 7 Décembre 2020
Profile facebook transformé en page par erreur Facebook 15 Novembre 2020
Votre avis sur ma plateforme d'affiliation Demandes d'avis et de conseils sur vos sites 15 Novembre 2020
Impossible de transformer son profil en page ? Facebook 6 Octobre 2020