Mise en forme : tableaux et blocs CSS

le Mar Jan 10, 2006 20:10

Hello la troupe

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

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:

)

le Mar Jan 10, 2006 20:15

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".

le Mar Jan 10, 2006 20:28

oui evite les tableaux c est un cauchemar et c est trop vieux maintenant
Div + CSS

le Mar Jan 10, 2006 21:17

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… "

le Mar Jan 10, 2006 21:47

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 ?

le Mar Jan 10, 2006 22:21

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.

le Mar Jan 10, 2006 22:36

div + css + font em

le Mer Jan 11, 2006 0:18

Un bon partenaire valant mieux qu'un long discours: http://css.alsacreations.com/

le Mer Jan 11, 2006 0:28

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.

le Mer Jan 11, 2006 1:58

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:

le Mer Jan 11, 2006 3:26

met style="postion:relative"

le Mer Jan 11, 2006 10:34

mets surtout la définition de tes styles dans un fichier CSS à part. Au lieu d'avoir:

<DIV class="boite1" style="position:absolute; left:100px; top:100px; width:491px; height:80px; z-index:1;"></DIV>

il vaut mieux:

<DIV class="boite1 style1"></DIV>

avec en fichier css:

.style1 {
position:absolute;
left:100px;
top:100px;
width:491px;
height:80px;
z-index:1;
}

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)

le Jeu Jan 12, 2006 10:28

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

le Jeu Jan 12, 2006 20:46

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"> </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:

le Jeu Jan 12, 2006 20:53

le squelette d'une page doit être sous la forme:

<html>
<head>
</head>
<body>
</body>
</html>

là, tu fais:

<body>
<html>
<head>
</head>
<body>
</body>
</html>
</body>

Mise en forme : tableaux et blocs CSS

Mise en forme : tableaux et blocs CSS

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne